/* 자료실 · 루트 공용 스타일 — 포털 토큰만 사용 */
.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-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); }

.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; }

.arc-foot { display: flex; gap: 18px; justify-content: center; padding: 26px 20px 40px;
  border-top: 1px solid var(--line); font-size: 13.5px; }
.arc-foot a { color: var(--ink-soft); text-decoration: none; }
.arc-foot 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; }
.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; } }