/* ═══════════════════════════════════════════════════════════
   나주 문화유산 디지털트윈 — 공통 화면 꾸밈
   색은 맨 위 :root 에서만 바꾸면 전체가 함께 바뀝니다.
   ═══════════════════════════════════════════════════════════ */
@font-face{ font-family:'Pretendard'; src:url('fonts/PretendardVariable.woff2') format('woff2-variations');
  font-weight:100 900; font-display:swap; }

:root{
  --yellow:#F5C518; --yellow-d:#E0B000;
  --green:#1E8F4E;  --green-d:#176F3C;
  --navy:#1F4E8C;   --navy-d:#163A69;
  --red:#D6392E;
  --ink:#222;  --ink-2:#444;  --muted:#777;  --line:#E2E2E2;  --bg:#fff;  --bg-2:#F6F7F9;
  --foot:#2F3239;  --foot-2:#24262B;
  --w:1200px;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ font-family:'Pretendard',-apple-system,'Malgun Gothic','Apple SD Gothic Neo',sans-serif;
  color:var(--ink); background:var(--bg); font-size:15px; line-height:1.6; letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit; }
img{ max-width:100%; display:block; }
.wrap{ max-width:var(--w); margin:0 auto; padding:0 16px; }
.sr{ position:absolute; left:-9999px; }

/* ── 시안 띠 (제안용 화면임을 알림 · 실제 누리집에 넣을 때는 이 줄만 지우면 됩니다) ── */
.ribbon{ background:#14161B; color:#fff; font-size:12.5px; padding:6px 0; }
.ribbon .wrap{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.ribbon b{ background:var(--yellow); color:#222; padding:1px 8px; border-radius:3px; font-weight:800; font-size:11.5px; }
.ribbon span{ opacity:.85; }

/* ── 맨 위 유틸 줄 ── */
.util{ border-bottom:1px solid var(--line); background:#fff; }
.util .wrap{ height:66px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.util .left{ display:flex; gap:14px; font-size:13px; color:var(--ink-2); }
.util .left .lang{ display:inline-flex; align-items:center; gap:6px; }
.util .left .lang i{ width:16px; height:16px; border-radius:50%; border:1.5px solid #999; display:inline-block;
  position:relative; }
.util .left .lang i::after{ content:''; position:absolute; left:4px; top:3px; width:5px; height:5px;
  border-right:1.5px solid #999; border-bottom:1.5px solid #999; transform:rotate(45deg); }
.logo{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:21px; letter-spacing:-.02em; }
.logo .mark{ width:38px; height:38px; border-radius:50%; position:relative; flex:none;
  background:conic-gradient(from 200deg, var(--green) 0 40%, var(--yellow) 0 70%, var(--navy) 0); }
.logo .mark::after{ content:''; position:absolute; inset:9px; border-radius:50%; background:#fff; }
.logo small{ display:block; font-size:10.5px; font-weight:600; color:var(--muted); letter-spacing:.12em; line-height:1; }
.util .right{ display:flex; align-items:center; gap:14px; }
.search{ display:flex; align-items:center; border:2px solid var(--navy); border-radius:24px; overflow:hidden; height:40px; }
.search input{ border:0; outline:0; padding:0 14px; width:180px; font:inherit; font-size:13.5px; }
.search button{ width:42px; height:100%; background:var(--navy); color:#fff; font-size:16px; }
.sitemap{ background:var(--red); color:#fff; width:72px; height:66px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:5px; font-size:12px; font-weight:700; }
.sitemap i{ width:18px; height:18px; display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.sitemap i::before,.sitemap i::after{ content:''; }
.sitemap i b{ background:#fff; border-radius:1px; display:block; }

/* ── 노란 메뉴 줄 ── */
.gnb{ background:var(--yellow); }
.gnb .wrap{ display:flex; align-items:stretch; height:46px; padding:0 0 0 16px; }
.gnb .promo{ display:flex; align-items:center; gap:6px; font-weight:800; font-size:14px; padding-right:18px; white-space:nowrap; }
.gnb .promo::after{ content:'↗'; font-size:11px; font-weight:400; border:1px solid #222; border-radius:2px; padding:0 3px; line-height:1.3; }
.gnb ul{ list-style:none; margin:0; padding:0; display:flex; align-items:stretch; flex:1; }
.gnb li{ display:flex; align-items:center; padding:0 11px; font-weight:700; font-size:14.5px; position:relative; white-space:nowrap; }
.gnb li.on{ text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:2px; }
.gnb li .new{ position:absolute; top:5px; right:2px; background:var(--red); color:#fff; font-size:9px; font-weight:800;
  padding:0 4px; border-radius:2px; line-height:1.5; }
.gnb .tools{ background:var(--navy); color:#fff; display:flex; align-items:center; gap:12px; padding:0 14px 0 26px;
  font-size:12px; font-weight:600; clip-path:polygon(14px 0,100% 0,100% 100%,0 100%); white-space:nowrap; }
.gnb .tools span::before{ content:'◎ '; opacity:.85; }
.gnb .copy{ background:var(--red); width:72px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:17px; }

/* ── 머리 사진 ── */
.hero{ position:relative; height:150px; color:#fff; overflow:hidden;
  background:
    radial-gradient(60% 120% at 20% 0%, rgba(245,197,24,.55), transparent 60%),
    radial-gradient(50% 100% at 85% 100%, rgba(30,143,78,.65), transparent 60%),
    linear-gradient(120deg,#1a3b2a,#284d7c 60%,#4b3b1c); }
.hero::before{ content:''; position:absolute; inset:0; opacity:.35;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(255,255,255,.08) 46px 47px),
    repeating-linear-gradient(0deg, transparent 0 46px, rgba(255,255,255,.08) 46px 47px); }
.hero .wrap{ height:100%; display:flex; align-items:center; justify-content:center; position:relative; }
.hero h1{ margin:0; font-size:30px; font-weight:800; letter-spacing:-.02em; text-shadow:0 2px 12px rgba(0,0,0,.35); }
.hero .icons{ position:absolute; right:16px; bottom:16px; display:flex; gap:8px; }
.hero .icons i{ width:30px; height:30px; border-radius:50%; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.35);
  display:flex; align-items:center; justify-content:center; font-style:normal; font-size:13px; }

/* ── 본문 2단 ── */
.page{ display:grid; grid-template-columns:190px 1fr; gap:0 34px; margin-top:-8px; }
.lnb{ background:#fff; border:1px solid var(--line); border-top:0; align-self:start; }
.lnb h2{ margin:0; background:var(--green); color:#fff; text-align:center; font-size:20px; font-weight:800;
  height:66px; display:flex; align-items:center; justify-content:center; }
.lnb .grp{ border-bottom:1px solid var(--line); }
.lnb .grp > a{ display:flex; justify-content:space-between; align-items:center; padding:13px 14px; font-weight:700; font-size:14px; }
.lnb .grp > a::after{ content:'+'; color:#999; font-weight:400; font-size:16px; }
.lnb .grp.open > a{ background:var(--navy); color:#fff; }
.lnb .grp.open > a::after{ content:'−'; color:#fff; }
.lnb .grp ul{ list-style:none; margin:0; padding:10px 14px 12px; display:none; }
.lnb .grp.open ul{ display:block; }
.lnb .grp li{ font-size:13px; padding:3px 0 3px 10px; position:relative; color:var(--ink-2); }
.lnb .grp li::before{ content:'·'; position:absolute; left:0; }
.lnb .grp li.on a{ color:var(--navy); text-decoration:underline; text-underline-offset:3px; font-weight:700; }

.content{ min-width:0; padding-top:14px; }
.crumb{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted); margin-bottom:22px; }
.crumb span + span::before{ content:'›'; margin-right:10px; color:#bbb; }
.crumb .home::before{ content:'⌂'; font-size:15px; }
.titlebar{ display:flex; align-items:center; justify-content:space-between; border-bottom:2px solid #ddd; padding-bottom:10px; margin-bottom:34px; }
.titlebar h2{ margin:0; font-size:26px; font-weight:800; letter-spacing:-.02em; }
.titlebar h2 small{ font-size:15px; color:var(--muted); font-weight:500; margin-left:10px; }
.share{ display:flex; gap:6px; }
.share i{ width:30px; height:30px; border-radius:50%; color:#fff; font-style:normal; font-size:12px; font-weight:800;
  display:flex; align-items:center; justify-content:center; }
.share .f{ background:#1877f2; } .share .x{ background:#111; } .share .l{ background:#2ecc71; }

.intro{ text-align:center; margin-bottom:30px; }
.intro h3{ margin:0 0 10px; font-size:32px; font-weight:800; letter-spacing:-.03em; }
.intro p{ margin:0; color:var(--ink-2); font-size:15px; }

/* ── 카드 격자 ── */
.grid{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:210px; gap:14px; }
.card{ position:relative; overflow:hidden; border-radius:4px; background:#233 center/cover no-repeat; color:#fff; display:block; }
.card.tall{ grid-row:span 2; }
.card::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.72)); }
.card .in{ position:absolute; left:22px; right:22px; bottom:22px; z-index:1; }
.card .k{ font-size:12px; font-weight:700; color:var(--yellow); letter-spacing:.02em; margin-bottom:4px; }
.card h4{ margin:0 0 6px; font-size:24px; font-weight:800; letter-spacing:-.02em; text-shadow:0 1px 4px rgba(0,0,0,.6); }
.card h4 small{ font-size:14px; font-weight:500; opacity:.85; margin-left:6px; }
.card p{ margin:0 0 12px; font-size:13.5px; opacity:.95; text-shadow:0 1px 3px rgba(0,0,0,.6); }
.card .btn{ display:inline-block; border:1px solid #fff; border-radius:16px; padding:4px 14px; font-size:12.5px; font-weight:600; }
.card:hover .btn{ background:#fff; color:#222; }
.card .img{ position:absolute; inset:0; background:center/cover no-repeat; transition:transform .5s; }
.card:hover .img{ transform:scale(1.04); }
.tile{ border:1px solid var(--line); border-radius:4px; background:var(--bg-2); padding:22px 24px; grid-column:1 / -1; display:flex; gap:22px; align-items:center; }
.tile .num{ flex:none; width:64px; height:64px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center;
  justify-content:center; font-size:26px; }
.tile h5{ margin:0 0 6px; font-size:17px; font-weight:800; }
.tile p{ margin:0; font-size:13.5px; color:var(--ink-2); }

/* ── 활용 안내 3단 ── */
.sec{ margin-top:46px; }
.sec h3{ font-size:22px; font-weight:800; margin:0 0 6px; letter-spacing:-.02em; }
.sec > p{ margin:0 0 18px; color:var(--muted); font-size:14px; }
.feat{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.feat > div{ border:1px solid var(--line); border-top:3px solid var(--green); padding:20px; border-radius:4px; }
.feat > div b{ display:block; font-size:16px; margin-bottom:6px; }
.feat > div p{ margin:0; font-size:13.5px; color:var(--ink-2); }
.feat .i{ font-size:26px; margin-bottom:8px; }

table.list{ width:100%; border-collapse:collapse; font-size:13.5px; border-top:2px solid #444; }
table.list th{ background:var(--bg-2); font-weight:700; padding:10px 8px; border-bottom:1px solid var(--line); text-align:center; }
table.list td{ padding:10px 8px; border-bottom:1px solid var(--line); text-align:center; }
table.list td:first-child{ font-weight:700; }
table.list a{ color:var(--navy); text-decoration:underline; text-underline-offset:3px; }

/* ── 담당자 줄 · 바닥 ── */
.owner{ margin-top:48px; border:1px solid var(--line); display:flex; align-items:center; font-size:13.5px; }
.owner b{ background:var(--navy); color:#fff; padding:12px 18px; font-weight:700; }
.owner span{ padding:12px 18px; border-right:1px solid var(--line); }
.owner span:last-child{ border:0; }
footer{ margin-top:60px; }
footer .links{ background:var(--foot); color:#ddd; font-size:13px; }
footer .links .wrap{ height:50px; display:flex; align-items:center; gap:30px; position:relative; }
footer .top{ position:absolute; right:16px; top:-14px; width:64px; height:64px; background:var(--red); color:#fff; font-weight:800;
  font-size:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
footer .addr .wrap{ display:flex; gap:40px; align-items:center; padding:26px 16px; font-size:12.5px; color:var(--ink-2); line-height:1.8; }

/* ── 상세: 3D 뷰어 ── */
.viewer{ position:relative; background:#0f1216; border-radius:6px; overflow:hidden; aspect-ratio:16/9; max-width:100%; }
.viewer canvas{ display:block; width:100% !important; height:100% !important; }
.viewer:fullscreen{ aspect-ratio:auto; border-radius:0; }
.vtop{ position:absolute; left:12px; top:12px; display:flex; gap:6px; flex-wrap:wrap; z-index:3; }
.vtop button, .vbot button{ background:rgba(20,22,28,.78); color:#fff; border:1px solid rgba(255,255,255,.18); border-radius:20px;
  padding:6px 13px; font-size:12.5px; font-weight:600; backdrop-filter:blur(6px); }
.vtop button.on, .vbot button.on{ background:var(--yellow); color:#222; border-color:var(--yellow); }
.vbot{ position:absolute; left:12px; right:12px; bottom:12px; display:flex; justify-content:space-between; gap:8px; z-index:3; flex-wrap:wrap; }
.vbot .q{ display:flex; gap:4px; }
.vhint{ position:absolute; right:12px; top:12px; color:#fff; font-size:12px; background:rgba(20,22,28,.6); padding:5px 10px; border-radius:14px; z-index:3; }
.vload{ position:absolute; inset:0; display:none; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background:rgba(10,12,16,.82); color:#fff; z-index:5; text-align:center; padding:20px; }
.vload.on{ display:flex; }
.vload .t{ font-size:17px; font-weight:700; }
.vload .s{ font-size:13px; opacity:.8; }
.vload .bar{ width:min(360px,80%); height:6px; background:rgba(255,255,255,.15); border-radius:3px; overflow:hidden; }
.vload .bar i{ display:block; height:100%; width:0; background:var(--yellow); transition:width .3s; }
.vload button{ margin-top:6px; padding:8px 18px; border-radius:20px; background:var(--yellow); color:#222; font-weight:700; }
.vload .err{ color:#ffb3a7; }
.vload code{ background:rgba(255,255,255,.12); padding:1px 6px; border-radius:4px; font-size:12px; }
.vcover{ position:absolute; inset:0; z-index:4; display:flex; align-items:center; justify-content:center; background:center/cover no-repeat #1a1f26; }
.vcover::before{ content:''; position:absolute; inset:0; background:rgba(0,0,0,.35); }
.vcover button{ position:relative; background:var(--yellow); color:#222; font-weight:800; font-size:16px; padding:14px 30px; border-radius:30px;
  box-shadow:0 8px 30px rgba(0,0,0,.4); }
.vcover button small{ display:block; font-size:12px; font-weight:600; opacity:.8; }
.vcover.off{ display:none; }

.tabs{ display:flex; border-bottom:2px solid #444; margin:26px 0 0; }
.tabs button{ padding:11px 22px; font-weight:700; font-size:14.5px; color:var(--muted); border:1px solid transparent; border-bottom:0; margin-bottom:-2px; }
.tabs button.on{ color:var(--ink); border-color:#444 #444 #fff; background:#fff; }
.pane{ display:none; padding:22px 4px; }
.pane.on{ display:block; }
.pane p{ margin:0 0 12px; font-size:15px; color:var(--ink-2); }
.info{ width:100%; border-collapse:collapse; font-size:14px; margin-bottom:18px; border-top:2px solid #444; }
.info th{ width:140px; background:var(--bg-2); text-align:left; padding:10px 14px; border-bottom:1px solid var(--line); font-weight:700; }
.info td{ padding:10px 14px; border-bottom:1px solid var(--line); }
.lead{ font-size:19px; font-weight:700; color:var(--navy); margin:0 0 14px !important; }
.kv{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:20px; }
.kv div{ border:1px solid var(--line); border-radius:4px; padding:14px 16px; }
.kv b{ display:block; font-size:22px; font-weight:800; color:var(--navy); }
.kv span{ font-size:12.5px; color:var(--muted); }
.next{ display:flex; gap:12px; margin-top:26px; }
.next a{ flex:1; border:1px solid var(--line); border-radius:4px; padding:14px 16px; display:flex; align-items:center; gap:12px; }
.next a:hover{ border-color:var(--navy); }
.next a .th{ width:64px; height:44px; border-radius:3px; background:center/cover #333; flex:none; }
.next a b{ display:block; font-size:15px; }
.next a span{ font-size:12px; color:var(--muted); }

/* 안내 지점 칩 · 설명 카드 */
.chips{ position:absolute; left:12px; top:52px; display:flex; gap:6px; z-index:3; flex-wrap:wrap; max-width:calc(100% - 360px); }
.chips button{ background:rgba(20,22,28,.7); color:#fff; border:1px solid rgba(255,255,255,.18); border-radius:20px; padding:5px 12px; font-size:12.5px; font-weight:600; backdrop-filter:blur(6px); }
.chips button::before{ content:'●'; color:var(--yellow); font-size:8px; margin-right:6px; vertical-align:2px; }
.chips button.on{ background:var(--yellow); color:#222; border-color:var(--yellow); }
.chips button.on::before{ color:#222; }
.poicard{ position:absolute; right:12px; top:56px; width:min(320px, calc(100% - 24px)); z-index:4; background:rgba(255,255,255,.96); color:#222; border-radius:12px;
  padding:16px 18px 14px; box-shadow:0 10px 36px rgba(0,0,0,.35); transform:translateX(24px); opacity:0; pointer-events:none; transition:.28s; border-left:5px solid var(--yellow); }
.poicard.on{ transform:none; opacity:1; pointer-events:auto; }
.poicard .px{ position:absolute; right:10px; top:8px; width:26px; height:26px; border-radius:50%; background:#f0f0f0; color:#555; font-size:12px; }
.poicard .pk{ font-size:11.5px; font-weight:700; color:var(--navy); letter-spacing:.02em; margin-bottom:2px; }
.poicard .pn{ font-size:20px; font-weight:800; letter-spacing:-.02em; margin-bottom:8px; }
.poicard .pn small{ font-size:12.5px; font-weight:500; color:#777; margin-left:6px; }
.poicard .pd{ font-size:13.5px; line-height:1.6; color:#333; }
.poicard .pf{ margin-top:10px; padding-top:8px; border-top:1px solid #eee; font-size:12px; color:#888; display:flex; gap:8px; align-items:baseline; }
.poicard .pm{ font-size:15px; font-weight:800; color:#222; }
@media (max-width:960px){ .chips{ max-width:calc(100% - 24px); } .vhint{ display:none; } }
@media (max-width:600px){ .poicard{ top:auto; bottom:190px; right:12px; left:12px; width:auto; } }

/* 해설 자막판 */
.tourbar{ position:absolute; left:12px; right:12px; bottom:56px; z-index:4; background:rgba(14,16,22,.78); color:#fff; border-radius:10px;
  padding:12px 16px 10px; backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.12); }
.tourbar .tt{ display:flex; align-items:baseline; gap:10px; margin-bottom:4px; }
.tourbar .tt b{ color:var(--yellow); font-size:16px; font-weight:800; }
.tourbar .tt span{ font-size:12px; opacity:.7; }
.tourbar .tx{ font-size:14.5px; line-height:1.55; }
.tourbar .tc{ display:flex; gap:6px; margin-top:8px; align-items:center; }
.tourbar .tc button{ background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); color:#fff; border-radius:16px; padding:4px 12px; font-size:13px; }
.tourbar .tc button.free{ margin-left:auto; background:var(--yellow); color:#222; border-color:var(--yellow); font-weight:700; }
@media (max-width:600px){ .tourbar{ bottom:190px; padding:10px 12px; } .tourbar .tx{ font-size:13px; } }
#joy{ position:absolute; left:18px; bottom:60px; width:120px; height:120px; border-radius:50%; background:rgba(20,22,28,.45);
  border:1px solid rgba(255,255,255,.25); z-index:4; touch-action:none; }
#jumpBtn{ position:absolute; right:18px; bottom:70px; width:64px; height:64px; border-radius:50%; background:rgba(245,197,24,.92); color:#222;
  font-weight:800; font-size:14px; z-index:4; touch-action:none; box-shadow:0 4px 14px rgba(0,0,0,.35); }
#joy i{ position:absolute; left:50%; top:50%; width:52px; height:52px; margin:-26px 0 0 -26px; border-radius:50%; background:rgba(245,197,24,.9); }

/* ── 좁은 화면 ── */
@media (max-width: 1180px){ .gnb .tools{ display:none; } }
@media (max-width: 960px){
  .util .search{ display:none; }
  .page{ grid-template-columns:1fr; }
  .lnb{ border-top:1px solid var(--line); margin-top:14px; }
  .lnb h2{ height:50px; font-size:17px; }
  .grid{ grid-template-columns:1fr 1fr; grid-auto-rows:190px; }
  .card.tall{ grid-row:span 1; grid-column:span 2; }
  .feat, .kv{ grid-template-columns:1fr; }
  .next{ flex-direction:column; }
}
@media (max-width: 600px){
  .gnb .wrap{ overflow-x:auto; }
  .gnb .promo{ display:none; }
  .grid{ grid-template-columns:1fr; }
  .card.tall{ grid-column:span 1; }
  .tile{ flex-direction:column; align-items:flex-start; }
  .intro h3{ font-size:24px; }
  .titlebar h2{ font-size:21px; }
  .owner{ flex-wrap:wrap; }
  footer .addr .wrap{ flex-direction:column; align-items:flex-start; gap:10px; }
}