*{box-sizing:border-box}html,body{margin:0;background:#12171d;color:#edf4f8;font-family:Arial,"Noto Sans KR",sans-serif}body{background:radial-gradient(circle at 20% 10%,#273846 0,#172029 38%,#10151a 80%)}.canvas{width:1120px;margin:auto;padding:30px 0 40px}header{height:260px;display:grid;grid-template-columns:1.05fr 1.15fr .72fr;align-items:center;gap:30px;padding:15px 18px}.logo{width:100%;height:190px;object-fit:contain}.hero small{letter-spacing:5px;color:#64c8f3;font-weight:900}.hero h1{font-size:46px;margin:14px 0 12px}.hero h1 b{color:#61c8f4}.hero p{color:#bdcbd4;line-height:1.7}.tg{align-self:start;margin-top:8px;border:1px solid #61c8f4;background:#1b2730;border-radius:10px;padding:13px;display:flex;align-items:center;gap:10px;text-decoration:none;color:white}.tg i,.go i{width:42px;height:42px;border-radius:50%;background:#53bce8;display:grid;place-items:center;font-style:normal}.tg span strong,.tg span em{display:block}.tg span em{font-size:10px;color:#9eb0bb;font-style:normal;margin-top:4px}.box{border:1px solid #3a5261;border-radius:15px;background:#11181e;padding:12px}.boxhead{height:42px;display:flex;align-items:center;justify-content:space-between;padding:0 8px}.boxhead h2{font-size:20px}.boxhead span{font-size:10px;color:#899ba7}.boxhead span b{color:#61c8f4}.row{height:116px;border:1px solid #344955;border-radius:11px;background:linear-gradient(90deg,#202a33,#141a20);display:grid;grid-template-columns:90px 1fr 145px 205px;align-items:center;margin-top:9px;overflow:hidden}.row.rec{border-color:#5cc9f4;box-shadow:inset 4px 0 #5cc9f4}.badge{height:100%;display:grid;place-items:center;text-align:center;font-size:13px;font-weight:900;background:linear-gradient(#5ec8f2,#2788b7);color:#06151d}.badge.alt{background:linear-gradient(#5d6871,#303a42);color:#fff}.badge b{font-size:23px}.info{padding:15px 18px}.kick{font-size:12px;font-weight:900;color:#69cdf7}.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#69cdf7;box-shadow:0 0 10px #69cdf7;margin-right:8px}.addr{font-size:29px;font-weight:900;margin:7px 0}.note{font-size:11px;color:#8ea1ad}.copy,.enter{height:52px;border-radius:8px;font-weight:900;font-size:14px}.copy{background:#222c34;border:1px solid #52616b;color:white}.enter{margin-right:16px;background:#5fc9f4;color:#07151d;text-decoration:none;display:grid;place-items:center}.support{height:174px;margin-top:9px;border:2px solid #3caee4;border-radius:14px;background:#111a21;display:grid;grid-template-columns:170px 1fr 180px;align-items:center;padding:14px 28px;color:white;text-decoration:none}.roundlogo{width:130px;height:130px;border:2px solid #61c9f4;border-radius:50%;display:grid;place-items:center;background:#1a252d}.roundlogo img{width:110px;height:110px;object-fit:contain}.support small{color:#62c8f3;font-weight:900}.support h2{font-size:31px;margin:7px 0}.support p{font-size:13px;color:#b5c2ca;line-height:1.55}.go{justify-self:end;width:126px;height:126px;border-radius:50%;border:2px solid #65cdf8;background:#246c8e;display:grid;place-items:center;align-content:center;gap:7px}.go i{font-size:23px}.tip{margin-top:10px;border:1px solid #405763;background:#182129;border-radius:9px;padding:11px 14px;color:#aebdc6;font-size:12px}.tip>b{background:#61c9f5;color:#06141c;padding:5px 10px;border-radius:5px;margin-right:10px}.tip strong{color:#6ed0f7}.steps{margin-top:8px;border:1px solid #344955;background:#172028;border-radius:10px;display:grid;grid-template-columns:repeat(3,1fr);padding:10px 20px}.steps>div{font-size:28px;color:#61c9f5;display:flex;align-items:center;gap:12px;padding:0 20px;border-right:1px solid #40515b}.steps>div:last-child{border:0}.steps p{margin:0}.steps p b{display:block;color:#eef4f7;font-size:12px}.steps p i{font-style:normal;color:#62caf5;margin-right:7px}.steps small{display:block;color:#81949f;font-size:10px;margin-top:5px}.float{position:fixed;right:22px;bottom:20px;width:120px;height:120px;border-radius:50%;border:2px solid #5ac7f3;background:#1b2a34;color:white;text-decoration:none;display:grid;place-items:center;align-content:center;text-align:center;font-size:30px;box-shadow:0 0 22px #2889b766}.float b{font-size:13px;margin-top:4px}
/* True responsive layout */
@media(max-width:900px){
  .canvas{width:min(100% - 28px,760px);margin:auto;padding:18px 0 95px;transform:none}
  header{
    height:auto;min-height:0;display:flex;flex-direction:column;gap:18px;
    padding:16px 4px 24px;text-align:center
  }
  .logo{
    width:min(86vw,420px);height:auto;max-height:160px;object-fit:contain;
    background:#eef7fb;border-radius:16px;padding:16px 22px;
    box-shadow:0 12px 34px rgba(0,0,0,.22)
  }
  .hero small{font-size:10px;letter-spacing:4px}
  .hero h1{font-size:36px;margin:10px 0}
  .hero p{font-size:14px;margin:0}
  .tg{align-self:stretch;justify-content:center;margin:0;padding:13px 16px}
  .box{padding:10px}
  .boxhead{height:auto;min-height:46px;gap:12px;align-items:flex-start}
  .boxhead h2{font-size:17px;margin:4px 0}
  .boxhead span{font-size:9px;padding-top:6px;white-space:nowrap}
  .row{
    height:auto;min-height:0;
    grid-template-columns:74px minmax(0,1fr);
    grid-template-areas:"badge info" "badge actions";
    padding:0;align-items:stretch
  }
  .badge{grid-area:badge;min-height:145px;font-size:11px}
  .badge b{font-size:20px}
  .info{grid-area:info;padding:15px 14px 8px}
  .kick{font-size:10px}
  .addr{font-size:clamp(20px,5.5vw,27px);word-break:break-all;letter-spacing:-.5px}
  .note{font-size:10px;line-height:1.5}
  .copy,.enter{
    height:46px;font-size:12px;margin:0
  }
  .copy{grid-area:actions;margin:0 8px 12px 14px;width:calc(50% - 18px)}
  .enter{
    grid-area:actions;margin:0 14px 12px auto;width:calc(50% - 18px);
    align-self:end
  }
  .support{
    height:auto;min-height:150px;
    grid-template-columns:90px 1fr 82px;
    gap:12px;padding:15px
  }
  .roundlogo{
    width:78px;height:78px;background:#eef7fb;border-width:2px
  }
  .roundlogo img{width:68px;height:68px}
  .support small{font-size:10px}
  .support h2{font-size:23px;margin:5px 0 7px}
  .support p{font-size:11px}
  .go{width:72px;height:72px;gap:3px}
  .go i{width:32px;height:32px;font-size:16px}
  .go b{font-size:9px}
  .tip{font-size:11px;line-height:1.6}
  .steps{grid-template-columns:1fr;padding:4px 14px}
  .steps>div{
    border-right:0;border-bottom:1px solid #40515b;padding:12px 4px;font-size:23px
  }
  .steps>div:last-child{border-bottom:0}
  .steps p b{font-size:12px}.steps small{font-size:10px}
  .float{
    width:76px;height:76px;right:12px;bottom:12px;font-size:20px
  }
  .float b{font-size:9px}
}
@media(max-width:480px){
  .canvas{width:calc(100% - 18px)}
  .logo{width:88vw;padding:13px 18px}
  .hero h1{font-size:31px}
  .hero p{font-size:13px}
  .boxhead{flex-direction:column;gap:0;padding-bottom:8px}
  .boxhead span{align-self:flex-end}
  .row{grid-template-columns:62px minmax(0,1fr)}
  .badge{min-height:154px;font-size:10px}
  .info{padding-left:11px;padding-right:10px}
  .addr{font-size:20px}
  .copy{margin-left:11px}
  .enter{margin-right:10px}
  .support{grid-template-columns:68px 1fr 58px;padding:12px 10px;gap:8px}
  .roundlogo{width:60px;height:60px}.roundlogo img{width:52px;height:52px}
  .support h2{font-size:19px}.support p{font-size:10px}
  .go{width:54px;height:54px}.go i{width:25px;height:25px;font-size:12px}.go b{display:none}
}

/* Logo visibility fix */
.logo{background:#edf7fb;border-radius:18px;padding:18px 24px;box-shadow:0 14px 38px rgba(0,0,0,.22)}