*{box-sizing:border-box}
:root{--black:#000;--charcoal:#0b0b0d;--panel:#8e8e8e;--silver:#a8a8a8;--shadow:#3b3b3b;--navy:#000060;--blue:#0000a8;--red:#b00018;--green:#7cff00;--cyan:#2ee8ff}
html,body{min-height:100%}
body{margin:0;background:#000;color:#111;-webkit-font-smoothing:none;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeSpeed;font-family:Gulim,"굴림",Dotum,"돋움",sans-serif;font-size:11px;line-height:1.45;cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' stroke='%23000' d='M1 1v12l3-3 2 5 2-1-2-5h4z'/%3E%3C/svg%3E") 1 1,default}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 63px,rgba(110,0,16,.08) 64px),radial-gradient(circle at 50% 15%,rgba(120,0,22,.22),transparent 34%);z-index:-1}
button,a,input{font:inherit;cursor:inherit}
a{color:#00006f}
.page{width:min(1180px,calc(100% - 20px));margin:90px auto 28px}


.tiny-label{margin:0;color:#a30018;font:9px "Courier New",monospace;letter-spacing:.12em;display:block;text-align:center}
.portal-grid{display:grid;grid-template-columns:210px minmax(0,1fr) 220px;gap:10px;align-items:start;justify-content:center;margin:0 auto}
.left-column,.center-column,.right-column{display:grid;gap:10px}
.window,.mini-winamp{background:#8e8e8e;border:1px solid;border-top-color:#cfcfcf;border-left-color:#cfcfcf;border-right-color:#333;border-bottom-color:#333;box-shadow:inset 1px 1px 0 #bdbdbd,inset -1px -1px 0 #555}
.titlebar,.amp-title{display:flex;justify-content:space-between;gap:10px;padding:3px 6px;background:linear-gradient(90deg,#050558,var(--blue));color:#fff;font-size:10px;font-weight:700;letter-spacing:.03em}
.window-body{padding:9px}
.profile-image,.camera-box,.main-visual,.amp-cover{display:grid;place-items:center;background:#050505;color:#777;border:1px inset #777}
.profile-image{height:112px;margin-bottom:8px}.profile-box p{margin:3px 0}.profile-box b{display:inline-block;width:48px;color:#555;font-weight:400}
.shortcut-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.shortcut-grid a{display:grid;place-items:center;gap:2px;padding:6px 2px;text-align:center;text-decoration:none;color:#111;background:#a7a7a7;border:1px solid #999}.shortcut-grid a:hover{background:#111;color:#fff}.shortcut-icon{font-size:20px;color:#65000e}.camera-box{height:144px}
.nav-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.nav-btn,.dialog-buttons button,.mini-winamp button{padding:3px 6px;background:#9a9a9a;color:#111;border:1px solid;border-top-color:#cfcfcf;border-left-color:#cfcfcf;border-right-color:#555;border-bottom-color:#555}.nav-btn:hover,.nav-btn.active,.mini-winamp button:hover{background:#050558;color:#fff}
.mini-winamp{width:100%;margin:0;background:#8e8e8e}.amp-body{display:grid;grid-template-columns:50px 1fr auto;gap:5px;align-items:center;padding:5px}.amp-cover{height:50px;font-size:8px}.amp-screen{min-width:0;padding:4px 6px;background:#010301;border:1px inset #666}.amp-time{color:var(--cyan);font:17px/1 "Courier New",monospace;text-shadow:0 0 4px rgba(46,232,255,.5)}.amp-track{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--green);font:9px "Courier New",monospace;margin-top:3px}.amp-meta{color:#6f9254;font:7px "Courier New",monospace}.amp-bars{height:11px;display:flex;gap:2px;align-items:flex-end;margin-top:4px}.amp-bars i{flex:1;height:20%;background:linear-gradient(#ffffff,#bdbdbd);animation:eq .5s steps(3,end) infinite alternate}.amp-bars i:nth-child(2n){animation-duration:.33s}.amp-bars i:nth-child(3n){animation-duration:.66s}@keyframes eq{to{height:100%}}.amp-controls{display:grid;grid-template-columns:repeat(5,24px);gap:3px}.amp-controls button{min-height:21px;padding:0;font-size:8px}.amp-bottom{display:grid;grid-template-columns:1fr auto 72px;gap:5px;align-items:center;padding:3px 5px;background:#747474}.amp-bottom input{width:100%;accent-color:#111}.amp-bottom span{font-size:8px}.amp-bottom .vol{width:72px}
.main-window{min-height:420px;background:#7f7f7f}.content-body{min-height:390px;padding:16px;background:#8a8a8a;color:#111}.panel{display:none}.panel.active{display:block}.panel h2{margin:5px 0 10px;color:#56000c;font:18px Gulim,"굴림",Dotum,"돋움",sans-serif}.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;align-items:center}.main-visual{min-height:280px;background:#111;color:#777}.muted{color:#666}
.update-list p{margin:0 0 9px}.update-list b{color:#4c0009;font-weight:400}.file-list{display:grid;gap:4px}.file-list div{display:flex;justify-content:space-between;gap:8px;padding:3px 5px;background:#c7c7c7;border:1px solid #999;font:9px "Courier New",monospace}.banner-list{display:grid;gap:6px}.mini-banner{height:31px;display:grid;place-items:center;background:#111;border:1px solid #666;color:#c4c4c4;font:9px "Courier New",monospace}.notice-window .window-body{background:#fff8c7}.dialog-buttons{display:flex;justify-content:flex-end;gap:5px}.dialog-buttons button{min-width:58px}

@media(max-width:900px){.portal-grid{grid-template-columns:180px minmax(0,1fr)}.right-column{grid-column:1/-1;grid-template-columns:repeat(4,1fr)}}
@media(max-width:680px){.page{width:min(100% - 10px,1180px);margin:6px auto}.portal-grid{grid-template-columns:1fr}.center-column{grid-row:1}.left-column,.right-column{grid-template-columns:1fr 1fr}.right-column{grid-column:auto}.nav-grid{grid-template-columns:repeat(2,1fr)}.hero-grid{grid-template-columns:1fr}}
@media(max-width:460px){.left-column,.right-column{grid-template-columns:1fr}.amp-body{grid-template-columns:46px 1fr}.amp-controls{grid-column:1/-1;grid-template-columns:repeat(5,1fr)}.amp-bottom{grid-template-columns:1fr}.amp-bottom span,.amp-bottom .vol{display:none}}

html,body,button,input,select,textarea,a,div,span,p,h1,h2,h3,h4,h5,h6{
  font-family:Gulim,"굴림",Dotum,"돋움",sans-serif!important;
  -webkit-font-smoothing:none;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeSpeed;
}

.standalone-nav{
  display:flex;
  justify-content:flex-end;
  gap:5px;
  margin:0 0 10px;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
}
.standalone-nav .nav-btn{
  min-width:88px;
  min-height:24px;
  padding:3px 9px;
  background:#8d8d8d;
  color:#111;
  border:1px solid;
  border-top-color:#d8d8d8;
  border-left-color:#d8d8d8;
  border-right-color:#353535;
  border-bottom-color:#353535;
  box-shadow:inset 1px 1px 0 #b9b9b9,inset -1px -1px 0 #5f5f5f;
}
.standalone-nav .nav-btn:hover,
.standalone-nav .nav-btn.active{
  background:#050558;
  color:#fff;
  border-top-color:#6e6ebd;
  border-left-color:#6e6ebd;
  border-right-color:#00001f;
  border-bottom-color:#00001f;
  box-shadow:inset 1px 1px 0 #33339a,inset -1px -1px 0 #00003d;
}

.titlebar{
  align-items:center;
  min-height:22px;
  padding:2px 3px 2px 6px;
  background:linear-gradient(90deg,#050558 0%,#00007e 65%,#2a2a9e 100%);
  text-shadow:1px 1px 0 #000;
  border-bottom:1px solid #1d1d1d;
}
.window-controls{
  display:flex;
  gap:2px;
}
.window-controls button{
  width:17px;
  height:16px;
  padding:0;
  line-height:13px;
  text-align:center;
  background:#9b9b9b;
  color:#111;
  border:1px solid;
  border-top-color:#dedede;
  border-left-color:#dedede;
  border-right-color:#333;
  border-bottom-color:#333;
  box-shadow:inset 1px 1px 0 #bdbdbd,inset -1px -1px 0 #666;
  font-size:10px;
}
.window-controls button:active{
  border-top-color:#333;
  border-left-color:#333;
  border-right-color:#dedede;
  border-bottom-color:#dedede;
  box-shadow:inset 1px 1px 0 #555;
}
.window{
  box-shadow:
    inset 1px 1px 0 #bcbcbc,
    inset -1px -1px 0 #4f4f4f,
    2px 2px 0 rgba(0,0,0,.55);
}
.window-body{
  border-top:1px solid #585858;
}

.nav-btn,.dialog-buttons button,.mini-winamp button,.shortcut-grid a{
  transition:none!important;
}
.dialog-buttons button,.mini-winamp button{
  background:#929292;
  border-top-color:#d6d6d6;
  border-left-color:#d6d6d6;
  border-right-color:#343434;
  border-bottom-color:#343434;
  box-shadow:inset 1px 1px 0 #bdbdbd,inset -1px -1px 0 #5a5a5a;
}
.dialog-buttons button:active,.mini-winamp button:active{
  border-top-color:#343434;
  border-left-color:#343434;
  border-right-color:#d6d6d6;
  border-bottom-color:#d6d6d6;
  box-shadow:inset 1px 1px 0 #565656;
}

@media(max-width:680px){
  .standalone-nav{display:grid;grid-template-columns:repeat(2,1fr);justify-content:stretch}
  .standalone-nav .nav-btn{min-width:0}
}





@media(max-width:680px){}


/* final alignment + old bitmap-like typography */
html,body,button,input,select,textarea,a,div,span,p,h1,h2,h3,h4,h5,h6{
  font-family:GulimChe,"굴림체",Gulim,"굴림",DotumChe,"돋움체",Dotum,"돋움",sans-serif!important;
  -webkit-font-smoothing:none!important;
  -moz-osx-font-smoothing:grayscale!important;
  text-rendering:optimizeSpeed!important;
}
.titlebar,.amp-title,.window-controls button,.nav-btn{
  font-family:GulimChe,"굴림체",Gulim,"굴림",sans-serif!important;
  font-weight:400!important;
  letter-spacing:-1px!important;
  text-shadow:none!important;
}
.titlebar,.amp-title{font-size:11px!important;line-height:1!important}

/* left/right columns begin at the same height as HOME window */
@media(min-width:901px){
  .left-column,.right-column{margin-top:34px!important;padding-top:0!important}
}
@media(min-width:681px) and (max-width:900px){
  .left-column{margin-top:34px!important;padding-top:0!important}
}

/* player sits directly below HOME and matches its width */
.center-column>.mini-winamp{
  width:100%!important;
  margin:0!important;
}
.center-column{gap:10px!important}

/* wider artwork, shorter black title display */
.mini-winamp .amp-body{
  grid-template-columns:112px minmax(180px,0.72fr) auto!important;
  gap:6px!important;
}
.mini-winamp .amp-cover{
  width:112px!important;
  height:58px!important;
}
.mini-winamp .amp-screen{
  width:auto!important;
  max-width:360px!important;
}
@media(max-width:680px){
  .mini-winamp .amp-body{grid-template-columns:86px minmax(0,1fr)!important}
  .mini-winamp .amp-cover{width:86px!important;height:54px!important}
  .mini-winamp .amp-controls{grid-column:1/-1!important}
}

/* exact desktop row alignment: side columns start on HOME window row */
@media(min-width:901px){
  .portal-grid{
    grid-template-columns:210px minmax(0,1fr) 220px!important;
    grid-template-rows:auto auto auto!important;
    align-items:start!important;
  }
  .center-column{display:contents!important}
  .standalone-nav{
    grid-column:2!important;
    grid-row:1!important;
    margin:0 0 10px!important;
  }
  .main-window{
    grid-column:2!important;
    grid-row:2!important;
  }
  .center-column>.mini-winamp{
    grid-column:2!important;
    grid-row:3!important;
    width:100%!important;
    margin:10px 0 0!important;
  }
  .left-column{
    grid-column:1!important;
    grid-row:2 / span 2!important;
    margin-top:0!important;
    padding-top:0!important;
  }
  .right-column{
    grid-column:3!important;
    grid-row:2 / span 2!important;
    margin-top:0!important;
    padding-top:0!important;
  }
}

.titlebar > span:first-child,
.amp-title > span:first-child{
  letter-spacing:.08em;
}


/* --- more realistic late-90s / early-2000s Winamp-like player --- */
.winamp98{
  background:#8b8b8b;
  border:1px solid;
  border-top-color:#d5d5d5;
  border-left-color:#d5d5d5;
  border-right-color:#2d2d2d;
  border-bottom-color:#2d2d2d;
  box-shadow:inset 1px 1px 0 #bebebe,inset -1px -1px 0 #585858,1px 1px 0 rgba(0,0,0,.55);
  overflow:hidden;
}
.winamp98 .amp-title{
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:22px;
  padding:3px 8px;
  background:linear-gradient(90deg,#010a7a 0%,#041bb6 58%,#132ed1 100%);
  color:#fff;
  border-bottom:1px solid #111;
}
.winamp98 .amp-menubar{
  display:flex;
  gap:12px;
  padding:3px 8px 2px;
  font-size:10px;
  color:#151515;
  background:#bcbcbc;
  border-top:1px solid #d8d8d8;
  border-bottom:1px solid #6f6f6f;
}
.winamp98 .amp-top{
  display:grid;
  grid-template-columns:82px minmax(0,1fr);
  gap:6px;
  padding:7px;
  padding-bottom:5px;
}
.winamp98 .amp-cover-wrap{
  background:#8a8a8a;
  border:1px solid;
  border-top-color:#d6d6d6;
  border-left-color:#d6d6d6;
  border-right-color:#4b4b4b;
  border-bottom-color:#4b4b4b;
  box-shadow:inset 1px 1px 0 #bababa,inset -1px -1px 0 #5d5d5d;
  padding:4px;
}
.winamp98 .amp-cover{
  width:100%;
  height:67px;
  display:grid;
  place-items:center;
  text-align:center;
  background:#060606;
  color:#69706f;
  border:1px inset #5e5e5e;
  font-size:8px;
  line-height:1.2;
}
.winamp98 .amp-lcd{
  min-width:0;
  padding:6px 8px;
  background:linear-gradient(180deg,#020602 0%,#030903 100%);
  border:1px solid;
  border-top-color:#4a4a4a;
  border-left-color:#4a4a4a;
  border-right-color:#b8b8b8;
  border-bottom-color:#b8b8b8;
  box-shadow:inset 1px 1px 0 #000,inset -1px -1px 0 #2e2e2e;
}
.winamp98 .lcd-topline{
  display:flex;
  justify-content:space-between;
  gap:8px;
  font-size:8px;
  color:#6ba963;
  margin-bottom:2px;
}
.winamp98 .lcd-time-row{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:10px;
}
.winamp98 .amp-time{
  color:#3ff6ff;
  font:700 27px/1 "Courier New",monospace!important;
  letter-spacing:1px;
  text-shadow:0 0 6px rgba(63,246,255,.25);
}
.winamp98 .amp-total{
  color:#7b8a7b;
  font:10px/1 "Courier New",monospace!important;
  padding-bottom:4px;
}
.winamp98 .amp-track{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:#7cff00;
  font:700 10px/1.25 "Courier New",monospace!important;
  margin-top:4px;
}
.winamp98 .amp-meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  color:#8fb37f;
  font:8px/1.2 "Courier New",monospace!important;
  margin-top:2px;
}
.winamp98 .amp-mid{
  display:grid;
  grid-template-columns:auto auto 1fr;
  gap:8px;
  align-items:center;
  padding:0 7px 6px;
}
.winamp98 .transport{
  display:grid;
  grid-template-columns:repeat(5,24px);
  gap:3px;
}
.winamp98 .transport button{
  min-height:22px;
  padding:0;
  background:#a0a0a0;
  color:#101010;
  border:1px solid;
  border-top-color:#dedede;
  border-left-color:#dedede;
  border-right-color:#3a3a3a;
  border-bottom-color:#3a3a3a;
  box-shadow:inset 1px 1px 0 #c9c9c9,inset -1px -1px 0 #666;
  font-size:9px;
}
.winamp98 .transport button:active{
  border-top-color:#3a3a3a;
  border-left-color:#3a3a3a;
  border-right-color:#dedede;
  border-bottom-color:#dedede;
  box-shadow:inset 1px 1px 0 #5a5a5a;
}
.winamp98 .amp-switches{
  display:flex;
  gap:4px;
  flex-wrap:wrap;
}
.winamp98 .switch-chip{
  min-width:26px;
  padding:2px 4px 1px;
  text-align:center;
  background:#272727;
  color:#7f847d;
  border:1px solid #4d4d4d;
  font:8px/1 "Courier New",monospace!important;
}
.winamp98 .switch-chip.active{
  color:#7cff00;
  border-color:#657d50;
}
.winamp98 .mini-spectrum{
  height:18px;
  display:flex;
  align-items:flex-end;
  gap:2px;
  padding:2px 4px;
  background:#151515;
  border:1px inset #5e5e5e;
}
.winamp98 .mini-spectrum i{
  flex:1 1 auto;
  min-width:4px;
  height:18%;
  background:linear-gradient(#dbff9f,#87d900);
  animation:ampEq .55s steps(4,end) infinite alternate;
}
.winamp98 .mini-spectrum i:nth-child(2n){animation-duration:.38s}
.winamp98 .mini-spectrum i:nth-child(3n){animation-duration:.68s}
.winamp98 .mini-spectrum i:nth-child(4n){animation-duration:.44s}
@keyframes ampEq{to{height:100%}}
.winamp98 .amp-bottom{
  padding:0 7px 7px;
  background:#7d7d7d;
}
.winamp98 .seek-wrap{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:6px;
  align-items:center;
  margin-bottom:5px;
}
.winamp98 .seek-label,
.winamp98 .seek-end,
.winamp98 .slider-box span{
  font:8px/1 "Courier New",monospace!important;
  color:#111;
}
.winamp98 .slider-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.winamp98 .slider-box{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:6px;
  align-items:center;
}
.winamp98 input[type="range"]{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:8px;
  margin:0;
  background:#d7d7d7;
  border:1px solid;
  border-top-color:#3a3a3a;
  border-left-color:#3a3a3a;
  border-right-color:#dedede;
  border-bottom-color:#dedede;
  box-shadow:inset 1px 1px 0 #666,inset -1px -1px 0 #f0f0f0;
}
.winamp98 input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:10px;
  height:16px;
  background:#9e9e9e;
  border:1px solid;
  border-top-color:#f0f0f0;
  border-left-color:#f0f0f0;
  border-right-color:#3a3a3a;
  border-bottom-color:#3a3a3a;
}
.winamp98 input[type="range"]::-moz-range-thumb{
  width:10px;
  height:16px;
  border-radius:0;
  background:#9e9e9e;
  border:1px solid;
  border-top-color:#f0f0f0;
  border-left-color:#f0f0f0;
  border-right-color:#3a3a3a;
  border-bottom-color:#3a3a3a;
}
.winamp98 input[type="range"]::-moz-range-track{
  height:8px;
  background:#d7d7d7;
  border:1px solid #555;
}
@media(max-width:680px){
  .winamp98 .amp-top{
    grid-template-columns:64px minmax(0,1fr);
  }
  .winamp98 .amp-cover{height:58px}
  .winamp98 .amp-time{font-size:22px!important}
  .winamp98 .amp-mid{
    grid-template-columns:1fr;
  }
  .winamp98 .mini-spectrum{
    order:3;
  }
  .winamp98 .slider-row{
    grid-template-columns:1fr;
  }
}


/* --- compact override: smaller, tighter, less bulky player --- */
.center-column > .mini-winamp{
  max-width: 690px !important;
  justify-self: center !important;
}

.winamp98 .amp-title{
  min-height: 19px !important;
  padding: 2px 7px !important;
  font-size: 10px !important;
}

.winamp98 .amp-menubar{
  padding: 2px 7px 1px !important;
  gap: 9px !important;
  font-size: 9px !important;
}

.winamp98 .amp-top{
  grid-template-columns: 58px minmax(0,1fr) !important;
  gap: 5px !important;
  padding: 5px 6px 4px !important;
}

.winamp98 .amp-cover-wrap{
  padding: 3px !important;
}
.winamp98 .amp-cover{
  height: 46px !important;
  font-size: 7px !important;
  line-height: 1.1 !important;
}

.winamp98 .amp-lcd{
  padding: 5px 6px !important;
}
.winamp98 .lcd-topline{
  font-size: 7px !important;
  margin-bottom: 1px !important;
}
.winamp98 .amp-time{
  font-size: 18px !important;
  letter-spacing: 0px !important;
}
.winamp98 .amp-total{
  font-size: 9px !important;
  padding-bottom: 2px !important;
}
.winamp98 .amp-track{
  font-size: 9px !important;
  margin-top: 3px !important;
}
.winamp98 .amp-meta{
  font-size: 7px !important;
  gap: 7px !important;
  margin-top: 2px !important;
}

.winamp98 .amp-mid{
  grid-template-columns: auto auto 1fr !important;
  gap: 6px !important;
  padding: 0 6px 5px !important;
}

.winamp98 .transport{
  grid-template-columns: repeat(5, 20px) !important;
  gap: 2px !important;
}
.winamp98 .transport button{
  min-height: 18px !important;
  font-size: 8px !important;
}

.winamp98 .amp-switches{
  gap: 3px !important;
}
.winamp98 .switch-chip{
  min-width: 22px !important;
  padding: 1px 3px !important;
  font-size: 7px !important;
}

.winamp98 .mini-spectrum{
  height: 14px !important;
  padding: 2px 3px !important;
}

.winamp98 .amp-bottom{
  padding: 0 6px 6px !important;
}
.winamp98 .seek-wrap{
  gap: 5px !important;
  margin-bottom: 4px !important;
}
.winamp98 .seek-label,
.winamp98 .seek-end,
.winamp98 .slider-box span{
  font-size: 7px !important;
}

.winamp98 input[type="range"]{
  height: 6px !important;
}
.winamp98 input[type="range"]::-webkit-slider-thumb{
  width: 8px !important;
  height: 13px !important;
}
.winamp98 input[type="range"]::-moz-range-thumb{
  width: 8px !important;
  height: 13px !important;
}

.winamp98 .slider-row{
  gap: 6px !important;
}

@media (max-width: 680px){
  .center-column > .mini-winamp{
    max-width: 100% !important;
  }
  .winamp98 .amp-top{
    grid-template-columns: 50px minmax(0,1fr) !important;
  }
  .winamp98 .amp-cover{
    height: 40px !important;
  }
  .winamp98 .amp-time{
    font-size: 16px !important;
  }
  .winamp98 .amp-mid{
    grid-template-columns: 1fr !important;
  }
}


/* --- flatter winamp override --- */
.center-column > .mini-winamp{
  max-width: 690px !important;
}
.winamp98{
  border-width:1px !important;
}
.winamp98 .amp-title{
  min-height: 17px !important;
  padding: 1px 6px !important;
  font-size: 9px !important;
}
.winamp98 .amp-menubar{
  padding: 1px 6px !important;
  gap: 8px !important;
  font-size: 8px !important;
}
.winamp98 .amp-top{
  grid-template-columns: minmax(0,1fr) 48px !important;
  gap: 4px !important;
  padding: 4px 5px 3px !important;
}
.winamp98 .amp-lcd{
  padding: 4px 5px !important;
  min-height: 0 !important;
}
.winamp98 .lcd-topline{
  font-size: 6px !important;
  margin-bottom: 0 !important;
}
.winamp98 .lcd-time-row{
  margin: 1px 0 !important;
}
.winamp98 .amp-time{
  font-size: 15px !important;
  line-height: .95 !important;
}
.winamp98 .amp-total{
  font-size: 8px !important;
}
.winamp98 .amp-track{
  font-size: 8px !important;
  margin-top: 2px !important;
  line-height: 1.05 !important;
}
.winamp98 .amp-meta{
  font-size: 6px !important;
  gap: 6px !important;
  margin-top: 1px !important;
}
.winamp98 .amp-cover-wrap{
  padding: 2px !important;
}
.winamp98 .amp-cover{
  width: 48px !important;
  height: 36px !important;
  font-size: 6px !important;
}
.winamp98 .amp-mid{
  grid-template-columns: auto auto 1fr !important;
  gap: 4px !important;
  padding: 0 5px 4px !important;
  align-items:center !important;
}
.winamp98 .transport{
  grid-template-columns: repeat(5, 18px) !important;
  gap: 2px !important;
}
.winamp98 .transport button{
  min-height: 16px !important;
  height: 16px !important;
  font-size: 7px !important;
  line-height: 1 !important;
  padding: 0 !important;
}
.winamp98 .amp-switches{
  gap: 2px !important;
}
.winamp98 .switch-chip{
  min-width: 20px !important;
  padding: 1px 2px 0 !important;
  font-size: 6px !important;
}
.winamp98 .mini-spectrum{
  height: 11px !important;
  padding: 1px 3px !important;
  gap: 1px !important;
}
.winamp98 .mini-spectrum i{
  min-width: 3px !important;
}
.winamp98 .amp-bottom{
  padding: 0 5px 5px !important;
}
.winamp98 .seek-wrap{
  gap: 4px !important;
  margin-bottom: 3px !important;
}
.winamp98 .seek-label,
.winamp98 .seek-end,
.winamp98 .slider-box span{
  font-size: 6px !important;
}
.winamp98 .slider-row{
  gap: 5px !important;
}
.winamp98 .slider-box{
  gap: 4px !important;
}
.winamp98 input[type="range"]{
  height: 5px !important;
}
.winamp98 input[type="range"]::-webkit-slider-thumb{
  width: 7px !important;
  height: 11px !important;
}
.winamp98 input[type="range"]::-moz-range-thumb{
  width: 7px !important;
  height: 11px !important;
}

@media(max-width:680px){
  .winamp98 .amp-top{
    grid-template-columns:minmax(0,1fr) 42px !important;
  }
  .winamp98 .amp-cover{
    width:42px !important;
    height:32px !important;
  }
  .winamp98 .amp-mid{
    grid-template-columns: 1fr !important;
  }
}


/* --- wider album art area override --- */
.winamp98 .amp-top{
  grid-template-columns: minmax(0,1fr) 260px !important;
}
.winamp98 .amp-cover-wrap{
  width: 260px !important;
}
.winamp98 .amp-cover{
  width: 100% !important;
  height: 58px !important;
  font-size: 7px !important;
}
@media(max-width:680px){
  .winamp98 .amp-top{
    grid-template-columns: minmax(0,1fr) 140px !important;
  }
  .winamp98 .amp-cover-wrap{
    width: 140px !important;
  }
  .winamp98 .amp-cover{
    height: 48px !important;
  }
}


/* --- AIM-style conversation widget --- */
.aim-window{
  background:#8f8f8f;
}
.aim-toolbar{
  display:flex;
  gap:12px;
  padding:2px 6px;
  background:#b7b7b7;
  border-top:1px solid #d6d6d6;
  border-bottom:1px solid #5a5a5a;
  font-size:9px;
}
.aim-contact{
  display:flex;
  align-items:center;
  gap:7px;
  padding:5px 7px;
  background:#a7a7a7;
  border-bottom:1px solid #555;
}
.aim-contact b{
  display:block;
  color:#111;
  font-size:10px;
}
.aim-contact small{
  display:block;
  color:#4b4b4b;
  font-size:8px;
}
.aim-buddy-icon{
  color:#21a300;
  font-size:13px;
  text-shadow:1px 1px 0 #e5e5e5;
}
.aim-log{
  height:128px;
  overflow-y:auto;
  padding:6px 7px;
  background:#d1d1d1;
  border:1px inset #777;
  font-size:9px;
  line-height:1.45;
}
.aim-log p{
  margin:0 0 6px;
}
.aim-log time{
  color:#666;
  font-size:8px;
}
.aim-log .sergei{
  color:#000080;
  font-weight:400;
}
.aim-log .ue{
  color:#6d0010;
  font-weight:400;
}
.aim-compose{
  display:grid;
  grid-template-columns:1fr 48px;
  gap:5px;
  padding:5px;
  background:#9b9b9b;
}
.aim-compose textarea{
  min-height:44px;
  resize:none;
  padding:4px;
  background:#c8c8c8;
  color:#111;
  border:1px solid;
  border-top-color:#444;
  border-left-color:#444;
  border-right-color:#dedede;
  border-bottom-color:#dedede;
  font-size:9px;
}
.aim-compose button{
  background:#969696;
  color:#111;
  border:1px solid;
  border-top-color:#dedede;
  border-left-color:#dedede;
  border-right-color:#333;
  border-bottom-color:#333;
  box-shadow:inset 1px 1px 0 #bdbdbd,inset -1px -1px 0 #5e5e5e;
  font-size:8px;
}
.aim-compose button:active{
  border-top-color:#333;
  border-left-color:#333;
  border-right-color:#dedede;
  border-bottom-color:#dedede;
}
.aim-statusbar{
  display:flex;
  justify-content:space-between;
  gap:8px;
  padding:2px 5px;
  background:#898989;
  border-top:1px solid #bdbdbd;
  color:#333;
  font-size:8px;
}


/* --- unify AIM widget typography with the rest of the site --- */
.aim-window,
.aim-window *,
.aim-toolbar,
.aim-contact,
.aim-contact b,
.aim-contact small,
.aim-log,
.aim-log p,
.aim-log time,
.aim-log .sergei,
.aim-log .ue,
.aim-compose textarea,
.aim-compose button,
.aim-statusbar{
  font-family:GulimChe,"굴림체",Gulim,"굴림",DotumChe,"돋움체",Dotum,"돋움",sans-serif!important;
  -webkit-font-smoothing:none!important;
  -moz-osx-font-smoothing:grayscale!important;
  text-rendering:optimizeSpeed!important;
  letter-spacing:-1px!important;
  text-shadow:none!important;
}


/* --- AIM font match fix: same as site, less cramped, more natural spacing --- */
.aim-window,
.aim-window *,
.aim-toolbar,
.aim-contact,
.aim-contact b,
.aim-contact small,
.aim-log,
.aim-log p,
.aim-log time,
.aim-log .sergei,
.aim-log .ue,
.aim-compose textarea,
.aim-compose button,
.aim-statusbar{
  font-family:Gulim,"굴림",Dotum,"돋움",sans-serif!important;
  -webkit-font-smoothing:none!important;
  -moz-osx-font-smoothing:grayscale!important;
  text-rendering:optimizeSpeed!important;
  letter-spacing:0!important;
  text-shadow:none!important;
  font-weight:400!important;
}

.aim-toolbar{
  font-size:8px!important;
  letter-spacing:.02em!important;
}

.aim-contact b{
  font-size:10px!important;
  letter-spacing:0!important;
}

.aim-contact small{
  font-size:8px!important;
  letter-spacing:0!important;
}

.aim-log{
  font-size:10px!important;
  line-height:1.45!important;
}

.aim-log time{
  font-size:8px!important;
}

.aim-compose textarea,
.aim-compose button,
.aim-statusbar{
  letter-spacing:0!important;
}


/* --- exact site font matching for AIM widget --- */
/* Let AIM inherit the same bitmap-like Gulim rules as the rest of the site,
   but without the cramped negative letter-spacing from the previous patch. */
.aim-window{
  font-family: inherit !important;
  -webkit-font-smoothing: inherit !important;
  -moz-osx-font-smoothing: inherit !important;
  text-rendering: inherit !important;
  text-shadow: none !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
}

.aim-window *,
.aim-toolbar,
.aim-contact,
.aim-contact b,
.aim-contact small,
.aim-log,
.aim-log p,
.aim-log time,
.aim-log .sergei,
.aim-log .ue,
.aim-compose textarea,
.aim-compose button,
.aim-statusbar{
  font-family: inherit !important;
  -webkit-font-smoothing: inherit !important;
  -moz-osx-font-smoothing: inherit !important;
  text-rendering: inherit !important;
  text-shadow: none !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
}

.aim-toolbar,
.aim-contact,
.aim-log,
.aim-compose textarea,
.aim-compose button,
.aim-statusbar{
  font-size: 11px !important;
  line-height: 1.4 !important;
}

.aim-toolbar{
  font-size: 10px !important;
  gap: 10px !important;
}

.aim-contact b{
  font-size: 11px !important;
}

.aim-contact small{
  font-size: 10px !important;
}

.aim-log{
  font-size: 11px !important;
  line-height: 1.45 !important;
}

.aim-log time{
  font-size: 10px !important;
}

.aim-compose textarea{
  font-size: 11px !important;
}

.aim-compose button{
  font-size: 10px !important;
}

.aim-statusbar{
  font-size: 10px !important;
}


/* ===== side image layout ===== */
body{
  background:#000 !important;
}
body:before{
  display:none !important;
}
.side-layout{
  width:min(1800px, 100%);
  margin:0 auto;
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(180px, 360px) minmax(900px, 1080px) minmax(180px, 360px);
  gap:28px;
  align-items:start;
  justify-content:center;
  padding:0 18px 24px;
}
.page{
  width:100% !important;
  max-width:1080px;
  margin:90px auto 28px !important;
  position:relative;
  z-index:2;
}
.side-figure{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding-top:0;
}
.side-figure img{
  display:block;
  width:100%;
  max-width:360px;
  height:100vh;
  object-fit:cover;
  object-position:center top;
  image-rendering:pixelated;
  filter:grayscale(1) contrast(1.05);
}
.side-figure-left img{ object-position:right top; }
.side-figure-right img{ object-position:left top; }

/* make the black center band read more clearly */
.page::before{
  content:"";
  position:fixed;
  top:0;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:min(1080px, calc(100vw - 420px));
  background:#000;
  z-index:-1;
}

@media (max-width: 1400px){
  .side-layout{
    grid-template-columns:minmax(130px, 260px) minmax(760px, 980px) minmax(130px, 260px);
    gap:18px;
  }
  .page::before{
    width:min(980px, calc(100vw - 300px));
  }
}

@media (max-width: 1100px){
  .side-layout{
    grid-template-columns:1fr;
    gap:12px;
    padding:0 10px 20px;
  }
  .side-figure{
    display:none;
  }
  .page{
    max-width:100%;
    margin:14px auto 20px !important;
  }
  .page::before{
    display:none;
  }
}


/* ===== fit side images into the remaining space / no page scrollbar ===== */
html,
body{
  width:100%;
  height:100%;
  overflow:hidden !important;
}

.side-layout{
  width:100% !important;
  height:100vh !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 18px !important;
  overflow:hidden !important;
  grid-template-columns:minmax(0,1fr) minmax(760px,1080px) minmax(0,1fr) !important;
  gap:24px !important;
  align-items:start !important;
}

.side-figure{
  width:100%;
  height:100vh !important;
  min-width:0;
  padding:0 !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.side-figure img{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:100vh !important;
  object-fit:contain !important;
  object-position:center center !important;
  display:block !important;
}

.page{
  width:100% !important;
  max-width:1080px !important;
  margin:12px auto 0 !important;
  transform-origin:top center !important;
  will-change:transform;
}

/* On narrower screens, keep the center readable and hide decorative images. */
@media(max-width:1100px){
  html,
  body{
    overflow:auto !important;
  }

  .side-layout{
    height:auto !important;
    min-height:100vh !important;
    display:block !important;
    padding:0 10px 20px !important;
    overflow:visible !important;
  }

  .side-figure{
    display:none !important;
  }

  .page{
    transform:none !important;
    margin:12px auto 20px !important;
  }
}


/* ===== fill the screen more tightly / wider black center ===== */
html,
body{
  width:100%;
  height:100%;
  margin:0;
  overflow:hidden !important;
  background:#000 !important;
}

.side-layout{
  width:100vw !important;
  height:100vh !important;
  min-height:100vh !important;
  margin:0 !important;
  padding:0 !important;
  display:grid !important;
  grid-template-columns:300px minmax(0,1fr) 300px !important;
  gap:0 !important;
  align-items:stretch !important;
  overflow:hidden !important;
  background:#000 !important;
}

.side-figure{
  width:300px !important;
  height:100vh !important;
  min-width:300px !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
  display:block !important;
  background:#000 !important;
}

.side-figure img{
  display:block !important;
  width:300px !important;
  height:100vh !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  object-fit:cover !important;
  object-position:center top !important;
}

.side-figure-left img{
  object-position:center top !important;
}

.side-figure-right img{
  object-position:center top !important;
}

.page{
  width:100% !important;
  max-width:1120px !important;
  min-width:0 !important;
  margin:8px auto 0 !important;
  padding:0 12px !important;
  background:#000 !important;
}

.page::before{
  content:"" !important;
  position:fixed !important;
  top:0 !important;
  bottom:0 !important;
  left:300px !important;
  right:300px !important;
  width:auto !important;
  transform:none !important;
  background:#000 !important;
  z-index:-1 !important;
}

/* On smaller desktop widths, keep side images visible but narrower. */
@media(max-width:1450px){
  .side-layout{
    grid-template-columns:250px minmax(0,1fr) 250px !important;
  }
  .side-figure{
    width:250px !important;
    min-width:250px !important;
  }
  .side-figure img{
    width:250px !important;
  }
  .page::before{
    left:250px !important;
    right:250px !important;
  }
}

@media(max-width:1100px){
  html,
  body{
    overflow:auto !important;
  }

  .side-layout{
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-height:100vh !important;
  }

  .side-figure{
    display:none !important;
  }

  .page{
    width:min(100% - 12px, 1080px) !important;
    max-width:1080px !important;
    margin:10px auto 20px !important;
    padding:0 !important;
  }

  .page::before{
    display:none !important;
  }
}


/* ===== final center width + lower layout tuning ===== */
.side-layout{grid-template-columns:300px minmax(0,1fr) 300px !important;}
.page{max-width:1080px !important; margin:30px auto 20px !important; padding:0 10px !important;}
.page::before{left:340px !important; right:340px !important;}
@media(max-width:1450px){.page{max-width:1020px !important;} .page::before{left:320px !important; right:320px !important;}}
@media(max-width:1100px){.page{margin:12px auto 20px !important; max-width:1080px !important;} .page::before{display:none !important;}}


/* ===== black center slightly narrower ===== */
.page::before{left:355px !important; right:355px !important;}
@media(max-width:1450px){.page::before{left:335px !important; right:335px !important;}}


/* ===== full monochrome theme ===== */
:root{
  --black:#000 !important;
  --charcoal:#0b0b0b !important;
  --panel:#8e8e8e !important;
  --silver:#b5b5b5 !important;
  --shadow:#3b3b3b !important;
  --navy:#252525 !important;
  --blue:#4a4a4a !important;
  --red:#4f4f4f !important;
  --green:#d0d0d0 !important;
  --cyan:#e2e2e2 !important;
}

html,
body{
  background:#000 !important;
  color:#111 !important;
}

body::before{
  display:none !important;
}

.titlebar,
.amp-title,
.winamp98 .amp-title{
  background:linear-gradient(90deg,#1d1d1d 0%,#3a3a3a 62%,#555 100%) !important;
  color:#fff !important;
}

.nav-btn:hover,
.nav-btn.active,
.standalone-nav .nav-btn:hover,
.standalone-nav .nav-btn.active,
.mini-winamp button:hover{
  background:#242424 !important;
  color:#fff !important;
  border-top-color:#727272 !important;
  border-left-color:#727272 !important;
  border-right-color:#111 !important;
  border-bottom-color:#111 !important;
  box-shadow:inset 1px 1px 0 #555,inset -1px -1px 0 #161616 !important;
}

.shortcut-icon,
.tiny-label,
.panel h2,
.update-list b,
.aim-log .sergei,
.aim-log .ue{
  color:#404040 !important;
}

.aim-buddy-icon{
  color:#444 !important;
}

.winamp98 .amp-lcd{
  background:linear-gradient(180deg,#020202 0%,#080808 100%) !important;
}

.winamp98 .amp-time,
.winamp98 .amp-track,
.winamp98 .amp-meta,
.winamp98 .lcd-topline,
.winamp98 .lcd-mode,
.winamp98 .lcd-trackno,
.winamp98 .amp-total{
  color:#d2d2d2 !important;
  text-shadow:none !important;
}

.winamp98 .mini-spectrum i,
.amp-bars i{
  background:linear-gradient(#f2f2f2,#888) !important;
}

.winamp98 input[type="range"],
.macamp input[type="range"]{
  accent-color:#444 !important;
}

.switch-chip.active{
  background:#4b4b4b !important;
  color:#fff !important;
}

.notice-window .window-body{
  background:#d8d8d8 !important;
}

a{
  color:#2f2f2f !important;
}

.side-figure img{
  filter:grayscale(1) contrast(1.05) !important;
}

.profile-image,
.camera-box,
.main-visual,
.amp-cover,
.mini-banner,
.aim-log{
  background:#050505 !important;
  color:#888 !important;
}

.window,
.mini-winamp,
.winamp98{
  filter:grayscale(1) !important;
}


/* ===== stronger monochrome text contrast ===== */

/* Dark text on light gray panels */
body,
.window-body,
.content-body,
.profile-box,
.update-list,
.aim-toolbar,
.aim-contact,
.aim-compose,
.aim-statusbar,
.notice-window .window-body,
.shortcut-grid a,
.dialog-buttons button,
.nav-btn,
.winamp98 .amp-menubar{
  color:#050505 !important;
}

.profile-box b,
.muted,
.update-list b,
.aim-contact small,
.aim-log time{
  color:#2a2a2a !important;
}

.panel h2,
.tiny-label,
.shortcut-icon{
  color:#111 !important;
}

/* Light text on dark areas */
.titlebar,
.amp-title,
.winamp98 .amp-title,
.nav-btn:hover,
.nav-btn.active,
.standalone-nav .nav-btn:hover,
.standalone-nav .nav-btn.active,
.mini-winamp button:hover,
.profile-image,
.camera-box,
.main-visual,
.amp-cover,
.mini-banner,
.aim-log{
  color:#f4f4f4 !important;
}

.aim-log p,
.aim-log b,
.aim-log .sergei,
.aim-log .ue{
  color:#f2f2f2 !important;
}

.winamp98 .amp-time,
.winamp98 .amp-track,
.winamp98 .amp-meta,
.winamp98 .lcd-topline,
.winamp98 .lcd-mode,
.winamp98 .lcd-trackno,
.winamp98 .amp-total,
.amp-status,
.macamp-status{
  color:#ffffff !important;
}

a{
  color:#080808 !important;
  text-decoration-color:#080808 !important;
}

.titlebar,
.amp-title{
  text-shadow:1px 1px 0 #000 !important;
}


/* ===== brighter AIM timestamps ===== */
.aim-log time{
  color:#e6e6e6 !important;
}


/* ===== updated AIM conversation: fixed box with internal scroll ===== */
.aim-log{
  height:118px !important;
  max-height:118px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  scroll-behavior:auto !important;
  scrollbar-color:#8e8e8e #1a1a1a;
  scrollbar-width:auto;
}

.aim-log p{
  margin:0 0 6px !important;
  line-height:1.35 !important;
  word-break:break-word !important;
}

.aim-log time{
  color:#e6e6e6 !important;
}

.aim-log .sergei,
.aim-log .ue{
  color:#ffffff !important;
}


/* ===== PC-98 style scrollbar for AIM chat ===== */
.aim-log{
  scrollbar-width:auto;
  scrollbar-color:#bdbdbd #111;
}

/* Chromium / Edge / Safari */
.aim-log::-webkit-scrollbar{
  width:15px;
}

.aim-log::-webkit-scrollbar-track{
  background:#111;
  border-left:1px solid #000;
  box-shadow:
    inset 1px 1px 0 #3b3b3b,
    inset -1px -1px 0 #000;
}

.aim-log::-webkit-scrollbar-thumb{
  min-height:28px;
  background:
    repeating-linear-gradient(
      45deg,
      #bdbdbd 0 2px,
      #8f8f8f 2px 4px
    );
  border:1px solid;
  border-top-color:#f0f0f0;
  border-left-color:#f0f0f0;
  border-right-color:#3a3a3a;
  border-bottom-color:#3a3a3a;
  box-shadow:
    inset 1px 1px 0 #d8d8d8,
    inset -1px -1px 0 #666;
}

.aim-log::-webkit-scrollbar-thumb:hover{
  background:
    repeating-linear-gradient(
      45deg,
      #d0d0d0 0 2px,
      #9e9e9e 2px 4px
    );
}

.aim-log::-webkit-scrollbar-button:single-button{
  display:block;
  height:15px;
  background:#9d9d9d;
  border:1px solid;
  border-top-color:#efefef;
  border-left-color:#efefef;
  border-right-color:#333;
  border-bottom-color:#333;
  box-shadow:
    inset 1px 1px 0 #cfcfcf,
    inset -1px -1px 0 #666;
}

.aim-log::-webkit-scrollbar-button:single-button:vertical:decrement{
  background:
    linear-gradient(135deg, transparent 50%, #111 50%) 5px 5px/5px 5px no-repeat,
    #9d9d9d;
}

.aim-log::-webkit-scrollbar-button:single-button:vertical:increment{
  background:
    linear-gradient(315deg, transparent 50%, #111 50%) 5px 4px/5px 5px no-repeat,
    #9d9d9d;
}

.aim-log::-webkit-scrollbar-corner{
  background:#111;
}


/* ===== true custom PC-98 AIM scrollbar ===== */
.aim-scroll-shell{
  display:grid;
  grid-template-columns:minmax(0,1fr) 16px;
  height:118px;
  max-height:118px;
  background:#050505;
  border-top:1px solid #4a4a4a;
  border-bottom:1px solid #1a1a1a;
  overflow:hidden;
}

.aim-scroll-shell .aim-log{
  height:118px !important;
  max-height:118px !important;
  overflow-y:scroll !important;
  overflow-x:hidden !important;
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
  border:0 !important;
}

.aim-scroll-shell .aim-log::-webkit-scrollbar{
  width:0 !important;
  height:0 !important;
  display:none !important;
}

.pc98-scrollbar{
  display:grid;
  grid-template-rows:16px minmax(0,1fr) 16px;
  width:16px;
  height:118px;
  background:#777;
  border-left:1px solid #111;
  user-select:none;
}

.pc98-scroll-btn{
  width:16px;
  height:16px;
  padding:0;
  display:grid;
  place-items:center;
  background:#9a9a9a;
  color:#111;
  font-size:8px;
  line-height:1;
  border:1px solid;
  border-top-color:#e6e6e6;
  border-left-color:#e6e6e6;
  border-right-color:#303030;
  border-bottom-color:#303030;
  box-shadow:
    inset 1px 1px 0 #c8c8c8,
    inset -1px -1px 0 #606060;
}

.pc98-scroll-btn:active{
  border-top-color:#303030;
  border-left-color:#303030;
  border-right-color:#e6e6e6;
  border-bottom-color:#e6e6e6;
  box-shadow:inset 1px 1px 0 #565656;
}

.pc98-scroll-track{
  position:relative;
  min-height:0;
  overflow:hidden;
  background:
    repeating-linear-gradient(
      135deg,
      #151515 0 2px,
      #2c2c2c 2px 4px
    );
  border-top:1px solid #000;
  border-bottom:1px solid #555;
  box-shadow:
    inset 1px 0 0 #3d3d3d,
    inset -1px 0 0 #000;
}

.pc98-scroll-thumb{
  position:absolute;
  left:1px;
  top:0;
  width:13px;
  min-height:24px;
  background:
    repeating-linear-gradient(
      45deg,
      #c9c9c9 0 2px,
      #929292 2px 4px
    );
  border:1px solid;
  border-top-color:#f4f4f4;
  border-left-color:#f4f4f4;
  border-right-color:#343434;
  border-bottom-color:#343434;
  box-shadow:
    inset 1px 1px 0 #d8d8d8,
    inset -1px -1px 0 #666;
  cursor:ns-resize;
}


/* ===== plain photo replacing the WEBCAM window ===== */
.plain-webcam-photo{
  width:100%;
  margin:0;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
}

.plain-webcam-photo img{
  display:block;
  width:100%;
  height:auto;
  margin:0;
  padding:0;
  border:0;
  object-fit:contain;
  image-rendering:auto;
  filter:grayscale(1) contrast(1.08);
}


/* ===== force the webcam replacement image to show ===== */
.left-column .plain-webcam-photo{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:hidden !important;
}

.left-column .plain-webcam-photo img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  object-fit:cover !important;
  visibility:visible !important;
  opacity:1 !important;
  filter:grayscale(1) contrast(1.08) !important;
}


/* ===== large monochrome tactical text-art display ===== */
.ascii-terminal{
  width:100%;
  margin:10px 0 0;
  padding:0;
  background:#050505;
  border:1px solid;
  border-top-color:#bfbfbf;
  border-left-color:#bfbfbf;
  border-right-color:#303030;
  border-bottom-color:#303030;
  box-shadow:
    inset 1px 1px 0 #696969,
    inset -1px -1px 0 #111;
  overflow:hidden;
}

.ascii-terminal-bar{
  min-height:18px;
  padding:3px 6px 2px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:linear-gradient(90deg,#1d1d1d,#4a4a4a);
  color:#fff;
  font-size:9px;
  line-height:1;
  letter-spacing:.08em;
  border-bottom:1px solid #000;
}

.ascii-terminal-screen{
  width:100%;
  padding:8px 7px 7px;
  overflow:hidden;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.035) 0 1px,
      transparent 1px 3px
    ),
    #000;
  border-top:1px solid #4a4a4a;
  border-bottom:1px solid #2b2b2b;
}

.ascii-art{
  display:block;
  width:max-content;
  min-width:100%;
  margin:0;
  color:#dedede;
  background:transparent;
  white-space:pre;
  overflow:visible;
  font-family:"Segoe UI Symbol","Noto Sans Symbols 2","MS Gothic","Courier New",monospace !important;
  font-size:4.15px;
  line-height:.94;
  letter-spacing:-.055em;
  font-weight:400;
  transform-origin:left top;
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:none;
}

.ascii-terminal-status{
  min-height:20px;
  padding:3px 6px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  background:#999;
  color:#050505;
  font-size:8px;
  line-height:1;
  letter-spacing:.03em;
  border-top:1px solid #d8d8d8;
}

.ascii-blink{
  animation:asciiBlink 1.1s steps(1,end) infinite;
}

@keyframes asciiBlink{
  50%{opacity:.2}
}

/* Exact desktop grid placement under the player. */
@media(min-width:901px){
  .ascii-terminal{
    grid-column:2 !important;
    grid-row:4 !important;
    margin-top:10px !important;
  }
}

/* Preserve the artwork on narrower screens without horizontal scrolling. */
@media(max-width:900px){
  .ascii-art{
    font-size:3.7px;
  }
}

@media(max-width:680px){
  .ascii-terminal-status{
    display:grid;
    justify-content:start;
    line-height:1.35;
  }

  .ascii-art{
    font-size:2.6px;
    line-height:.93;
  }
}


/* ===== inline ASCII + horizontal scrolling text between HOME and WINAMP ===== */
.inline-ascii-band{
  width:100%;
  height:52px;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:235px minmax(0,1fr);
  gap:14px;
  align-items:center;
  overflow:hidden;
  background:transparent;
  border:0;
  box-shadow:none;
}

.inline-ascii-art{
  width:235px;
  height:48px;
  margin:0;
  overflow:hidden;
  color:#d9d9d9;
  background:transparent;
  white-space:pre;
  font-family:"Segoe UI Symbol","MS Gothic","Noto Sans Symbols 2",monospace !important;
  font-size:1.72px;
  line-height:.92;
  letter-spacing:-.07em;
  text-align:left;
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:none;
}

.inline-marquee{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  align-self:center;
  border-top:1px solid #545454;
  border-bottom:1px solid #545454;
  padding:5px 0 4px;
  color:#d7d7d7;
  background:#000;
  font-size:9px;
  line-height:1;
  letter-spacing:.14em;
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}

.inline-marquee-track{
  display:flex;
  width:max-content;
  animation:inlineMarquee 24s linear infinite;
}

.inline-marquee-track span{
  flex:none;
  padding-right:42px;
}

@keyframes inlineMarquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* Desktop grid placement: occupy the empty row above WINAMP without a separate window. */
@media(min-width:901px){
  .inline-ascii-band{
    grid-column:2 !important;
    grid-row:3 !important;
    margin:0 !important;
  }

  .center-column>.mini-winamp{
    grid-row:4 !important;
    margin:0 !important;
  }
}

@media(max-width:900px){
  .inline-ascii-band{
    grid-template-columns:180px minmax(0,1fr);
    gap:10px;
  }

  .inline-ascii-art{
    width:180px;
    font-size:1.35px;
  }
}

@media(max-width:680px){
  .inline-ascii-band{
    grid-template-columns:1fr;
    height:auto;
    gap:5px;
  }

  .inline-ascii-art{
    width:100%;
    height:42px;
    font-size:1.25px;
  }
}


/* ===== refined inline art: larger, tightly fitted, plain broken-Gulim ticker ===== */
.inline-ascii-band{
  height:58px !important;
  grid-template-columns:305px minmax(0,1fr) !important;
  gap:10px !important;
  align-items:center !important;
  overflow:hidden !important;
}

.inline-ascii-art{
  width:305px !important;
  height:56px !important;
  font-size:2.22px !important;
  line-height:.90 !important;
  letter-spacing:-.075em !important;
  overflow:hidden !important;
  text-align:left !important;
  transform:none !important;
}

.inline-marquee{
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  color:#dcdcdc !important;
  font-family:GulimChe,"굴림체",Gulim,"굴림",DotumChe,"돋움체",Dotum,"돋움",sans-serif !important;
  font-size:10px !important;
  line-height:1 !important;
  letter-spacing:-1px !important;
  text-shadow:none !important;
  mask-image:none !important;
  -webkit-mask-image:none !important;
}

.inline-marquee-track{
  animation-duration:26s !important;
}

.inline-marquee-track span{
  padding-right:28px !important;
  font-family:GulimChe,"굴림체",Gulim,"굴림",DotumChe,"돋움체",Dotum,"돋움",sans-serif !important;
  letter-spacing:-1px !important;
  font-weight:400 !important;
}

@media(min-width:901px){
  .inline-ascii-band{
    margin-top:-2px !important;
    margin-bottom:-2px !important;
  }
}

@media(max-width:900px){
  .inline-ascii-band{
    grid-template-columns:245px minmax(0,1fr) !important;
  }

  .inline-ascii-art{
    width:245px !important;
    font-size:1.78px !important;
  }
}

@media(max-width:680px){
  .inline-ascii-band{
    height:auto !important;
    grid-template-columns:1fr !important;
  }

  .inline-ascii-art{
    width:100% !important;
    height:48px !important;
    font-size:1.42px !important;
  }
}


/* ===== remove the large empty bands around the inline art ===== */
@media(min-width:901px){
  .portal-grid{
    grid-template-columns:210px minmax(0,1fr) 220px !important;
    grid-template-rows:auto !important;
    align-items:start !important;
  }

  .center-column{
    display:grid !important;
    grid-column:2 !important;
    grid-row:1 !important;
    gap:0 !important;
  }

  .standalone-nav{
    grid-column:auto !important;
    grid-row:auto !important;
    margin:0 0 10px !important;
  }

  .main-window{
    grid-column:auto !important;
    grid-row:auto !important;
    margin:0 !important;
  }

  .inline-ascii-band{
    grid-column:auto !important;
    grid-row:auto !important;
    margin:0 !important;
  }

  .center-column>.mini-winamp{
    grid-column:auto !important;
    grid-row:auto !important;
    margin:0 !important;
  }

  .left-column,
  .right-column{
    grid-row:1 !important;
    margin-top:34px !important;
  }
}

/* Fit the art and ticker tightly between HOME and WINAMP. */
.inline-ascii-band{
  height:34px !important;
  min-height:34px !important;
  grid-template-columns:255px minmax(0,1fr) !important;
  gap:8px !important;
  padding:0 !important;
  overflow:hidden !important;
}

.inline-ascii-art{
  width:255px !important;
  height:34px !important;
  margin:0 !important;
  font-size:2.35px !important;
  line-height:.78 !important;
  letter-spacing:-.09em !important;
  overflow:hidden !important;
  align-self:center !important;
}

/* Plain old bitmap-like Gulim text, without decorative borders or fades. */
.inline-marquee{
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
  color:#f0f0f0 !important;
  font-family:GulimChe,"굴림체",Gulim,"굴림",DotumChe,"돋움체",Dotum,"돋움",sans-serif !important;
  font-size:10px !important;
  line-height:34px !important;
  letter-spacing:-1.4px !important;
  text-shadow:1px 0 0 #777 !important;
  -webkit-font-smoothing:none !important;
  -moz-osx-font-smoothing:grayscale !important;
  text-rendering:optimizeSpeed !important;
  overflow:hidden !important;
}

.inline-marquee-track,
.inline-marquee-track span{
  font-family:GulimChe,"굴림체",Gulim,"굴림",DotumChe,"돋움체",Dotum,"돋움",sans-serif !important;
  letter-spacing:-1.4px !important;
  font-weight:400 !important;
  line-height:34px !important;
}

@media(max-width:900px){
  .inline-ascii-band{
    height:32px !important;
    min-height:32px !important;
    grid-template-columns:210px minmax(0,1fr) !important;
  }

  .inline-ascii-art{
    width:210px !important;
    height:32px !important;
    font-size:1.9px !important;
  }

  .inline-marquee,
  .inline-marquee-track,
  .inline-marquee-track span{
    line-height:32px !important;
  }
}


/* ===== final inline strip tuning ===== */

/* Remove every visible gap between HOME, the strip, and WINAMP. */
@media(min-width:901px){
  .center-column{
    gap:0 !important;
  }

  .main-window{
    margin-bottom:0 !important;
  }

  .inline-ascii-band{
    margin:-1px 0 0 !important;
  }

  .center-column>.mini-winamp{
    margin:-1px 0 0 !important;
  }
}

/* Slightly larger artwork, still clipped into the narrow strip. */
.inline-ascii-band{
  height:38px !important;
  min-height:38px !important;
  grid-template-columns:290px minmax(0,1fr) !important;
  gap:8px !important;
}

.inline-ascii-art{
  width:290px !important;
  height:38px !important;
  font-size:2.65px !important;
  line-height:.78 !important;
  letter-spacing:-.085em !important;
  align-self:center !important;
}

/* Match the AIM conversation font, but give the ticker wider tracking. */
.inline-marquee,
.inline-marquee-track,
.inline-marquee-track span{
  font-family:GulimChe,"굴림체",Gulim,"굴림",DotumChe,"돋움체",Dotum,"돋움",sans-serif !important;
  font-size:10px !important;
  font-weight:400 !important;
  line-height:38px !important;
  letter-spacing:.09em !important;
  text-shadow:none !important;
  -webkit-font-smoothing:none !important;
  -moz-osx-font-smoothing:grayscale !important;
  text-rendering:optimizeSpeed !important;
}

.inline-marquee{
  color:#f2f2f2 !important;
}

.inline-marquee-track span{
  padding-right:34px !important;
}

@media(max-width:900px){
  .inline-ascii-band{
    height:35px !important;
    min-height:35px !important;
    grid-template-columns:235px minmax(0,1fr) !important;
  }

  .inline-ascii-art{
    width:235px !important;
    height:35px !important;
    font-size:2.05px !important;
  }

  .inline-marquee,
  .inline-marquee-track,
  .inline-marquee-track span{
    line-height:35px !important;
  }
}


/* ===== larger art + ticker attached directly beside it ===== */
.inline-ascii-band{
  height:48px !important;
  min-height:48px !important;
  display:grid !important;
  grid-template-columns:300px minmax(0,1fr) !important;
  column-gap:0 !important;
  row-gap:0 !important;
  padding:0 !important;
  margin:0 !important;
  align-items:center !important;
  overflow:hidden !important;
}

.inline-ascii-art{
  width:300px !important;
  height:48px !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  align-self:center !important;
  font-size:3.35px !important;
  line-height:.80 !important;
  letter-spacing:-.085em !important;
  text-align:left !important;
  transform:none !important;
}

.inline-marquee{
  min-width:0 !important;
  width:100% !important;
  height:48px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  display:flex !important;
  align-items:center !important;
  color:#f2f2f2 !important;

  /* Exactly the same font stack and bitmap rendering as the AIM log. */
  font-family:GulimChe,"굴림체",Gulim,"굴림",DotumChe,"돋움체",Dotum,"돋움",sans-serif !important;
  font-size:11px !important;
  font-weight:400 !important;
  line-height:1.35 !important;
  letter-spacing:.10em !important;
  text-shadow:none !important;
  -webkit-font-smoothing:none !important;
  -moz-osx-font-smoothing:grayscale !important;
  text-rendering:optimizeSpeed !important;
}

.inline-marquee-track{
  display:flex !important;
  align-items:center !important;
  width:max-content !important;
  margin:0 !important;
  padding:0 !important;
  animation:inlineMarquee 24s linear infinite !important;
  font:inherit !important;
  letter-spacing:inherit !important;
}

.inline-marquee-track span{
  display:inline-block !important;
  flex:none !important;
  margin:0 !important;
  padding:0 28px 0 0 !important;
  font:inherit !important;
  letter-spacing:inherit !important;
  color:inherit !important;
}

/* No gaps above or below the strip. */
@media(min-width:901px){
  .center-column{
    gap:0 !important;
  }

  .main-window{
    margin:0 !important;
  }

  .inline-ascii-band{
    margin:-1px 0 0 !important;
  }

  .center-column>.mini-winamp{
    margin:-1px 0 0 !important;
  }
}

@media(max-width:900px){
  .inline-ascii-band{
    height:42px !important;
    min-height:42px !important;
    grid-template-columns:245px minmax(0,1fr) !important;
  }

  .inline-ascii-art{
    width:245px !important;
    height:42px !important;
    font-size:2.65px !important;
  }

  .inline-marquee{
    height:42px !important;
    font-size:10px !important;
  }
}


/* ===== zoom the ASCII artwork to actually fill its red-marked area ===== */
/* The artwork is extremely wide, so making the font larger while showing all of it
   keeps it visually tiny. Here we intentionally zoom and crop it inside the box. */
.inline-ascii-band{
  height:52px !important;
  min-height:52px !important;
  grid-template-columns:300px minmax(0,1fr) !important;
  column-gap:0 !important;
}

.inline-ascii-art{
  width:max-content !important;
  min-width:max-content !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;

  font-size:5.8px !important;
  line-height:.78 !important;
  letter-spacing:-.08em !important;

  transform:translate(-2px,-1px) scale(1.03) !important;
  transform-origin:left top !important;
}

.inline-ascii-band{
  overflow:hidden !important;
}

/* Keep the text immediately beside the cropped artwork. */
.inline-marquee{
  height:52px !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
}

.inline-marquee,
.inline-marquee-track,
.inline-marquee-track span{
  font-family:GulimChe,"굴림체",Gulim,"굴림",DotumChe,"돋움체",Dotum,"돋움",sans-serif !important;
  font-size:11px !important;
  line-height:1 !important;
  letter-spacing:.10em !important;
}

@media(max-width:900px){
  .inline-ascii-band{
    height:46px !important;
    min-height:46px !important;
    grid-template-columns:245px minmax(0,1fr) !important;
  }

  .inline-ascii-art{
    font-size:4.65px !important;
  }

  .inline-marquee{
    height:46px !important;
  }
}


/* =========================================================
   PC-98 WINDOW SKIN
   Flatter, denser, harsher monochrome UI
   ========================================================= */

:root{
  --pc98-bg:#000;
  --pc98-panel:#9a9a9a;
  --pc98-panel-dark:#6c6c6c;
  --pc98-line:#f0f0f0;
  --pc98-shadow:#1b1b1b;
  --pc98-text:#050505;
  --pc98-invert:#f5f5f5;
}

/* Global bitmap-like rendering */
html,body,button,input,textarea,select,
.window,.window-body,.titlebar,.amp-title,
.nav-btn,.aim-window,.mini-winamp{
  font-family:GulimChe,"굴림체",DotumChe,"돋움체","MS Gothic",monospace !important;
  -webkit-font-smoothing:none !important;
  -moz-osx-font-smoothing:grayscale !important;
  text-rendering:optimizeSpeed !important;
  border-radius:0 !important;
}

/* Main window shell: remove modern soft bevel */
.window,
.mini-winamp,
.winamp98{
  background:var(--pc98-panel) !important;
  border:1px solid #fff !important;
  outline:1px solid #222 !important;
  box-shadow:
    2px 2px 0 #000,
    inset 1px 1px 0 #d8d8d8,
    inset -1px -1px 0 #555 !important;
}

/* PC-98 style title bars */
.titlebar,
.amp-title,
.winamp98 .amp-title{
  min-height:18px !important;
  padding:2px 4px !important;
  background:#242424 !important;
  color:#fff !important;
  border:0 !important;
  border-bottom:1px solid #fff !important;
  box-shadow:none !important;
  font-size:10px !important;
  line-height:13px !important;
  letter-spacing:.08em !important;
  text-shadow:none !important;
}

/* Compact square title buttons */
.window-controls{
  gap:1px !important;
}
.window-controls button{
  width:14px !important;
  height:13px !important;
  padding:0 !important;
  color:#111 !important;
  background:#aaa !important;
  border:1px solid #fff !important;
  outline:1px solid #333 !important;
  box-shadow:inset -1px -1px 0 #555 !important;
  font-size:8px !important;
  line-height:10px !important;
}
.window-controls button:active{
  background:#666 !important;
  color:#fff !important;
  box-shadow:inset 1px 1px 0 #222 !important;
}

/* Window interiors */
.window-body,
.content-body{
  background:#999 !important;
  color:#050505 !important;
  border:0 !important;
  padding:8px !important;
  box-shadow:
    inset 1px 1px 0 #4b4b4b,
    inset -1px -1px 0 #d8d8d8 !important;
}

/* Main display and image placeholders */
.profile-image,
.camera-box,
.main-visual,
.amp-cover,
.mini-banner{
  background:#030303 !important;
  color:#f2f2f2 !important;
  border:1px solid #fff !important;
  outline:1px solid #222 !important;
  box-shadow:none !important;
}

/* Navigation buttons: old keyboard UI look */
.nav-btn,
.dialog-buttons button,
.aim-compose button,
.mini-winamp button,
.winamp98 button{
  color:#050505 !important;
  background:#aaa !important;
  border:1px solid #fff !important;
  outline:1px solid #333 !important;
  box-shadow:inset -1px -1px 0 #555 !important;
  border-radius:0 !important;
}

.nav-btn:hover,
.nav-btn.active,
.dialog-buttons button:active,
.aim-compose button:active,
.mini-winamp button:active,
.winamp98 button:active{
  background:#202020 !important;
  color:#fff !important;
  border-color:#fff !important;
  outline-color:#000 !important;
  box-shadow:inset 1px 1px 0 #000 !important;
}

/* Shortcut icons should feel like text-mode buttons */
.shortcut-grid{
  gap:3px !important;
}
.shortcut-grid a{
  background:#aaa !important;
  border:1px solid #fff !important;
  outline:1px solid #555 !important;
  box-shadow:none !important;
  padding:5px 2px !important;
}
.shortcut-grid a:hover{
  background:#202020 !important;
  color:#fff !important;
}
.shortcut-icon{
  color:#111 !important;
  font-size:15px !important;
}

/* AIM: flatter terminal-like split */
.aim-toolbar,
.aim-contact,
.aim-compose,
.aim-statusbar{
  background:#aaa !important;
  color:#050505 !important;
  border-color:#3a3a3a !important;
}
.aim-log{
  background:#050505 !important;
  color:#f4f4f4 !important;
  border:1px solid #fff !important;
  outline:1px solid #222 !important;
  box-shadow:none !important;
}
.aim-log p,
.aim-log b,
.aim-log time{
  color:#f2f2f2 !important;
}
.aim-compose textarea{
  background:#d0d0d0 !important;
  color:#111 !important;
  border:1px solid #333 !important;
  outline:1px solid #fff !important;
  border-radius:0 !important;
}

/* Winamp: less Windows 98, more PC-98 utility panel */
.winamp98 .amp-menubar{
  background:#a6a6a6 !important;
  color:#111 !important;
  border-top:0 !important;
  border-bottom:1px solid #333 !important;
  padding:2px 6px !important;
}
.winamp98 .amp-lcd{
  background:#020202 !important;
  border:1px solid #fff !important;
  outline:1px solid #222 !important;
  box-shadow:none !important;
}
.winamp98 .amp-time,
.winamp98 .amp-track,
.winamp98 .amp-meta,
.winamp98 .lcd-topline,
.winamp98 .amp-total{
  color:#fff !important;
  text-shadow:none !important;
}
.winamp98 input[type="range"]{
  accent-color:#fff !important;
}

/* Thin scanlines across panels */
.window-body,
.content-body,
.aim-toolbar,
.aim-contact,
.aim-compose,
.aim-statusbar,
.winamp98 .amp-menubar{
  background-image:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.025) 0 1px,
      transparent 1px 3px
    ) !important;
}

/* Labels */
.tiny-label,
.panel h2,
.update-list b{
  color:#111 !important;
  text-shadow:none !important;
}

/* Remove any soft transitions */
*{
  transition:none !important;
}


/* ===== slightly larger overall layout + larger menu buttons ===== */
.page{
  width:min(1240px, calc(100% - 16px)) !important;
}

.portal-grid{
  grid-template-columns:225px minmax(0,1fr) 235px !important;
  gap:11px !important;
}

.left-column,
.center-column,
.right-column{
  gap:11px !important;
}

.standalone-nav{
  gap:6px !important;
}

.standalone-nav .nav-btn{
  min-width:98px !important;
  min-height:27px !important;
  padding:4px 11px !important;
  font-size:11px !important;
  letter-spacing:.14em !important;
}

.main-window{
  min-height:445px !important;
}

.content-body{
  min-height:415px !important;
}

.profile-image{
  height:122px !important;
}

@media(max-width:900px){
  .page{
    width:min(100% - 10px, 1240px) !important;
  }

  .portal-grid{
    grid-template-columns:190px minmax(0,1fr) !important;
  }

  .standalone-nav .nav-btn{
    min-width:84px !important;
  }
}


/* ===== align left/right widgets with the HOME window ===== */
@media(min-width:901px){
  .portal-grid{
    display:grid !important;
    grid-template-columns:225px minmax(0,1fr) 235px !important;
    grid-template-rows:auto auto auto auto !important;
    column-gap:11px !important;
    row-gap:11px !important;
    align-items:start !important;
  }

  .center-column{
    display:contents !important;
  }

  .standalone-nav{
    grid-column:2 !important;
    grid-row:1 !important;
    margin:0 0 0 !important;
  }

  .main-window{
    grid-column:2 !important;
    grid-row:2 !important;
    margin:0 !important;
  }

  .inline-ascii-band{
    grid-column:2 !important;
    grid-row:3 !important;
    margin:0 !important;
  }

  .center-column > .mini-winamp{
    grid-column:2 !important;
    grid-row:4 !important;
    margin:0 !important;
  }

  .left-column{
    grid-column:1 !important;
    grid-row:2 / span 3 !important;
    margin:0 !important;
    padding:0 !important;
  }

  .right-column{
    grid-column:3 !important;
    grid-row:2 / span 3 !important;
    margin:0 !important;
    padding:0 !important;
  }
}


/* ===== slightly more space below the MENU buttons ===== */
@media(min-width:901px){
  .standalone-nav{
    margin-bottom:6px !important;
  }
}


/* ===== HOME main visual: grayscale animated GIF ===== */
.main-visual{
  overflow:hidden !important;
  padding:0 !important;
  background:#000 !important;
}

.main-visual img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-height:280px !important;
  object-fit:cover !important;
  object-position:center !important;
  filter:grayscale(1) contrast(1.12) brightness(.9) !important;
  image-rendering:auto !important;
}


/* ===== swapped front image + monochrome animated album cover ===== */
.main-visual img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-height:280px !important;
  object-fit:cover !important;
  object-position:center !important;
  filter:grayscale(1) contrast(1.12) brightness(.9) !important;
}

.amp-cover{
  overflow:hidden !important;
  padding:0 !important;
  background:#000 !important;
}

.amp-cover img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
  filter:grayscale(1) contrast(1.08) brightness(.92) !important;
}


/* ===== center the album-cover character without cropping ===== */
.amp-cover{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#000 !important;
}

.amp-cover img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
}


/* ===== fill album cover fully, showing the center area ===== */
.amp-cover{
  display:block !important;
  overflow:hidden !important;
  background:#000 !important;
}

.amp-cover img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
}


/* ===== HOME text block tuning ===== */
.home-copy{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:flex-start !important;
  min-width:0 !important;
  padding-right:4px !important;
}

.home-title-big{
  margin:3px 0 7px !important;
  color:#f0f0f0 !important;
  font-family:GulimChe,"굴림체",Gulim,"굴림",DotumChe,"돋움체","MS Gothic",monospace !important;
  font-size:28px !important;
  line-height:1.05 !important;
  letter-spacing:.06em !important;
  text-shadow:none !important;
  word-break:keep-all !important;
}

.home-pairing{
  margin:0 0 14px !important;
  color:#202020 !important;
  font-family:GulimChe,"굴림체",Gulim,"굴림",DotumChe,"돋움체","MS Gothic",monospace !important;
  font-size:12px !important;
  line-height:1.5 !important;
  letter-spacing:.03em !important;
  word-break:keep-all !important;
}

.home-desc{
  margin:0 0 11px !important;
  color:#111 !important;
  font-family:GulimChe,"굴림체",Gulim,"굴림",DotumChe,"돋움체","MS Gothic",monospace !important;
  font-size:12px !important;
  line-height:1.75 !important;
  letter-spacing:0 !important;
  word-break:keep-all !important;
  overflow-wrap:break-word !important;
}

.home-note{
  color:#2b0000 !important;
}

@media(min-width:901px){
  .hero-grid{
    grid-template-columns:1.08fr .92fr !important;
    gap:18px !important;
    align-items:start !important;
  }

  .main-visual{
    min-height:300px !important;
  }

  .home-copy{
    padding-top:4px !important;
  }
}

@media(max-width:680px){
  .home-title-big{
    font-size:22px !important;
  }

  .home-pairing{
    font-size:11px !important;
    margin-bottom:12px !important;
  }

  .home-desc{
    font-size:11px !important;
    line-height:1.7 !important;
  }
}


/* ===== HOME title final tuning ===== */
.home-copy{
  align-items:center !important;
  text-align:center !important;
}

.home-title-big{
  color:#050505 !important;
  text-align:center !important;
  width:100% !important;
  margin:0 0 8px !important;
  font-family:GulimChe,"굴림체",Gulim,"굴림",DotumChe,"돋움체","MS Gothic",monospace !important;
  font-size:28px !important;
  line-height:1.02 !important;
  letter-spacing:.05em !important;
  -webkit-font-smoothing:none !important;
  -moz-osx-font-smoothing:grayscale !important;
  text-rendering:optimizeSpeed !important;
}

.home-pairing{
  text-align:center !important;
}

.home-desc{
  text-align:center !important;
}

@media(max-width:680px){
  .home-title-big{
    font-size:22px !important;
  }
}


/* ===== center only title + pairing; keep body copy left-aligned ===== */
.home-copy{
  align-items:stretch !important;
  text-align:left !important;
}

.home-title-big,
.home-pairing{
  text-align:center !important;
  width:100% !important;
}

.home-desc{
  text-align:left !important;
  width:100% !important;
}


/* ===== English translation under HOME copy ===== */
.home-english-copy{
  width:100% !important;
  margin-top:5px !important;
  padding-top:10px !important;
  border-top:1px dashed #555 !important;
}

.home-english-copy .home-desc{
  margin-bottom:8px !important;
  color:#292929 !important;
  font-family:"MS Gothic",GulimChe,"굴림체",monospace !important;
  font-size:10px !important;
  line-height:1.6 !important;
  letter-spacing:.02em !important;
  text-align:left !important;
}


/* ===== BANNER exchange widget ===== */
.banner-window .titlebar{
  letter-spacing:.12em !important;
}

.banner-widget-body{
  padding:7px !important;
}

.banner-scroll{
  width:100% !important;
  height:136px !important; /* 200x40 배너 3개가 한눈에 보이도록 */
  overflow-y:scroll !important;
  overflow-x:hidden !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:5px !important;
  padding:3px 2px !important;
  background:#050505 !important;
  border:1px solid #fff !important;
  outline:1px solid #222 !important;
  scrollbar-color:#777 #111 !important;
  scrollbar-width:auto !important;
}

.banner-slot{
  flex:0 0 40px !important;
  width:200px !important;
  height:40px !important;
  display:grid !important;
  place-items:center !important;
  overflow:hidden !important;
  background:
    repeating-linear-gradient(
      135deg,
      #101010 0 6px,
      #1c1c1c 6px 12px
    ) !important;
  border:1px solid #cfcfcf !important;
  outline:1px solid #333 !important;
  color:#8d8d8d !important;
  font-family:"MS Gothic",GulimChe,"굴림체",monospace !important;
  font-size:9px !important;
  letter-spacing:.12em !important;
  text-align:center !important;
}

.banner-begging{
  margin:8px 0 1px !important;
  color:#111 !important;
  font-family:GulimChe,"굴림체","MS Gothic",monospace !important;
  font-size:11px !important;
  line-height:1.35 !important;
  letter-spacing:.04em !important;
  text-align:center !important;
}

/* WebKit scrollbar styled like an old UI control */
.banner-scroll::-webkit-scrollbar{
  width:13px !important;
}

.banner-scroll::-webkit-scrollbar-track{
  background:#111 !important;
  border-left:1px solid #555 !important;
}

.banner-scroll::-webkit-scrollbar-thumb{
  background:#888 !important;
  border:1px solid #eee !important;
  box-shadow:inset -1px -1px 0 #444 !important;
}

.banner-scroll::-webkit-scrollbar-button:single-button{
  display:block !important;
  height:13px !important;
  background:#888 !important;
  border:1px solid #eee !important;
}


/* ===== BANNER uses the exact same custom PC-98 scrollbar style as AIM ===== */
.banner-scroll-shell{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 16px !important;
  width:100% !important;
  height:136px !important;
  max-height:136px !important;
  background:#050505 !important;
  border:1px solid #fff !important;
  outline:1px solid #222 !important;
  overflow:hidden !important;
}

.banner-scroll-shell .banner-scroll{
  width:auto !important;
  height:136px !important;
  max-height:136px !important;
  overflow-y:scroll !important;
  overflow-x:hidden !important;
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
  border:0 !important;
  outline:0 !important;
  padding:3px 2px !important;
}

.banner-scroll-shell .banner-scroll::-webkit-scrollbar{
  width:0 !important;
  height:0 !important;
  display:none !important;
}

.banner-pc98-scrollbar{
  height:136px !important;
}

/* Disable the old native-scrollbar rules for this widget */
.banner-scroll::-webkit-scrollbar,
.banner-scroll::-webkit-scrollbar-track,
.banner-scroll::-webkit-scrollbar-thumb,
.banner-scroll::-webkit-scrollbar-button:single-button{
  display:none !important;
}


/* ===== BANNER scrollbar interaction fix ===== */
.banner-scroll-shell{
  position:relative !important;
}

.banner-scroll-shell .banner-scroll{
  display:block !important;
  box-sizing:border-box !important;
  overscroll-behavior:contain !important;
}

.banner-scroll-shell .banner-slot{
  display:grid !important;
  width:200px !important;
  min-width:200px !important;
  height:40px !important;
  min-height:40px !important;
  margin:0 auto 5px !important;
  box-sizing:border-box !important;
}

.banner-scroll-shell .banner-slot:last-child{
  margin-bottom:0 !important;
}

.banner-pc98-scrollbar,
.banner-pc98-scrollbar *{
  pointer-events:auto !important;
}

.banner-pc98-scrollbar{
  position:relative !important;
  z-index:20 !important;
}

.banner-scroll-track{
  cursor:pointer !important;
}

.banner-scroll-thumb{
  cursor:grab !important;
  touch-action:none !important;
}

.banner-scroll-thumb:active{
  cursor:grabbing !important;
}


/* ===== flattened gif in logo area ===== */
.home-logo-strip{
  width:100% !important;
  height:58px !important;
  margin:0 0 10px 0 !important;
  overflow:hidden !important;
  border:1px solid #d5d5d5 !important;
  outline:1px solid #222 !important;
  background:#000 !important;
  box-shadow:inset 1px 1px 0 #fff, inset -1px -1px 0 #444 !important;
}

.home-logo-strip img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  filter:grayscale(100%) contrast(1.08) brightness(0.92) !important;
}

@media (max-width: 680px){
  .home-logo-strip{
    height:48px !important;
    margin-bottom:8px !important;
  }
}


/* ===== Header GIF above menu ===== */
.top-logo-header{
  width:100% !important;
  height:72px !important;
  overflow:hidden !important;
  background:#000 !important;
  border:1px solid #d0d0d0 !important;
  outline:1px solid #222 !important;
  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 #444444 !important;
  margin:0 0 8px 0 !important;
}

.top-logo-header img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  filter:grayscale(100%) contrast(1.08) brightness(0.92) !important;
}

/* In this version, the previous HOME-embedded strip is hidden just in case */
.home-logo-strip{
  display:none !important;
}

@media (max-width: 680px){
  .top-logo-header{
    height:58px !important;
    margin-bottom:6px !important;
  }
}


/* move logo gif below airplane image */
.main-visual{
  display:grid !important;
  gap:8px !important;
}

.visual-logo-strip{
  width:100% !important;
  height:58px !important;
  overflow:hidden !important;
  background:#000 !important;
  border:1px solid #d0d0d0 !important;
  outline:1px solid #222 !important;
  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 #444444 !important;
}

.visual-logo-strip img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  filter:grayscale(100%) contrast(1.08) brightness(0.92) !important;
}

/* hide old header version if any remains */
.top-logo-header{
  display:none !important;
}

@media (max-width: 680px){
  .visual-logo-strip{
    height:48px !important;
  }
}


/* ===== GIF directly below the separate bottom-left photo ===== */
.left-photo-logo-strip{
  width:100% !important;
  height:52px !important;
  margin-top:8px !important;
  overflow:hidden !important;
  background:#000 !important;
  border:1px solid #d0d0d0 !important;
  outline:1px solid #222 !important;
  box-shadow:
    inset 1px 1px 0 #fff,
    inset -1px -1px 0 #444 !important;
}

.left-photo-logo-strip img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  filter:grayscale(100%) contrast(1.08) brightness(.92) !important;
}

/* Disable the mistaken HOME placement rules. */
.visual-logo-strip{
  display:none !important;
}

.main-visual{
  display:grid !important;
  gap:0 !important;
}

@media(max-width:680px){
  .left-photo-logo-strip{
    height:46px !important;
  }
}


/* ===== PAIR PROFILE two-page widget ===== */
.pair-profile-body{
  padding:7px !important;
}

.pair-profile-pages{
  position:relative !important;
  width:100% !important;
  min-height:223px !important;
}

.pair-profile-page{
  display:none !important;
  width:100% !important;
}

.pair-profile-page.active{
  display:block !important;
}

.pair-profile-image{
  width:100% !important;
  height:118px !important;
  display:grid !important;
  place-items:center !important;
  overflow:hidden !important;
  background:#050505 !important;
  border:1px solid #fff !important;
  outline:1px solid #222 !important;
  color:#777 !important;
  font-family:"MS Gothic",GulimChe,"굴림체",monospace !important;
  font-size:8px !important;
  letter-spacing:.08em !important;
  text-align:center !important;
}

.pair-profile-image img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  filter:grayscale(100%) contrast(1.08) !important;
}

.pair-profile-name{
  margin:8px 0 6px !important;
  padding:3px 4px !important;
  background:#202020 !important;
  color:#fff !important;
  border:1px solid #fff !important;
  outline:1px solid #333 !important;
  font-size:10px !important;
  letter-spacing:.08em !important;
  text-align:center !important;
}

.pair-profile-page p:not(.pair-profile-name){
  margin:4px 1px !important;
  font-size:10px !important;
}

.pair-profile-controls{
  display:grid !important;
  grid-template-columns:28px 1fr 28px !important;
  align-items:center !important;
  gap:4px !important;
  margin-top:7px !important;
}

.pair-profile-controls button{
  width:28px !important;
  height:22px !important;
  padding:0 !important;
  background:#aaa !important;
  color:#111 !important;
  border:1px solid #fff !important;
  outline:1px solid #333 !important;
  box-shadow:inset -1px -1px 0 #555 !important;
  font-family:"MS Gothic",GulimChe,"굴림체",monospace !important;
  font-size:10px !important;
}

.pair-profile-controls button:active{
  background:#202020 !important;
  color:#fff !important;
  box-shadow:inset 1px 1px 0 #000 !important;
}

#pair-profile-index{
  display:block !important;
  padding:4px 2px !important;
  background:#050505 !important;
  color:#fff !important;
  border:1px solid #fff !important;
  outline:1px solid #222 !important;
  font-family:"MS Gothic",GulimChe,"굴림체",monospace !important;
  font-size:9px !important;
  letter-spacing:.14em !important;
  text-align:center !important;
}


/* ===== Pair profile uses vertical portrait photos ===== */
.pair-profile-pages{
  min-height:276px !important;
}

.pair-profile-image{
  height:176px !important;
  background:#000 !important;
}

.pair-profile-image img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center top !important;
  filter:grayscale(100%) contrast(1.08) brightness(.95) !important;
}

@media (max-width:680px){
  .pair-profile-pages{
    min-height:262px !important;
  }

  .pair-profile-image{
    height:162px !important;
  }
}


/* ===== Three-page pair profile: full portrait left, text right ===== */
.pair-profile-pages{
  min-height:220px !important;
}

.pair-profile-layout{
  display:grid !important;
  grid-template-columns:minmax(0, 46%) minmax(0, 54%) !important;
  gap:7px !important;
  align-items:stretch !important;
  width:100% !important;
  min-height:210px !important;
}

.pair-profile-image{
  width:100% !important;
  height:210px !important;
  min-height:210px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  overflow:hidden !important;
  background:#050505 !important;
}

.pair-profile-image img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:left center !important;
  filter:grayscale(100%) contrast(1.08) brightness(.95) !important;
}

.pair-profile-info{
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:stretch !important;
}

.pair-profile-info .pair-profile-name{
  margin:0 0 8px !important;
  word-break:keep-all !important;
}

.pair-profile-info p:not(.pair-profile-name){
  margin:5px 1px !important;
  line-height:1.35 !important;
  word-break:break-word !important;
}

@media(max-width:680px){
  .pair-profile-layout{
    grid-template-columns:44% 56% !important;
    min-height:190px !important;
  }

  .pair-profile-image{
    height:190px !important;
    min-height:190px !important;
  }

  .pair-profile-info p:not(.pair-profile-name){
    font-size:9px !important;
  }
}


/* ===== remove black side margins in pair profile image area ===== */
.pair-profile-image{
  background: transparent !important;   /* was black */
  border: 1px solid #ffffff !important;
  outline: 1px solid #333333 !important;
  box-shadow: inset 1px 1px 0 #d8d8d8, inset -1px -1px 0 #666666 !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

.pair-profile-image img{
  object-fit: contain !important;
  object-position: left top !important;
  background: transparent !important;
}

/* Slightly widen text side so the empty image area feels smaller */
.pair-profile-layout{
  grid-template-columns: minmax(0, 43%) minmax(0, 57%) !important;
}

@media(max-width:680px){
  .pair-profile-layout{
    grid-template-columns: 42% 58% !important;
  }
}


/* ===== remove image empty space entirely ===== */
.pair-profile-layout{
  grid-template-columns: minmax(0, 45%) minmax(0, 55%) !important;
  gap: 4px !important;
  min-height: 210px !important;
}

.pair-profile-image{
  width: 100% !important;
  height: 210px !important;
  min-height: 210px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}

.pair-profile-image img{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;      /* fill the box completely */
  object-position: center top !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media(max-width:680px){
  .pair-profile-layout{
    grid-template-columns: 44% 56% !important;
    gap: 4px !important;
    min-height: 190px !important;
  }

  .pair-profile-image{
    height: 190px !important;
    min-height: 190px !important;
  }

  .pair-profile-image img{
    object-position: center top !important;
  }
}


/* ===== Make the image box follow each photo's natural aspect ratio ===== */
.pair-profile-pages{
  min-height:0 !important;
}

.pair-profile-page{
  min-height:0 !important;
}

.pair-profile-layout{
  grid-template-columns:minmax(0,45%) minmax(0,55%) !important;
  align-items:start !important;
  min-height:0 !important;
}

.pair-profile-image{
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:auto !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
  background:transparent !important;
}

.pair-profile-image img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:left top !important;
  margin:0 !important;
  padding:0 !important;
}

.pair-profile-info{
  align-self:start !important;
  padding-top:0 !important;
}

@media(max-width:680px){
  .pair-profile-layout{
    grid-template-columns:44% 56% !important;
    min-height:0 !important;
  }

  .pair-profile-image{
    height:auto !important;
    min-height:0 !important;
  }

  .pair-profile-image img{
    width:100% !important;
    height:auto !important;
  }
}


/* ===== AIM live conversation animation ===== */
.aim-log.aim-live-ready p{
  display:none;
}

.aim-log p.aim-message-visible{
  display:block !important;
}

#aim-compose-box{
  caret-color:#111 !important;
}

#aim-compose-box.aim-yue-typing{
  background:#fff !important;
  color:#111 !important;
}

#aim-presence.aim-contact-typing{
  animation:aimBlink .8s steps(1,end) infinite;
}

@keyframes aimBlink{
  0%,49%{opacity:1}
  50%,100%{opacity:.38}
}


/* ===== profile text prettier line arrangement ===== */
.pair-profile-info{
  justify-content:flex-start !important;
  padding-top:2px !important;
}

.pair-profile-info .pair-profile-name{
  margin:0 0 10px !important;
  line-height:1.25 !important;
  letter-spacing:.03em !important;
}

.pair-profile-copy{
  margin:2px 0 0 !important;
  line-height:1.45 !important;
  letter-spacing:.02em !important;
  word-break:keep-all !important;
}

.pair-profile-quote{
  margin:1px 0 10px !important;
  line-height:1.45 !important;
  letter-spacing:.01em !important;
  word-break:keep-all !important;
}

.pair-profile-meta{
  margin:4px 0 !important;
  line-height:1.35 !important;
  letter-spacing:.01em !important;
}

.pair-profile-info p{
  text-align:left !important;
}

@media(max-width:680px){
  .pair-profile-copy{
    line-height:1.4 !important;
  }
  .pair-profile-quote,
  .pair-profile-meta{
    line-height:1.32 !important;
  }
}


/* ===== tighter spacing + more bitmap-like font for profile widget ===== */
.pair-profile-window,
.pair-profile-window *{
  font-family:
    "MS Gothic",
    "MS UI Gothic",
    GulimChe,
    "굴림체",
    Gulim,
    "굴림",
    monospace !important;
  -webkit-font-smoothing: none !important;
  -moz-osx-font-smoothing: auto !important;
  font-smooth: never !important;
  text-rendering: optimizeSpeed !important;
}

.pair-profile-info{
  justify-content:flex-start !important;
  padding-top:0 !important;
}

.pair-profile-info .pair-profile-name{
  margin:0 0 4px !important;     /* 제목 아래 간격 축소 */
  padding:2px 4px !important;
  line-height:1.15 !important;
  letter-spacing:0 !important;
  font-size:10px !important;
}

.pair-profile-copy{
  margin:0 !important;           /* 제목과 본문 사이 여백 거의 제거 */
  line-height:1.24 !important;
  letter-spacing:0 !important;
  font-size:10px !important;
}

.pair-profile-quote{
  margin:0 0 5px !important;     /* 제목 아래 간격 축소 */
  line-height:1.24 !important;
  letter-spacing:0 !important;
  font-size:10px !important;
}

.pair-profile-meta{
  margin:2px 0 !important;
  line-height:1.18 !important;
  letter-spacing:0 !important;
  font-size:10px !important;
}

.pair-profile-info p{
  text-align:left !important;
}

.pair-profile-info b{
  font-weight:700 !important;
  letter-spacing:0 !important;
}

#pair-profile-index,
.pair-profile-controls button{
  font-family:
    "MS Gothic",
    "MS UI Gothic",
    GulimChe,
    "굴림체",
    Gulim,
    "굴림",
    monospace !important;
  -webkit-font-smoothing: none !important;
  font-smooth: never !important;
  text-rendering: optimizeSpeed !important;
  letter-spacing:0 !important;
}

@media(max-width:680px){
  .pair-profile-info .pair-profile-name{
    margin:0 0 3px !important;
    font-size:9px !important;
  }
  .pair-profile-copy,
  .pair-profile-quote,
  .pair-profile-meta{
    font-size:9px !important;
  }
}


/* ===== keep PROFILE widget size stable while flipping pages ===== */
.pair-profile-pages{
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
}

.pair-profile-page{
  width: 100% !important;
}

.pair-profile-layout{
  align-items: start !important;
}


/* ===== extra English archival note on profile page 1 ===== */
.pair-profile-note{
  margin:8px 0 0 !important;
  line-height:1.2 !important;
  letter-spacing:0 !important;
  font-size:9px !important;
  color:#111 !important;
}

@media(max-width:680px){
  .pair-profile-note{
    font-size:8px !important;
    margin-top:6px !important;
  }
}


/* ===== REAL muted-blue titlebar fix =====
   The old site applied grayscale() to each whole window,
   which turned the new blue titlebars gray. */
.window{
  filter:none !important;
}

.window > .titlebar,
.window .titlebar,
.banner-window > .titlebar{
  background:#3D4358 !important;
  background-image:linear-gradient(
    90deg,
    #303548 0%,
    #3D4358 55%,
    #50586f 100%
  ) !important;
  color:#f4f5f8 !important;
}

.window > .titlebar span,
.window .titlebar span,
.banner-window > .titlebar span{
  color:#f4f5f8 !important;
}

.window .window-controls button{
  background:#697189 !important;
  color:#fff !important;
  border-top-color:#929ab1 !important;
  border-left-color:#929ab1 !important;
  border-right-color:#292e3d !important;
  border-bottom-color:#292e3d !important;
}

.window .window-controls button:hover{
  background:#7b849d !important;
}

.window .window-controls button:active{
  background:#4e556a !important;
}

/* Keep the photographs and artwork monochrome. */
.profile-image img,
.camera-box img,
.main-visual img,
.plain-webcam-photo img,
.left-photo-logo-strip img,
.pair-profile-image img,
.visual-logo-strip img,
.home-logo-strip img,
.amp-cover img{
  filter:grayscale(100%) contrast(1.08) !important;
}


/* ===== muted-blue music player titlebar ===== */
.amp-title,
.mini-winamp .amp-title,
.winamp98 .amp-title{
  background:#3D4358 !important;
  background-image:linear-gradient(
    90deg,
    #303548 0%,
    #3D4358 55%,
    #50586f 100%
  ) !important;
  color:#f4f5f8 !important;
  filter:none !important;
}

.amp-title span,
.mini-winamp .amp-title span,
.winamp98 .amp-title span{
  color:#f4f5f8 !important;
}

/* player buttons adjusted to match the blue titlebar */
.mini-winamp button,
.winamp98 button{
  background:#697189 !important;
  color:#fff !important;
  border-top-color:#929ab1 !important;
  border-left-color:#929ab1 !important;
  border-right-color:#292e3d !important;
  border-bottom-color:#292e3d !important;
}

.mini-winamp button:hover,
.winamp98 button:hover{
  background:#7b849d !important;
}

.mini-winamp button:active,
.winamp98 button:active{
  background:#4e556a !important;
}

/* keep the player artwork/display styling intact */
.mini-winamp,
.winamp98{
  filter:none !important;
}


/* ===== unify window/menu fonts to the PROFILE-style bitmap look ===== */
.window > .titlebar,
.window > .titlebar *,
.amp-title,
.amp-title *,
.menu-button,
.menu-button *,
.window-controls button,
.window-controls button *,
.pair-profile-controls button,
.pair-profile-controls button *,
#pair-profile-index,
#pair-profile-index *{
  font-family:
    "MS Gothic",
    "MS UI Gothic",
    GulimChe,
    "굴림체",
    Gulim,
    "굴림",
    monospace !important;
  -webkit-font-smoothing: none !important;
  -moz-osx-font-smoothing: auto !important;
  font-smooth: never !important;
  text-rendering: optimizeSpeed !important;
  letter-spacing: 0.02em !important;
}

/* titlebars a bit more obviously bitmap-like */
.window > .titlebar,
.amp-title{
  font-size: 10px !important;
  line-height: 1.15 !important;
}

.window > .titlebar span,
.amp-title span{
  font-size: 10px !important;
  line-height: 1.15 !important;
}

/* top menu buttons too */
.menu-button{
  font-size: 11px !important;
  line-height: 1.1 !important;
  letter-spacing: 0.08em !important;
}

/* small controls inside widgets */
.window-controls button,
.pair-profile-controls button{
  font-size: 10px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

#pair-profile-index{
  font-size: 10px !important;
  line-height: 1 !important;
}



/* ===== Yue profile corruption after the first viewing ===== */
.profile-corrupted .pair-profile-image{
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;
  background:#050505 !important;
}

/* Hide the actual portrait completely once corrupted */
.profile-corrupted .pair-profile-image img{
  opacity:0 !important;
  visibility:hidden !important;
  filter:none !important;
  animation:none !important;
}

/* Full-screen TV static */
.profile-corrupted .pair-profile-image::before,
.profile-corrupted .pair-profile-image::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  z-index:3 !important;
}

.profile-corrupted .pair-profile-image::before{
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.92) 0 1px,
      rgba(10,10,10,.96) 1px 2px,
      rgba(180,180,180,.84) 2px 3px,
      rgba(0,0,0,.96) 3px 4px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(245,245,245,.22) 0 1px,
      rgba(0,0,0,.18) 1px 2px,
      transparent 2px 4px
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,.15),
      rgba(0,0,0,.25)
    ) !important;
  mix-blend-mode:normal !important;
  animation:
    yueFullStaticShift 110ms steps(2,end) infinite,
    yueStaticFlicker 320ms steps(2,end) infinite !important;
}

.profile-corrupted .pair-profile-image::after{
  background:
    linear-gradient(
      180deg,
      transparent 0 12%,
      rgba(255,255,255,.85) 12% 15%,
      transparent 15% 34%,
      rgba(0,0,0,.72) 34% 40%,
      transparent 40% 58%,
      rgba(255,255,255,.55) 58% 61%,
      transparent 61% 78%,
      rgba(0,0,0,.88) 78% 84%,
      transparent 84% 100%
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0 6px,
      rgba(255,255,255,.12) 6px 7px,
      transparent 7px 12px
    ) !important;
  opacity:.95 !important;
  animation:
    yueStaticBands 140ms steps(2,end) infinite,
    yueBandJump 680ms steps(2,end) infinite !important;
}

.profile-corrupted .pair-profile-info{
  animation:yueTextGlitch 140ms steps(2,end) infinite !important;
}

.profile-corrupted .pair-profile-info p{
  font-family:
    "MS Gothic",
    "MS UI Gothic",
    GulimChe,
    "굴림체",
    monospace !important;
  letter-spacing:.15em !important;
}

@keyframes yueFullStaticShift{
  0%{transform:translate(0,0) scale(1.02)}
  20%{transform:translate(-2px,1px) scale(1.03)}
  40%{transform:translate(2px,-1px) scale(1.02)}
  60%{transform:translate(-1px,2px) scale(1.04)}
  80%{transform:translate(1px,-2px) scale(1.03)}
  100%{transform:translate(-2px,1px) scale(1.02)}
}

@keyframes yueStaticFlicker{
  0%,100%{opacity:.96}
  15%{opacity:.78}
  30%{opacity:1}
  45%{opacity:.68}
  60%{opacity:.92}
  75%{opacity:.74}
  90%{opacity:1}
}

@keyframes yueStaticBands{
  0%{transform:translateY(0)}
  25%{transform:translateY(-3px)}
  50%{transform:translateY(4px)}
  75%{transform:translateY(-2px)}
  100%{transform:translateY(2px)}
}

@keyframes yueBandJump{
  0%{background-position:0 0,0 0}
  25%{background-position:0 -8px,0 0}
  50%{background-position:0 6px,0 0}
  75%{background-position:0 -4px,0 0}
  100%{background-position:0 3px,0 0}
}

@keyframes yueTextGlitch{
  0%,70%,100%{transform:translate(0,0);opacity:1}
  72%{transform:translate(1px,0);opacity:.76}
  74%{transform:translate(-1px,1px);opacity:1}
}

  72%{transform:translate(1px,0);opacity:.76}
  74%{transform:translate(-1px,1px);opacity:1}
}