/* ===== 장비·시스템 상세 페이지 공통 (detail) ===== */

.pd-top{padding:clamp(120px,16vw,180px) 0 clamp(28px,5vw,48px)}
.pd-top .sec-title{max-width:16ch}
.pd-back{display:inline-flex;align-items:center;gap:.5em;font-family:var(--mono);font-size:.76rem;letter-spacing:.1em;color:var(--muted);margin-bottom:1.6rem;transition:color .2s}
.pd-back:hover{color:var(--accent-deep)}

/* ---- 카드 그리드 (장비) ---- */
.dev-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.dev-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;
  text-align:left;background:#fff;border:1px solid var(--line);border-radius:8px;
  padding:20px 20px 18px;cursor:pointer;font:inherit;color:inherit;
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;position:relative;
}
.dev-card:hover{transform:translateY(-5px);box-shadow:0 18px 44px rgba(20,17,13,.10);border-color:var(--line-strong)}
.dev-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.dev-card__img{width:100%;aspect-ratio:16/6;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#fcfbf9,#f1ede7);border-radius:5px;overflow:hidden;margin-bottom:.7rem}
.dev-card__img img{width:92%;height:92%;object-fit:contain}
.dev-card__en{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-deep)}
.dev-card__model{font-size:1.18rem;font-weight:800;letter-spacing:-.02em}
.dev-card__role{font-size:.86rem;color:var(--muted)}
.dev-card__more{margin-top:.55rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--ink);transition:color .2s,gap .2s}
.dev-card:hover .dev-card__more{color:var(--accent)}
.dev-note{margin-top:clamp(26px,4vw,40px);font-size:.92rem;color:var(--muted)}
.dev-note strong{color:var(--accent-deep);font-weight:600}

/* ---- 상세(모달 안) ---- */
.dt{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(22px,3vw,48px);align-items:start}
.dt__visual{border:1px solid var(--line);border-radius:8px;background:linear-gradient(180deg,#fdfdfc,#f3efea);overflow:hidden;position:sticky;top:0}
.dt__visual img{width:100%;aspect-ratio:16/7;object-fit:contain;padding:clamp(16px,3vw,34px)}
.dt__en{font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;color:var(--accent-deep);text-transform:uppercase}
.dt__model{font-size:clamp(1.7rem,3.6vw,2.5rem);font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:.35rem 0 .1rem}
.dt__desc{color:var(--ink-soft);font-size:1rem;margin:.9rem 0 1.5rem}

.spec{width:100%;border-collapse:collapse;border-top:1px solid var(--line)}
.spec th,.spec td{text-align:left;padding:.72em 0;border-bottom:1px solid var(--line);vertical-align:top;font-size:.9rem}
.spec th{width:34%;font-weight:500;color:var(--muted);font-family:var(--mono);font-size:.72rem;letter-spacing:.03em;text-transform:uppercase;padding-right:1.1em;line-height:1.5}
.spec td{color:var(--ink);font-weight:500;line-height:1.5}

.pd-badge{display:inline-flex;align-items:center;gap:.5em;margin-top:1.5rem;font-size:.82rem;font-weight:600;color:var(--accent-deep);background:rgba(240,125,0,.08);border:1px solid rgba(240,125,0,.25);border-radius:999px;padding:.5em 1.05em}
.pd-badge::before{content:"✓";font-weight:800}

/* ===== 시스템 그리드 ===== */
.sys-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sys-card{
  display:block;text-align:left;cursor:pointer;font:inherit;color:inherit;padding:0;
  background:var(--ink);border:0;border-radius:10px;overflow:hidden;position:relative;aspect-ratio:4/3;
  transition:transform .3s ease,box-shadow .3s ease;
}
.sys-card:hover{transform:translateY(-5px);box-shadow:0 22px 50px rgba(20,17,13,.16)}
.sys-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sys-card img{width:100%;height:100%;object-fit:cover;opacity:.82;transition:transform .7s ease,opacity .4s}
.sys-card:hover img{transform:scale(1.07);opacity:.62}
.sys-card__meta{position:absolute;inset:auto 0 0 0;padding:22px;color:#fff;background:linear-gradient(to top,rgba(12,10,7,.9),rgba(12,10,7,.18) 72%,transparent);display:flex;flex-direction:column;gap:.3rem}
.sys-card__en{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.sys-card__name{font-size:1.22rem;font-weight:700;letter-spacing:-.02em}
.sys-card__more{font-family:var(--mono);font-size:.72rem;color:rgba(255,255,255,.78);margin-top:.3rem}
.sys-card:hover .sys-card__more{color:#fff}

/* 시스템 상세(모달 안) */
.st__en{font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;color:var(--accent-deep);text-transform:uppercase}
.st__name{font-size:clamp(1.7rem,3.6vw,2.5rem);font-weight:800;letter-spacing:-.03em;margin:.35rem 0 .2rem}
.st__desc{color:var(--ink-soft);font-size:1.02rem;line-height:1.75;margin:.9rem 0 1.6rem;max-width:64ch}
.st__sub{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-deep);margin:1.8rem 0 1rem}
.st__feat{list-style:none;border-top:1px solid var(--line);margin-bottom:.4rem}
.st__feat li{position:relative;padding:.7em 0 .7em 1.5em;border-bottom:1px solid var(--line);font-size:.96rem;color:var(--ink-soft)}
.st__feat li::before{content:"—";position:absolute;left:0;color:var(--accent)}
.st__gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:1.4rem}
.st__gallery img{width:100%;border:1px solid var(--line);border-radius:6px;background:#fff}
.st__gallery img.full{grid-column:1 / -1}

/* ===== 모달 ===== */
.modal{position:fixed;inset:0;z-index:120;display:none}
.modal.open{display:block}
.modal__backdrop{position:absolute;inset:0;background:rgba(12,10,8,.62);backdrop-filter:blur(4px);animation:mfade .3s ease}
.modal__panel{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(1040px,94vw);max-height:90vh;overflow:auto;
  background:var(--bg);border-radius:14px;box-shadow:0 40px 120px rgba(0,0,0,.4);
  padding:clamp(26px,4vw,52px);animation:mrise .35s cubic-bezier(.2,.7,.2,1)
}
.modal__close{
  position:sticky;top:0;float:right;margin:-8px -8px 0 0;
  width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
  background:#fff;font-size:1.5rem;line-height:1;color:var(--ink);cursor:pointer;z-index:2;
  transition:background .2s,transform .2s
}
.modal__close:hover{background:var(--ink);color:#fff;transform:rotate(90deg)}
@keyframes mfade{from{opacity:0}to{opacity:1}}
@keyframes mrise{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}
body.modal-open{overflow:hidden}

@media (max-width:980px){
  .dev-grid{grid-template-columns:repeat(2,1fr)}
  .sys-grid{grid-template-columns:repeat(2,1fr)}
  .dt{grid-template-columns:1fr;gap:20px}
  .dt__visual{position:static}
}
@media (max-width:560px){
  .dev-grid{grid-template-columns:1fr}
  .sys-grid{grid-template-columns:1fr}
  .st__gallery{grid-template-columns:1fr}
  .modal__panel{width:96vw;padding:22px 18px}
}

/* ===== 전시관 구성 아이템 그리드 (4열) ===== */
.sys-grid--items{grid-template-columns:repeat(4,1fr)}
.sys-grid--items .sys-card{aspect-ratio:1/1}
.sys-grid--items .sys-card__name{font-size:1.05rem}
@media (max-width:980px){ .sys-grid--items{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .sys-grid--items{grid-template-columns:1fr} }

/* ===== 시스템 구성도 (SVG) ===== */
.st__diagram{border:1px solid var(--line);border-radius:10px;background:#fff;padding:clamp(14px,2.5vw,26px);margin-top:1rem}
.st__diagram svg{width:100%;height:auto;display:block}