/* ============================================================
   signal.css — NIGHT SIGNAL 서브페이지 공통 레이어
   로드 순서: css/style.css → css/signal.css → (페이지별 <style>)
   ============================================================ */
:root{
  --pf-tx:#EAF4FF;
  --pf-tx2:rgba(226,240,255,.68);
  --pf-tx3:rgba(255,255,255,.44);
  --pf-glass:rgba(5,14,29,.58);
  --pf-glass2:rgba(9,20,40,.55);
  --pf-line:rgba(201,227,255,.22);
  --pf-acc:#8fc7ff;
  --pf-ice:#d4e9ff;
  --pf-glow:#85c8ff;
  --pf-stroke:rgba(221,239,255,.9);
  --pf-ghost:rgba(179,218,255,.13);
}
body.day{
  --pf-tx:#132741;
  --pf-tx2:rgba(19,39,65,.74);
  --pf-tx3:rgba(19,39,65,.5);
  --pf-glass:rgba(255,255,255,.62);
  --pf-glass2:rgba(255,255,255,.5);
  --pf-line:rgba(30,70,120,.26);
  --pf-acc:#2f6fb4;
  --pf-ice:#2f6fb4;
  --pf-glow:#7db6ee;
  --pf-stroke:rgba(24,52,88,.85);
  --pf-ghost:rgba(24,60,110,.14);
}

/* ---------- 페이지 배경 ---------- */
body.sg{
  min-height:100svh;
  color:var(--pf-tx);
  background-color:var(--navy-deep);
  background-image:
    linear-gradient(90deg, rgba(2,7,18,.93) 0%, rgba(3,10,25,.7) 52%, rgba(2,7,18,.9) 100%),
    url("../assets/optimized/usisi-night.webp");
  background-repeat:no-repeat,no-repeat;
  background-position:center,center;
  background-size:cover,cover;
  background-attachment:fixed,fixed;
  transition:color .3s;
}
body.sg.day{
  background-color:#eaf3fd;
  background-image:
    linear-gradient(90deg, rgba(240,248,255,.92) 0%, rgba(242,249,255,.7) 52%, rgba(238,247,255,.9) 100%),
    url("../assets/optimized/usisi-day.webp");
}
.pf-gridbg{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.14;
  background-image:
    linear-gradient(rgba(190,224,255,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(190,224,255,.16) 1px, transparent 1px);
  background-size:110px 110px;
  mask-image:linear-gradient(90deg, transparent 30%, black);
  -webkit-mask-image:linear-gradient(90deg, transparent 30%, black);
}
body.day .pf-gridbg{opacity:.1;background-image:
    linear-gradient(rgba(40,90,150,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40,90,150,.18) 1px, transparent 1px)}

/* ---------- 헤더 (메인 c3-header 동일 골격) ---------- */
.pf-header{
  position:fixed;z-index:40;top:0;right:0;left:0;
  display:grid;grid-template-columns:.75fr .7fr 2fr .9fr;align-items:center;
  height:104px;padding:0 4.3vw;
  border-bottom:1px solid var(--pf-line);
  background:rgba(3,8,18,.62);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
body.day .pf-header{background:rgba(240,248,255,.66)}
body.day .wordmark{color:#132741}
body.day .c3-frequency{color:rgba(19,39,65,.5)}
body.day .c3-frequency b{color:#1f4a7d}
body.day .main-nav a{color:rgba(19,39,65,.55)}
body.day .main-nav a:hover,body.day .main-nav a.active{color:#132741}
body.day .main-nav a.active::after{background:#2f6fb4}
.pf-hright{justify-self:end;display:flex;align-items:center;gap:18px}
.pf-mode{
  display:flex;align-items:center;gap:8px;
  padding:9px 13px;border:1px solid var(--pf-line);
  color:var(--pf-tx2);background:rgba(169,213,255,.06);
  font-size:11px;font-weight:900;letter-spacing:.14em;cursor:pointer;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:.2s;
}
.pf-mode:hover{color:var(--pf-tx);border-color:var(--pf-acc)}
.pf-enter{
  padding:14px 0;border-bottom:1px solid #afd6ff;color:#dceeff;
  font-size:13px;font-weight:900;letter-spacing:.09em;white-space:nowrap;
}
body.day .pf-enter{color:#1f4a7d;border-bottom-color:#2f6fb4}
.pf-subnav{display:none}

/* ---------- 본문 ---------- */
.sg-main{position:relative;z-index:1;width:min(1180px,88vw);margin:0 auto;padding:168px 0 90px}

/* 서브 히어로 (컴팩트) */
.sg-hero{margin-bottom:46px;position:relative}
.pf-signal{display:flex;align-items:center;gap:12px;margin:0 0 20px;color:#b9dcff;font-size:12px;font-weight:900;letter-spacing:.17em}
body.day .pf-signal{color:#2f6fb4}
.pf-signal i{display:block;width:9px;height:9px;border-radius:50%;background:#a4d4ff;box-shadow:0 0 18px var(--pf-glow)}
body.day .pf-signal i{background:#2f6fb4}
.sg-hero h1{
  margin:0;font-family:"Arial Black",Impact,sans-serif;
  font-size:clamp(56px,7.4vw,124px);font-weight:900;
  letter-spacing:-.08em;line-height:.84;color:var(--pf-tx);
}
.sg-hero h1 span{color:transparent;-webkit-text-stroke:2px var(--pf-stroke)}
.sg-ghost{
  position:absolute;z-index:-1;top:-72px;right:-8px;
  color:transparent;font-family:"Arial Black",sans-serif;
  font-size:clamp(160px,17vw,320px);font-weight:900;line-height:1;
  -webkit-text-stroke:1px var(--pf-ghost);pointer-events:none;user-select:none;
}
.sg-sub{margin:20px 0 0;color:var(--pf-tx2);font-size:16.5px;font-weight:500;line-height:1.75;max-width:680px}
.sg-sub b{color:var(--pf-ice)}

/* ---------- 카드 ---------- */
.pf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.pf-card{
  position:relative;min-width:0;padding:34px 36px 36px;
  border:1px solid var(--pf-line);
  background:var(--pf-glass);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.pf-card.w2{grid-column:span 2}
.pf-kick{
  display:flex;align-items:baseline;gap:12px;margin:0 0 22px;
  color:#9dccfb;font-size:11px;font-weight:900;letter-spacing:.18em;
}
body.day .pf-kick{color:#2f6fb4}
.pf-kick em{font-style:normal;color:var(--pf-tx3);letter-spacing:.14em}
.pf-kick::after{content:'';flex:1;height:1px;background:var(--pf-line);align-self:center}

/* 칩 / 태그 / 버튼 */
.pf-chip{
  display:inline-block;padding:10px 15px;border:1px solid var(--pf-line);
  background:rgba(169,213,255,.06);color:var(--pf-tx2);
  font-size:12px;font-weight:900;letter-spacing:.13em;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.pf-chip b{color:var(--pf-ice);margin-left:6px}
.pf-tag{
  display:inline-block;padding:11px 15px;border:1px solid var(--pf-line);
  color:var(--pf-tx);background:rgba(169,213,255,.05);
  font-size:14px;font-weight:800;letter-spacing:.02em;
}
.sg-btn{
  display:inline-flex;align-items:center;gap:8px;padding:12px 20px;
  border:1px solid var(--pf-line);background:rgba(169,213,255,.06);
  color:var(--pf-tx2);font-size:12px;font-weight:900;letter-spacing:.12em;
  cursor:pointer;transition:.2s;
}
.sg-btn:hover{color:var(--pf-tx);background:rgba(169,213,255,.14)}
.sg-btn.hi{border-color:rgba(175,214,255,.6);background:rgba(143,199,255,.16);color:var(--pf-tx)}
.sg-btn.hi:hover{background:rgba(143,199,255,.28)}
body.day .sg-btn.hi{border-color:#2f6fb4;background:rgba(47,111,180,.12)}

/* 빈 상태 / 스피너 */
.sg-empty{padding:44px 0;text-align:center;color:var(--pf-tx3);font-size:13px;font-weight:800;letter-spacing:.12em}
.sg-empty .ic{display:block;font-size:26px;margin-bottom:12px;color:var(--pf-acc)}
.sg-spin{width:26px;height:26px;margin:34px auto;border:2px solid var(--pf-line);border-top-color:var(--pf-acc);border-radius:50%;animation:sg-spin 1s linear infinite}
@keyframes sg-spin{to{transform:rotate(360deg)}}

/* ---------- 푸터 ---------- */
.pf-footer{
  position:relative;z-index:1;
  display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:4vw;
  height:96px;padding:0 4.5vw;margin-top:20px;
  border-top:1px solid var(--pf-line);
  background:var(--navy-glass);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
body.day .pf-footer{background:rgba(240,248,255,.7)}
.pf-footer p{margin:0;color:var(--pf-tx3);font-size:11px;font-weight:800;letter-spacing:.12em}
.pf-footer b{color:var(--pf-tx)}
.pf-moo{justify-self:end;overflow:hidden;max-width:340px}
.pf-moo span{display:inline-block;white-space:nowrap;color:rgba(155,205,252,.56);font-family:Georgia,serif;font-size:15px;font-style:italic;letter-spacing:.06em;animation:pf-moo 16s linear infinite}
body.day .pf-moo span{color:rgba(47,111,180,.6)}
@keyframes pf-moo{to{transform:translateX(-50%)}}

/* ---------- SEND SIGNAL 모달 ---------- */
#pfMask{position:fixed;inset:0;z-index:80;background:rgba(2,6,14,.66);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:none}
#pfMask.on{display:block}
#pfSig{
  position:fixed;z-index:90;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(440px,calc(100vw - 40px));padding:30px 30px 26px;display:none;
  border:1px solid rgba(175,214,255,.45);background:rgba(4,11,24,.94);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 30px 90px rgba(0,0,0,.55);
}
#pfSig.on{display:block}
body.day #pfSig{background:rgba(248,252,255,.97);border-color:#2f6fb4}
#pfSig .sk{display:flex;align-items:center;gap:11px;color:#9dccfb;font-size:11px;font-weight:900;letter-spacing:.2em;margin-bottom:10px}
body.day #pfSig .sk{color:#2f6fb4}
#pfSig .sk i{display:block;width:8px;height:8px;border-radius:50%;background:#a4d4ff;box-shadow:0 0 14px var(--pf-glow)}
#pfSig h3{margin:0;color:var(--pf-tx);font-size:21px;font-weight:900;letter-spacing:-.01em}
#pfSig .sub{margin:7px 0 0;color:var(--pf-tx3);font-size:12.5px;font-weight:700}
#pfSig textarea{
  width:100%;min-height:120px;margin-top:18px;padding:13px 15px;resize:vertical;
  border:1px solid var(--pf-line);background:rgba(169,213,255,.06);
  color:var(--pf-tx);font-family:inherit;font-size:14.5px;line-height:1.6;
}
body.day #pfSig textarea{background:rgba(47,111,180,.06)}
#pfSig textarea:focus{outline:1px solid var(--pf-acc)}
#pfSig .row{display:flex;justify-content:flex-end;gap:9px;margin-top:16px}
#pfSig .row button{padding:12px 20px;font-size:12px;font-weight:900;letter-spacing:.12em;border:1px solid var(--pf-line);color:var(--pf-tx2);background:transparent;cursor:pointer;transition:.2s}
#pfSig .row .tx{border-color:#afd6ff;background:rgba(143,199,255,.16);color:var(--pf-tx)}
#pfSig .row .tx:hover{background:rgba(143,199,255,.3)}
body.day #pfSig .row .tx{border-color:#2f6fb4;background:rgba(47,111,180,.12)}
#pfSig .done{display:none;text-align:center;padding:26px 0 12px}
#pfSig .done .st{color:var(--pf-ice);font-size:26px}
#pfSig .done b{display:block;margin-top:10px;color:var(--pf-tx);font-size:17px;font-weight:900;letter-spacing:.06em}
#pfSig .done span{display:block;margin-top:6px;color:var(--pf-tx3);font-size:12px;font-weight:700}
#pfSig.ok .frm{display:none}
#pfSig.ok .done{display:block}

/* ---------- FX ---------- */
#pfStars{position:fixed;inset:0;z-index:0;pointer-events:none}
#pfStars i{position:absolute;background:#d4e9ff;border-radius:50%;animation:pf-tw ease-in-out infinite}
body.day #pfStars{opacity:.25}
@keyframes pf-tw{0%,100%{opacity:.25}50%{opacity:.95}}
#pfFx{position:fixed;inset:0;z-index:120;pointer-events:none}
.pf-pop{position:absolute;color:var(--pf-ice);font-size:15px;text-shadow:0 0 12px rgba(133,200,255,.7);transform:translate(-50%,-50%);animation:pf-pop .85s ease-out forwards}
@keyframes pf-pop{0%{transform:translate(-50%,-50%) scale(.5);opacity:1}100%{transform:translate(-50%,-150%) scale(1.1) rotate(16deg);opacity:0}}
.pf-bump{animation:pf-bump .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes pf-bump{0%{transform:scale(1)}40%{transform:scale(1.06)}70%{transform:scale(.98)}100%{transform:scale(1)}}

/* 페이지 전환 커버 */
#sgCover{position:fixed;inset:0;z-index:300;display:grid;place-items:center;
  background:linear-gradient(120deg,#020712,#06122a);
  opacity:0;pointer-events:none;transition:opacity .22s ease}
#sgCover.on{opacity:1;pointer-events:auto}
body.day #sgCover{background:linear-gradient(120deg,#dce9f8,#eef6ff)}
#sgCover .in{display:flex;align-items:center;gap:14px;color:#b9dcff;font-size:12px;font-weight:900;letter-spacing:.24em}
body.day #sgCover .in{color:#2f6fb4}
#sgCover .in i{display:block;width:9px;height:9px;border-radius:50%;background:#a4d4ff;box-shadow:0 0 18px var(--pf-glow);animation:pf-tw 1.2s ease-in-out infinite}

/* ---------- 등장 ---------- */
.sg-main,.pf-footer{opacity:0;transition:opacity .4s ease}
body.ready .sg-main,body.ready .pf-footer{opacity:1}
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
body.ready .rv.in{opacity:1;transform:none}

/* ---------- 반응형 ---------- */
@media (max-width:1180px){
  .pf-header{grid-template-columns:.7fr .6fr 1.7fr .8fr}
  .pf-mode .mt{display:none}
  .pf-hright{gap:12px}
}
@media (max-width:1040px){
  .pf-mode{position:fixed;right:18px;bottom:18px;z-index:60;padding:13px 15px;background:rgba(6,14,28,.8);box-shadow:0 10px 30px rgba(2,8,20,.55)}
  body.day .pf-mode{background:rgba(245,250,255,.9);box-shadow:0 10px 26px rgba(30,70,120,.25)}
}
@media (max-width:920px){
  .pf-grid{grid-template-columns:1fr}
  .pf-card.w2{grid-column:auto}
}
@media (max-width:820px){
  .pf-header{grid-template-columns:1fr auto;height:76px;padding:0 22px}
  .pf-header .c3-frequency,.pf-header .main-nav{display:none}
  .pf-hright{gap:12px}
  .pf-enter{padding:10px 0;font-size:12px}
  .pf-subnav{
    display:flex;position:fixed;z-index:39;top:76px;left:0;right:0;
    gap:22px;padding:13px 22px;overflow-x:auto;white-space:nowrap;
    border-bottom:1px solid var(--pf-line);
    background:rgba(3,8,18,.6);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .pf-subnav::-webkit-scrollbar{display:none}
  body.day .pf-subnav{background:rgba(240,248,255,.66)}
  .pf-subnav a{flex:0 0 auto;color:var(--pf-tx3);font-size:12px;font-weight:900;letter-spacing:.13em}
  .pf-subnav a.active{color:var(--pf-tx);border-bottom:2px solid var(--pf-acc);padding-bottom:3px}
  .sg-main{padding:150px 0 70px;width:min(90vw,680px)}
  .pf-card{padding:26px 22px 28px}
  .pf-footer{grid-template-columns:1fr;height:auto;padding:18px 22px;gap:8px}
  .pf-moo{justify-self:start;max-width:100%}
}
@media (prefers-reduced-motion:reduce){
  #pfStars i,.pf-moo span,.pf-signal i,#sgCover .in i{animation:none!important}
  .rv{opacity:1!important;transform:none!important;transition:none}
}