:root {
  color-scheme: dark;
  font-family: Pretendard, "Noto Sans KR", Inter, system-ui, sans-serif;
  background: #06111f;
  color: #ecf5ff;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #06111f; }
button, input { font: inherit; }
.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(390px, .82fr);
  background:
    radial-gradient(circle at 18% 18%, rgba(20, 184, 166, .17), transparent 31%),
    linear-gradient(135deg, #071b2b 0%, #071426 52%, #050d18 100%);
}
.market-visual {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  padding: clamp(34px, 6vw, 86px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid rgba(139, 184, 218, .16);
}
.market-visual::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(130, 173, 205, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(130, 173, 205, .06) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 82%, transparent);
}
.brand-lockup, .hero-copy, .market-board, .feature-strip { position: relative; z-index: 1; }
.brand-lockup { display: flex; align-items: center; gap: 17px; }
.brand-mark {
  width: 58px; height: 58px; display: grid; place-items: center;
  border-radius: 18px; font-weight: 900; letter-spacing: -.04em;
  color: #04201e; background: linear-gradient(135deg, #5eead4, #2dd4bf);
  box-shadow: 0 18px 45px rgba(45, 212, 191, .22);
}
.brand-lockup p, .eyebrow { margin: 0 0 7px; color: #5eead4; font-size: 12px; font-weight: 800; letter-spacing: .18em; }
.brand-lockup h1 { margin: 0; max-width: 620px; font-size: clamp(29px, 4vw, 54px); line-height: 1.16; letter-spacing: -.045em; }
.hero-copy { max-width: 680px; margin: 25px 0 24px; color: #a9c3d9; font-size: clamp(16px, 1.65vw, 21px); line-height: 1.75; }
.market-board {
  height: 210px; max-width: 720px; margin: 9px 0 28px;
  border: 1px solid rgba(110, 231, 213, .18); border-radius: 22px;
  background: linear-gradient(180deg, rgba(11, 37, 57, .7), rgba(5, 20, 34, .44));
  box-shadow: inset 0 1px rgba(255,255,255,.04), 0 30px 60px rgba(0,0,0,.18);
}
.market-line { position: absolute; left: 4%; right: 4%; height: 2px; transform-origin: left; }
.line-one { top: 54%; background: linear-gradient(90deg, transparent, #2dd4bf 8%, #67e8f9 100%); transform: rotate(-8deg); box-shadow: 0 0 18px #2dd4bf; }
.line-two { top: 64%; opacity: .45; background: linear-gradient(90deg, transparent, #60a5fa); transform: rotate(-3deg); }
.candle { position: absolute; bottom: 30px; width: 13px; border-radius: 3px; background: #2dd4bf; box-shadow: 0 0 16px rgba(45,212,191,.25); }
.candle::before { content: ""; position: absolute; width: 2px; top: -18px; bottom: -16px; left: 6px; background: inherit; }
.c1 { left: 10%; height: 34px; }.c2 { left: 22%; height: 62px; background: #fb7185; }.c3 { left: 34%; height: 72px; }
.c4 { left: 47%; height: 100px; }.c5 { left: 60%; height: 82px; background: #fb7185; }.c6 { left: 73%; height: 124px; }.c7 { left: 86%; height: 148px; }
.feature-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 720px; }
.feature-strip span { padding: 15px; color: #9fbad0; font-size: 13px; border: 1px solid rgba(148, 189, 220, .15); border-radius: 14px; background: rgba(9, 30, 47, .72); }
.feature-strip b { display: block; margin-bottom: 5px; color: #e7f7ff; font-size: 14px; }
.login-panel { display: grid; place-items: center; align-content: center; padding: clamp(24px, 5vw, 70px); }
.login-card { width: min(100%, 430px); padding: clamp(28px, 4vw, 45px); border: 1px solid rgba(142, 184, 214, .18); border-radius: 26px; background: rgba(9, 25, 42, .86); box-shadow: 0 30px 90px rgba(0,0,0,.34); backdrop-filter: blur(18px); }
.login-card h2 { margin: 0; font-size: 30px; letter-spacing: -.035em; }
.login-guide { margin: 10px 0 30px; color: #91abc0; line-height: 1.55; }
form label { display: block; margin: 17px 0 8px; color: #bfd2e2; font-size: 14px; font-weight: 700; }
input { width: 100%; min-height: 52px; padding: 0 15px; color: #f2f8ff; border: 1px solid #28465f; border-radius: 12px; outline: 0; background: #081a2b; transition: .2s; }
input:focus { border-color: #2dd4bf; box-shadow: 0 0 0 4px rgba(45,212,191,.12); }
.password-field { position: relative; }
.password-field input { padding-right: 65px; }
.password-field button { position: absolute; right: 7px; top: 7px; min-height: 38px; padding: 0 11px; color: #7dd3fc; border: 0; border-radius: 9px; background: transparent; cursor: pointer; }
.login-message { min-height: 24px; margin: 11px 0 2px; color: #fda4af; font-size: 14px; }
.login-button { width: 100%; min-height: 54px; margin-top: 4px; padding: 0 18px; display: flex; justify-content: space-between; align-items: center; color: #03231f; border: 0; border-radius: 13px; background: linear-gradient(135deg, #5eead4, #2dd4bf); font-weight: 900; cursor: pointer; box-shadow: 0 16px 35px rgba(45,212,191,.18); }
.login-button:disabled { opacity: .62; cursor: wait; }
.security-note { display: flex; gap: 11px; margin-top: 23px; padding: 14px; color: #8da7bc; border-radius: 12px; background: #071726; font-size: 12px; line-height: 1.6; }
.security-note span { color: #2dd4bf; }.security-note p { margin: 0; }
.product-note { margin: 18px 0 0; color: #607d94; font-size: 12px; }
@media (max-width: 900px) {
  .login-shell { grid-template-columns: 1fr; }
  .market-visual { min-height: auto; padding: 29px 24px 25px; justify-content: flex-start; border-right: 0; border-bottom: 1px solid rgba(139,184,218,.14); }
  .brand-mark { width: 48px; height: 48px; border-radius: 14px; }
  .brand-lockup h1 { font-size: clamp(24px, 7vw, 36px); }
  .hero-copy { margin: 17px 0 0; font-size: 15px; }
  .market-board, .feature-strip { display: none; }
  .login-panel { padding: 28px 18px 38px; }
  .login-card { padding: 27px 22px; }
}