/* ============================================================
   pages.css · 전시정보(info) · 스튜디오(studio) · 작품상세(work)
   ============================================================ */

.page-shell { max-width: 1040px; margin: 0 auto; padding: 130px 24px 40px; }

.page-header { text-align: center; margin-bottom: 50px; }
.page-header .eyebrow { display: block; margin-bottom: 14px; }
.page-header h1 { font-family: var(--f-display); font-weight: 300; font-size: clamp(28px, 5vw, 48px); letter-spacing: .2em; color: var(--c-ice); }
.page-header .h1-ko { font-family: var(--f-ko); font-weight: 600; font-size: clamp(18px, 3vw, 26px); letter-spacing: .1em; color: var(--c-helix-cyan); margin-top: 10px; }

.section-title {
  font-family: var(--f-mono); font-size: 13px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--c-helix-cyan); padding-bottom: 12px; margin-bottom: 22px;
  border-bottom: 1px solid var(--c-line);
}

/* ── 정보 그리드 ── */
.info-grid { display: grid; grid-template-columns: 160px 1fr; gap: 0; margin-bottom: 50px; }
.info-grid dt {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--c-helix-cyan); padding: 18px 0; border-bottom: 1px solid var(--c-line);
}
.info-grid dd { padding: 18px 0; border-bottom: 1px solid var(--c-line); color: var(--c-ice); font-size: 16px; }
.info-grid dd .sub { display: block; color: var(--c-ice-faint); font-size: 13px; margin-top: 5px; }
.info-grid dd a { color: var(--c-helix-cyan); }

/* ── 오픈 인스톨레이션 모듈 ── */
.open-module {
  margin: 10px 0 54px; padding: 30px 28px; border-radius: 12px;
  border: 1px solid rgba(107,213,255,.35);
  background: linear-gradient(180deg, rgba(58,134,255,.08), var(--c-abyss));
  box-shadow: inset 0 0 40px rgba(58,134,255,.06);
}
.open-module .tag { font-family: var(--f-mono); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--c-helix-cyan); }
.open-module h2 { font-family: var(--f-ko); font-weight: 700; font-size: 22px; margin: 8px 0 4px; }
.open-module .dates { font-family: var(--f-mono); font-size: 14px; letter-spacing: .1em; color: var(--c-ice); }
.open-module p { margin-top: 12px; font-size: 15px; line-height: 1.85; color: var(--c-ice-dim); max-width: 70ch; }
.open-timeline { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.open-timeline .day {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em;
  padding: 7px 12px; border: 1px solid var(--c-line); border-radius: 999px; color: var(--c-ice-dim);
}
.open-timeline .day b { color: var(--c-helix-cyan); font-weight: 500; }

/* ── 큐레토리얼 노트 ── */
.statement { margin-bottom: 54px; }
.statement p { font-size: 16px; line-height: 1.95; color: var(--c-ice-dim); margin-bottom: 14px; }
.statement em { color: var(--c-helix-cyan); font-style: normal; }

/* ── 오시는 길 ── */
.access-block { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 54px; }
.access-card { border: 1px solid var(--c-line); border-radius: 10px; padding: 22px; background: var(--c-panel); }
.access-card h3 { font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-helix-cyan); margin-bottom: 14px; }
.access-card ul { list-style: none; }
.access-card li { display: flex; gap: 12px; padding: 7px 0; font-size: 14px; color: var(--c-ice-dim); }
.access-card li .lbl { min-width: 66px; font-family: var(--f-mono); font-size: 11px; color: var(--c-ice-faint); letter-spacing: .06em; }

/* ── 약식 평면도 ── */
.map-block { border: 1px solid var(--c-line); border-radius: 10px; overflow: hidden; background: #04070d; margin-bottom: 8px; }
.map-block svg { width: 100%; height: auto; display: block; }
.map-cap { font-family: var(--f-mono); font-size: 11px; color: var(--c-ice-faint); text-align: center; margin: 10px 0 54px; letter-spacing: .04em; }

/* ── 시리즈 카드 (I·II·III) ── */
.series-block { margin: 10px 0 54px; }
.series-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.series-card { position: relative; border: 1px solid var(--c-line); border-radius: 12px; padding: 22px 20px; background: var(--c-panel); }
.series-card.now { border-color: rgba(107,213,255,.45); box-shadow: inset 0 0 36px rgba(58,134,255,.08); }
.series-card .ribbon { font-family: var(--f-mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--c-ice-faint); }
.series-card.now .ribbon { color: var(--c-helix-cyan); }
.series-card .ord { font-family: var(--f-display); font-size: 13px; letter-spacing: .2em; color: var(--c-ice-dim); margin-top: 10px; }
.series-card h3 { font-family: var(--f-ko); font-weight: 600; font-size: 18px; margin: 4px 0 2px; color: var(--c-ice); }
.series-card .name-en { font-family: var(--f-mono); font-size: 11px; color: var(--c-ice-faint); margin-bottom: 12px; }
.series-card dl { display: grid; grid-template-columns: 52px 1fr; gap: 6px 10px; font-size: 12.5px; }
.series-card dt { font-family: var(--f-mono); font-size: 10px; letter-spacing: .08em; color: var(--c-ice-faint); text-transform: uppercase; padding-top: 2px; }
.series-card dd { color: var(--c-ice-dim); line-height: 1.5; }
.series-note { margin-top: 18px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .04em; color: var(--c-ice-faint); text-align: center; }

/* ── 후원 / 크레딧 ── */
.partners { margin: 10px 0 40px; }
.partner-grid { display: flex; flex-wrap: wrap; gap: 14px; }
.partner {
  flex: 1 1 150px; border: 1px solid var(--c-line); border-radius: 10px; padding: 18px;
  text-align: center; background: var(--c-panel);
}
.partner .pname { font-family: var(--f-display); font-size: 14px; letter-spacing: .08em; color: var(--c-ice); }
.partner .prole { font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ice-faint); margin-top: 6px; }

.credits { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--c-line); display: grid; grid-template-columns: 160px 1fr; gap: 12px 30px; font-family: var(--f-mono); font-size: 12px; line-height: 1.9; color: var(--c-ice-dim); }
.credits .ck { font-size: 10px; letter-spacing: .26em; color: var(--c-helix-cyan); text-transform: uppercase; }

/* ============================================================
   스튜디오 (studio.html)
   ============================================================ */
.studio-intro { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.studio-intro p { font-size: 16px; line-height: 1.95; color: var(--c-ice-dim); margin-bottom: 14px; }
.studio-intro em { color: var(--c-helix-cyan); font-style: normal; }

.base-legend { text-align: center; font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; color: var(--c-ice-faint); margin-bottom: 30px; }

.artist-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.artist-card {
  border: 1px solid var(--c-line); border-radius: 14px; padding: 28px;
  background: linear-gradient(180deg, var(--c-panel), var(--c-abyss));
  display: grid; grid-template-columns: 70px 1fr; gap: 20px; align-items: start;
}
.artist-card .base-mark {
  width: 70px; height: 70px; border-radius: 12px; display: grid; place-items: center;
  border: 1px solid var(--c-glass-edge); background: var(--c-panel-2);
}
.artist-card .base-mark .glyph { width: 38px; height: 38px; stroke: var(--c-helix-cyan); filter: drop-shadow(0 0 8px rgba(107,213,255,.4)); }
.artist-card .base-mark .glyph.fill { fill: var(--c-helix-cyan); }
.artist-card .b-label { font-family: var(--f-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--c-ice-faint); }
.artist-card h3 { font-family: var(--f-ko); font-weight: 700; font-size: 22px; margin: 4px 0 2px; }
.artist-card .role { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; color: var(--c-helix-cyan); }
.artist-card p { margin-top: 12px; font-size: 14px; line-height: 1.8; color: var(--c-ice-dim); }
.artist-card .ph { color: var(--c-ice-faint); font-style: italic; }

/* ============================================================
   작품 상세 (work.html)
   ============================================================ */
.work-shell { max-width: 1000px; margin: 0 auto; padding: 120px 24px 40px; }
.work-meta-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--c-line); margin-bottom: 36px; flex-wrap: wrap; }
.work-meta-bar .crumb { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; color: var(--c-ice-faint); display: flex; gap: 8px; align-items: center; }
.work-meta-bar .crumb a { color: var(--c-helix-cyan); }
.work-meta-bar .crumb .sep { opacity: .5; }
.work-meta-bar .code-pair { display: flex; align-items: center; gap: 12px; font-family: var(--f-mono); font-size: 12px; }
.work-meta-bar .code-dig { color: var(--c-helix-cyan); letter-spacing: .1em; }

.work-title-block { text-align: center; margin-bottom: 36px; }
.work-glyph { display: inline-grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 14px; border: 1px solid var(--c-glass-edge); border-radius: 12px; background: var(--c-panel-2); }
.work-glyph .glyph { width: 30px; height: 30px; stroke: var(--c-helix-cyan); }
.work-glyph .glyph.fill { fill: var(--c-helix-cyan); }
.work-num { font-family: var(--f-mono); font-size: 12px; letter-spacing: .24em; color: var(--c-ice-faint); }
.work-title-ko { font-family: var(--f-ko); font-weight: 700; font-size: clamp(26px, 4.5vw, 40px); letter-spacing: .04em; margin: 10px 0 4px; }
.work-title-en { font-family: var(--f-mono); font-size: 13px; letter-spacing: .12em; color: var(--c-ice-faint); }
.work-form-tag { margin-top: 14px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; color: var(--c-helix-cyan); }

.work-visual { position: relative; height: 320px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 40px; }
.work-visual-helix { position: absolute; inset: 0; padding: 0 12%; display: flex; align-items: center; opacity: .85; }
.work-visual-helix .helix { --helix-h: 200px; }
.work-visual .placeholder-note { position: relative; z-index: 2; font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-ice-faint); background: rgba(0,0,0,.5); padding: 8px 16px; border-radius: 999px; border: 1px solid var(--c-line); }

.work-body { display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: start; }
.data-sheet { border: 1px solid var(--c-line); border-radius: 12px; padding: 22px; background: var(--c-panel); position: sticky; top: 90px; }
.data-sheet h3 { font-family: var(--f-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--c-helix-cyan); margin-bottom: 14px; }
.data-sheet dl { display: grid; grid-template-columns: 64px 1fr; gap: 8px 12px; }
.data-sheet dt { font-family: var(--f-mono); font-size: 10px; letter-spacing: .06em; color: var(--c-ice-faint); text-transform: uppercase; padding-top: 2px; }
.data-sheet dd { font-size: 13px; color: var(--c-ice-dim); line-height: 1.5; }

.work-prose .layer { margin-bottom: 30px; }
.work-prose .layer-head { margin-bottom: 10px; }
.work-prose .layer-head h2 { font-family: var(--f-mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-helix-cyan); }
.work-prose .layer-origin { font-family: var(--f-mono); font-size: 10px; letter-spacing: .06em; color: var(--c-ice-faint); margin-top: 3px; }
.work-prose p { font-size: 15px; line-height: 1.95; color: var(--c-ice-dim); margin-bottom: 12px; }
.work-prose em { color: var(--c-helix-cyan); font-style: normal; }

.field-note { margin-top: 26px; padding: 20px 22px; border-left: 2px solid var(--c-helix-blue); background: rgba(58,134,255,.05); border-radius: 0 8px 8px 0; }
.field-note-label { font-family: var(--f-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--c-helix-cyan); margin-bottom: 8px; }
.field-note span { font-size: 14px; line-height: 1.8; color: var(--c-ice-dim); }

.work-nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--c-line); }
.work-nav a { font-family: var(--f-mono); }
.work-nav .prev, .work-nav .next { display: flex; flex-direction: column; gap: 4px; }
.work-nav .next { text-align: right; }
.work-nav .label { font-size: 11px; letter-spacing: .1em; color: var(--c-ice-faint); text-transform: uppercase; }
.work-nav .ttl { font-family: var(--f-ko); font-size: 15px; color: var(--c-ice); }
.work-nav .center a { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-helix-cyan); }
.work-nav a:hover .ttl, .work-nav .center a:hover { color: var(--c-helix-cyan); }

@media (max-width: 760px) {
  .info-grid { grid-template-columns: 92px 1fr; }
  .access-block { grid-template-columns: 1fr; }
  .series-grid { grid-template-columns: 1fr; }
  .artist-grid { grid-template-columns: 1fr; }
  .work-body { grid-template-columns: 1fr; }
  .data-sheet { position: static; }
  .credits { grid-template-columns: 1fr; gap: 4px; }
}