/* ═══════════════════════════════════════════════
   클럽 아웃풋 — "SIGNAL FLOW" THEME
   Sunset Coral #ff6b6b + Deep Purple #2d1b4e
   Class prefix: op-
   ═══════════════════════════════════════════════ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}
.op-canvas{
  font-family:'Pretendard','Noto Sans KR',sans-serif;
  background:#0e0a18;
  color:#d8c8e8;
  line-height:1.75;
  overflow-x:hidden;
}

/* ── INPUT HEADER ── */
.op-input-header{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:linear-gradient(160deg,#2d1b4e 0%,#1a0e30 40%,#0e0a18 100%);
  overflow:hidden;
}
.op-waveform-bg{
  position:absolute;
  inset:0;
  opacity:.4;
}
.op-wave-svg{width:100%;height:100%;position:absolute;bottom:0}
.op-wave-path{animation:op-wave 6s ease-in-out infinite alternate}
.op-wave-delay{animation-delay:3s}
@keyframes op-wave{
  0%{d:path("M0,100 Q150,20 300,100 T600,100 T900,100 T1200,100")}
  100%{d:path("M0,100 Q150,180 300,100 T600,80 T900,120 T1200,100")}
}
.op-input-content{position:relative;z-index:2;padding:2rem}
.op-signal-badge{
  display:inline-block;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.3em;
  color:#ff6b6b;
  border:1px solid #ff6b6b;
  padding:.3rem 1.5rem;
  margin-bottom:2rem;
}
.op-venue-name{
  font-size:clamp(2.5rem,8vw,5.5rem);
  font-weight:900;
  color:#fff;
  text-shadow:0 0 80px rgba(255,107,107,.25);
  margin-bottom:.2rem;
}
.op-venue-eng{
  font-size:clamp(.85rem,1.8vw,1.1rem);
  color:#7a5fa0;
  letter-spacing:.2em;
  margin-bottom:2rem;
}
.op-tagline{
  font-size:clamp(1.05rem,2.5vw,1.5rem);
  color:#ff6b6b;
  font-weight:700;
  line-height:1.7;
  margin-bottom:2rem;
}
.op-backed-by{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
}
.op-investor{
  font-size:.9rem;
  font-weight:800;
  color:#fff;
  letter-spacing:.1em;
  padding:.5rem 1.5rem;
  border:2px solid rgba(255,107,107,.4);
  background:rgba(255,107,107,.08);
}
.op-x-mark{font-size:1.2rem;color:#ff6b6b}

/* ── CHANNEL LABELS (section headings) ── */
.op-channel-label{
  font-size:clamp(1.1rem,2.8vw,1.5rem);
  font-weight:800;
  color:#ff6b6b;
  letter-spacing:.2em;
  text-align:center;
  margin-bottom:.4rem;
}
.op-channel-desc{
  text-align:center;
  font-size:.95rem;
  color:#8a70a8;
  margin-bottom:2.5rem;
}

/* ── FLOW CONNECTORS ── */
.op-flow-connector{
  width:3px;
  height:60px;
  background:linear-gradient(to bottom,transparent,#ff6b6b,transparent);
  margin:0 auto;
}

/* ── MIXER SECTION ── */
.op-mixer-section{
  padding:2rem 1.5rem 3rem;
  max-width:1000px;
  margin:0 auto;
}
.op-mixer-channels{
  display:flex;
  flex-direction:column;
  gap:2rem;
}
.op-channel-strip{
  display:flex;
  gap:1.5rem;
  align-items:flex-start;
  background:linear-gradient(135deg,rgba(45,27,78,.4),rgba(14,10,24,.8));
  border:1px solid rgba(255,107,107,.15);
  border-radius:8px;
  padding:2rem;
  transition:border-color .3s;
}
.op-channel-strip:hover{border-color:rgba(255,107,107,.5)}
.op-fader-track{
  flex-shrink:0;
  width:8px;
  height:100px;
  background:#1a1030;
  border-radius:4px;
  position:relative;
}
.op-fader-knob{
  position:absolute;
  left:-4px;
  width:16px;height:6px;
  background:#ff6b6b;
  border-radius:3px;
}
.op-strip-name{
  font-size:1.05rem;
  font-weight:800;
  color:#fff;
  margin-bottom:.6rem;
  letter-spacing:.05em;
}
.op-strip-info{font-size:.9rem;color:#b8a0d0;line-height:1.85}

/* ── OUTPUT CHANNEL ── */
.op-output-section{
  padding:4rem 1.5rem;
  max-width:1000px;
  margin:0 auto;
}
.op-program-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.5rem;
}
.op-program-card{
  padding:2rem;
  border-radius:12px;
  border-top:4px solid;
}
.op-card-hiphop{
  border-top-color:#ff6b6b;
  background:rgba(255,107,107,.05);
}
.op-card-edm{
  border-top-color:#a855f7;
  background:rgba(168,85,247,.05);
}
.op-card-rnb{
  border-top-color:#f97316;
  background:rgba(249,115,22,.05);
}
.op-genre-tag{
  display:inline-block;
  font-size:.65rem;
  font-weight:800;
  letter-spacing:.2em;
  padding:.25rem .8rem;
  border-radius:1rem;
  background:#ff6b6b;
  color:#0e0a18;
  margin-bottom:.75rem;
}
.op-program-card h3{font-size:1.1rem;font-weight:800;color:#fff;margin-bottom:.6rem}
.op-program-card p{font-size:.88rem;color:#b8a0d0;line-height:1.85}

/* ── SIGNAL STRENGTH ── */
.op-signal-section{
  padding:4rem 1.5rem;
  max-width:700px;
  margin:0 auto;
}
.op-meter-stack{display:flex;flex-direction:column;gap:1.2rem;margin-bottom:1.5rem}
.op-meter-row{display:flex;align-items:center;gap:1rem}
.op-meter-label{width:110px;font-size:.85rem;font-weight:600;color:#d8c8e8;flex-shrink:0}
.op-meter-bar{
  flex:1;
  height:18px;
  background:#1a1030;
  border-radius:9px;
  overflow:hidden;
}
.op-meter-fill{
  height:100%;
  background:linear-gradient(90deg,#ff6b6b,#a855f7);
  border-radius:9px;
  transition:width 1s ease;
}
.op-fill-special{
  background:linear-gradient(90deg,#ff6b6b,#f97316,#ffcc00);
  animation:op-overload 1.5s ease-in-out infinite alternate;
}
@keyframes op-overload{0%{opacity:.8}100%{opacity:1}}
.op-meter-val{
  width:70px;
  font-size:.75rem;
  font-weight:800;
  color:#ff6b6b;
  text-align:right;
}
.op-signal-note{font-size:.85rem;color:#7a5fa0;text-align:center;line-height:1.7}

/* ── FREQUENCY RESPONSE ── */
.op-frequency-section{
  padding:4rem 1.5rem;
  max-width:900px;
  margin:0 auto;
}
.op-freq-bands{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.5rem;
}
.op-freq-band{
  text-align:center;
  padding:2rem 1.5rem;
  background:rgba(45,27,78,.25);
  border-radius:12px;
}
.op-freq-bar{
  width:40px;
  margin:0 auto 1rem;
  background:linear-gradient(to top,#ff6b6b,#2d1b4e);
  border-radius:4px;
  min-height:40px;
}
.op-freq-label{
  display:block;
  font-size:.95rem;
  font-weight:800;
  color:#fff;
  margin-bottom:.5rem;
}
.op-freq-detail{font-size:.85rem;color:#b8a0d0;line-height:1.8}

/* ── FEEDBACK LOOP FAQ ── */
.op-feedback-section{
  padding:4rem 1.5rem;
  max-width:800px;
  margin:0 auto;
}
.op-feedback-stack{display:flex;flex-direction:column;gap:.8rem}
.op-feedback-unit{
  border-radius:8px;
  overflow:hidden;
  border:1px solid rgba(255,107,107,.15);
  transition:border-color .3s;
}
.op-feedback-unit:hover{border-color:rgba(255,107,107,.4)}
.op-feedback-head{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1.1rem 1.4rem;
  background:rgba(45,27,78,.2);
  border:none;
  color:#e8d8f8;
  font-size:.95rem;
  font-weight:700;
  cursor:pointer;
  text-align:left;
}
.op-fb-arrow{
  color:#ff6b6b;
  font-size:.75rem;
  transition:transform .3s;
}
.op-feedback-unit.expanded .op-fb-arrow{transform:rotate(90deg)}
.op-feedback-body{
  max-height:0;
  overflow:hidden;
  transition:max-height .4s ease;
}
.op-feedback-unit.expanded .op-feedback-body{max-height:500px}
.op-feedback-body p{
  padding:.5rem 1.4rem 1.4rem;
  font-size:.88rem;
  color:#b8a0d0;
  line-height:1.9;
}

/* ── MASTER FOOTER ── */
.op-master-footer{
  background:linear-gradient(180deg,#0e0a18,#1a0e30);
  padding:3rem 1.5rem;
  text-align:center;
  border-top:1px solid rgba(255,107,107,.15);
}
.op-master-inner{max-width:500px;margin:0 auto}
.op-master-label{
  font-size:.65rem;
  letter-spacing:.3em;
  color:#ff6b6b;
  margin-bottom:.8rem;
}
.op-master-text{
  font-size:1rem;
  color:#8a70a8;
  margin-bottom:1.5rem;
}
.op-master-cta{
  display:inline-block;
  background:linear-gradient(135deg,#ff6b6b,#a855f7);
  color:#fff;
  font-size:1rem;
  font-weight:800;
  padding:.85rem 2.5rem;
  border-radius:50px;
  text-decoration:none;
  transition:transform .2s,box-shadow .2s;
}
.op-master-cta:hover{
  transform:scale(1.05);
  box-shadow:0 6px 30px rgba(255,107,107,.35);
}

@media(max-width:600px){
  .op-input-header{min-height:85vh}
  .op-channel-strip{flex-direction:column}
  .op-fader-track{width:100%;height:8px}
  .op-fader-knob{top:-4px;left:auto;width:6px;height:16px;bottom:auto!important}
  .op-program-grid{grid-template-columns:1fr}
  .op-meter-label{width:80px;font-size:.78rem}
  .op-backed-by{flex-direction:column;gap:.5rem}
}