/* 배너 · 메뉴 · 2단 레이아웃 · 창(window) 패널 · 푸터 */

/* ══════════ 2. 사이트 본체 ══════════ */
.shell{ position:relative; z-index:1; max-width: 1120px; margin:0 auto; padding: 0 var(--gut) 0; }

.banner{
  position:relative; margin-top:18px; width:100%;
  border:1px solid var(--line);
  height: clamp(190px, 28.7vw, 330px);
  display:grid; place-items:center; overflow:hidden;
  background: linear-gradient(160deg, var(--banner-a), var(--banner-b) 60%, var(--banner-a));
}
/* ▼▼ 배너 그림 자리: 아래 div 안에 <img src="banner.jpg" alt=""> 넣으세요 ▼▼ */
#banner-img{ position:absolute; inset:0; }
#banner-img img{ width:100%; height:100%; object-fit:cover; opacity:.6; }
.banner::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(620px 300px at 50% 118%, var(--glow-a), transparent 66%),
    linear-gradient(180deg, rgba(var(--bg-rgb),.15), rgba(var(--bg-rgb),.55));
}
.banner-text{ position:relative; z-index:2; text-align:center; padding: 0 16px; }
.banner-logo{
  font-family: var(--f-brush); font-size: clamp(46px, 9.5vw, 96px);
  line-height:1; margin:0; color: var(--logo);
  text-shadow: 0 0 1px var(--logo-edge), 0 3px 22px rgba(var(--bg-rgb),.7);
}
:root[data-mode="light"] .banner-logo{ text-shadow: 0 2px 14px rgba(69,109,113,.18); }
.banner-tag{ font-family: var(--f-head); font-size: clamp(10px,2.4vw,12px); letter-spacing:.44em; color: var(--gold); margin:10px 0 0; text-transform: uppercase; }
.banner-slot-note{
  position:absolute; left:10px; bottom:10px; z-index:3;
  font-family: var(--f-head); font-size:9.5px; letter-spacing:.14em;
  color: rgba(var(--gold-rgb),.75); border:1px dashed rgba(var(--gold-rgb),.4);
  padding:3px 8px; border-radius:2px; background: rgba(var(--bg-rgb),.55);
}

.nav{ display:flex; flex-wrap:wrap; border:1px solid var(--line); border-top:0; background: rgba(var(--bg-rgb),.28); }
.nav button{
  flex:1 1 auto; min-width: 94px; background:none; border:0; border-right:1px solid var(--line-2);
  color: var(--text-2); font-family: var(--f-head); font-size:14px; letter-spacing:.14em;
  padding: 13px 10px; transition: color .16s, background .16s;
}
.nav button:hover{ color: var(--text); background: rgba(var(--text-rgb),.04); }
.nav button[aria-current="true"]{ color: var(--text); background: rgba(var(--accent-rgb),.14); box-shadow: inset 0 -2px 0 var(--accent); }
.nav .is-admin{ color: var(--accent); }
.nav .mode{ flex:0 0 auto; min-width:0; color: var(--gold); border-right:0; border-left:1px solid var(--line-2); font-family: var(--f-brush); font-size:20px; letter-spacing:.05em; padding: 8px 18px; }

.demo-ribbon{
  margin-top:14px; border:1px dashed rgba(var(--gold-rgb),.4); background: rgba(var(--gold-rgb),.07);
  padding: 9px 14px; font-size:12.5px; color: var(--text-2); display:flex; gap:10px; align-items:baseline; flex-wrap:wrap;
}
.demo-ribbon b{ color: var(--gold); font-weight:400; font-family: var(--f-head); letter-spacing:.1em; }

.cols{ display:grid; grid-template-columns: minmax(0,1fr) 302px; gap: 18px; margin-top:18px; align-items:start; }
@media (max-width: 900px){ .cols{ grid-template-columns: minmax(0,1fr); } }

/* 창 패널 */
.win{ border:1px solid var(--line); background: var(--panel); margin-bottom:18px; }
.win__bar{ display:flex; align-items:center; gap:10px; padding: 9px 12px; background: var(--panel-2); border-bottom:1px solid var(--line); }
.win__bar h2, .win__bar h3{ margin:0; font-family: var(--f-head); font-weight:400; font-size:14px; letter-spacing:.2em; color: var(--text); flex:1; min-width:0; }
.win__bar .mark{ color: var(--accent); font-size:11px; }
.win__ctrl{ font-family: var(--f-head); font-size:10px; letter-spacing:.3em; color: rgba(var(--gold-rgb),.7); flex:0 0 auto; user-select:none; }
.win__body{ padding: 18px; }
.win__body.flush{ padding:0; }
.bar-actions{ display:flex; gap:8px; align-items:center; }