@charset "utf-8";

/*공통*/
.pt140 {padding-top:140px;}

/* streaming service */
.streaming-service-hero {display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; height:240px; margin-bottom:var(--size50); padding:var(--size30) var(--size80); border-radius:1em; background:url("/images/sub/streaming-service.jpg") 50% 50%/cover no-repeat; color:#fff;}
.streaming-service-hero p {line-height:1.3em; margin-bottom:10px;}
.streaming-service-hero h2 {font-size:var(--font-size-40); font-weight:500; line-height:1.3em;}

.streaming-service-list {color:#fff; background:#1a1a1a; border:1px solid #2c2c2c; border-radius:1em; padding:var(--size30);}
.streaming-service-list ul {display:grid; grid-template-columns:repeat(6, 1fr); gap:15px 12px;}
.streaming-service-list ul li {min-height:60px;}
.streaming-service-list ul li a {display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; height:100%; padding:5px; border-radius:.5em; background:#373737; color:#eee; font-weight:700; line-height:1.2em;}
.streaming-service-list ul li a:hover {background:#000;}
.streaming-service-list ul li img {width:100%; max-height:50px; object-fit:contain;}

/* ========================================
   Login & Sign-in Styles
   Added: 2025-01-28
   ======================================== */

/* login */
.login-wrap {max-width:480px; margin:0 auto; padding:var(--size40) 0;}
.login-box {display:flex; flex-direction:column; gap:var(--size15);}
.login-box .input-group {position:relative;}
.login-box .input-group .input {width:100%; height:56px; padding:0 var(--size20); border:1px solid #333; border-radius:8px; background:#1a1a1a; color:#fff; font-size:var(--font-size-16); transition:all 0.3s;}
.login-box .input-group .input:focus {border-color:#007bff; outline:none;}
.login-box .input-group .input::placeholder {color:#666;}
.login-box .input-group .password-toggle {position:absolute; right:var(--size15); top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; padding:5px;}
.login-box .input-group .password-toggle svg {display:none;}
.login-box .input-group .password-toggle .icon-eye-off {display:block;}
.login-box .input-group .password-toggle.active .icon-eye-off {display:none;}
.login-box .input-group .password-toggle.active .icon-eye-on {display:block;}
.login-box .submit {width:100%; height:56px; border:none; border-radius:8px; background:#007bff; color:#fff; font-size:var(--font-size-16); font-weight:600; cursor:pointer; transition:all 0.3s;}
.login-box .submit:hover {background:#0056b3;}

.login-etc {margin:var(--size20) 0; text-align:center;}
.login-etc p {color:#999; font-size:var(--font-size-14);}
.login-etc a {color:#007bff; text-decoration:none; font-size:var(--font-size-14);}
.login-etc a:hover {text-decoration:underline;}

.sns-login {display:flex; flex-direction:column; gap:var(--size10);}
.sns-login .link-item {width:100%; height:56px; display:flex; align-items:center; justify-content:center; gap:var(--size10); border:1px solid #333; border-radius:8px; background:#1a1a1a; color:#fff; font-size:var(--font-size-15); cursor:pointer; transition:all 0.3s;}
.sns-login .link-item:hover {background:#2a2a2a; border-color:#007bff;}
.sns-login .link-item .icon {display:flex; align-items:center; justify-content:center;}
.sns-login .link-item .icon img {width:20px; height:20px;}

.code-box {display:flex; flex-direction:column; align-items:center; gap:var(--size20);}
.code-items {display:flex; gap:var(--size10); margin-bottom:var(--size10);}
.code-item {flex:1;}
.code-item .input {width:100%; height:60px; text-align:center; border:1px solid #333; border-radius:8px; background:#1a1a1a; color:#fff; font-size:var(--font-size-24); font-weight:600;}
.code-item .input:focus {border-color:#007bff; outline:none;}
.resend-btn {border:none; background:none; color:#007bff; font-size:var(--font-size-14); cursor:pointer; text-decoration:underline;}
.resend-btn:hover {text-decoration:none;}

/* sign-in */
.sign-in {max-width:480px; margin:0 auto; padding:var(--size40) 0;}
.sign-in .title {margin-bottom:var(--size30); text-align:center;}
.sign-in .title h3 {font-size:var(--font-size-24); font-weight:600; margin-bottom:var(--size10); color:#fff;}
.sign-in .title p {font-size:var(--font-size-14); color:#999; line-height:1.6;}
.sign-in .form {display:flex; flex-direction:column; gap:var(--size15);}
.sign-in .form .input-group {position:relative;}
.sign-in .form .input-group .input {width:100%; height:56px; padding:0 var(--size20); border:1px solid #333; border-radius:8px; background:#1a1a1a; color:#fff; font-size:var(--font-size-16); transition:all 0.3s;}
.sign-in .form .input-group .input:focus {border-color:#007bff; outline:none;}
.sign-in .form .input-group .input::placeholder {color:#666;}
.sign-in .form .input-group .check-btn {position:absolute; right:10px; top:50%; transform:translateY(-50%); height:40px; padding:0 var(--size20); border:1px solid #007bff; border-radius:6px; background:#007bff; color:#fff; font-size:var(--font-size-14); font-weight:600; cursor:pointer; transition:all 0.3s;}
.sign-in .form .input-group .check-btn:hover {background:#0056b3; border-color:#0056b3;}
.sign-in .form .input-group .password-toggle {position:absolute; right:var(--size15); top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; padding:5px;}
.sign-in .form .input-group .password-toggle svg {display:none;}
.sign-in .form .input-group .password-toggle .icon-eye-off {display:block;}
.sign-in .form .input-group .password-toggle.active .icon-eye-off {display:none;}
.sign-in .form .input-group .password-toggle.active .icon-eye-on {display:block;}
.sign-in .btns {display:flex; gap:var(--size10); margin-top:var(--size30);}
.sign-in .btns .btn {flex:1; height:56px; display:flex; align-items:center; justify-content:center; border:1px solid #007bff; border-radius:8px; background:#007bff; color:#fff; font-size:var(--font-size-16); font-weight:600; cursor:pointer; transition:all 0.3s; text-decoration:none;}
.sign-in .btns .btn:hover {background:#0056b3; border-color:#0056b3;}
.sign-in .btns .btn:last-child {background:#333; border-color:#333;}
.sign-in .btns .btn:last-child:hover {background:#444; border-color:#444;}
.sign-in .agree-group {margin-top:var(--size10);}
.sign-in .agree-group .checkbox-label {display:flex; align-items:center; gap:10px; cursor:pointer; color:#999; font-size:var(--font-size-14);}
.sign-in .agree-group input[type="checkbox"] {width:18px; height:18px; cursor:pointer;}
/* ======================================== */