/* ------------------------------
    기본 Reset
--------------------------------*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Pretendard', sans-serif;
    background:#f9fafb;
    color:#333;
    line-height:1.6;
}

a { color: inherit; text-decoration: none; }
.header-bar{
    width:100%; background:#fff; border-bottom:1px solid #ececec; 
    display:flex; align-items:center; justify-content:space-between; 
    padding:0 24px; height:62px; position:sticky; top:0; z-index:100;
}
.header-left { display:flex; align-items:center; gap:10px;}
.logo {
    display:flex; align-items:center; font-weight:500; font-size:22px; letter-spacing:-1px;
    color:#121212;
}
.logo-partner {
    display:flex; align-items:center; font-weight:300; font-size:22px; letter-spacing:-1px;
    color:#255eff;
}
.logo img { height:36px; margin-right:10px;}
.gnb-menu{display:flex; gap:18px;}
.gnb-menu a{
    font-size:16px; font-weight:500; color:#374151; padding:10px 6px; border-radius:6px;
    transition: background 0.1s;
}
.gnb-menu a.active,
.gnb-menu a:hover { background:#f0f5fd; color:#255eff;}
.header-right{display:flex; align-items:center; gap:20px;}
.logout-btn{
    background:#ff5252; color:#fff; border:none; font-size:15px; padding:8px 22px; 
    border-radius:8px; cursor:pointer; font-weight:600; transition:.15s;
}
.logout-btn:hover{background:#e84040;}
@media (max-width:600px){
    .header-bar{padding:0 10px;height:52px;}
    .logo{font-size:18px;}
    .gnb-menu a{font-size:14px;padding:7px 3px;}
    .header-right{gap:8px;}
}

.header-bar .login-btn{
    background:#3B82F6;color:#fff;padding:8px 24px;border-radius:8px;font-weight:600;text-decoration:none;font-size:15px;transition:.15s;
}
.header-bar .login-btn:hover{background:#2152c8;}
@media (max-width:600px){
    .header-bar{padding:0 8px;height:46px;}
    .header-bar .logo{font-size:16px;}
    .header-bar .logo-partner{font-size:16px;}
    .header-bar .login-btn{font-size:14px;padding:7px 14px;}
}

.section {
    max-width:720px;
    padding:60px 16px;
    margin:auto;
}

/* 제목 영역 */
.page-title {
    text-align:center;
    margin-bottom:40px;
}
.page-title h1 {
    font-size:28px;
    font-weight:700;
}
.page-title p {
    font-size:15px;
    color:#555;
    margin-top:8px;
}

/* Form Box */
.form-box {
    background:#fff;
    padding:24px;
    border-radius:16px;
    box-shadow:0 4px 14px rgba(0,0,0,0.06);
    margin-bottom:24px;
}
.form-box h2 {
    font-size:20px;
    margin-bottom:14px;
    font-weight:600;
}
.input-group {
    margin-bottom:18px;
}
.input-group label {
    font-size:14px;
    font-weight:600;
    margin-bottom:8px;
    display:block;
}
.input-group input,
.input-group select {
    width:100%;
    padding:14px;
    font-size:15px;
    border:1px solid #ddd;
    border-radius:10px;
}
/* 채널 입력 박스 전체 여백 */
#channel-box {
    margin-top: 8px;
}

/* 기본은 모바일 기준(세로 정렬) */
.channel-item {
    display: flex;
    flex-direction: column; /* 모바일에서 세로 */
    gap: 8px;
    margin-bottom: 12px;
}

/* select, input 기본 스타일 */
#channel-box .channel-item select,
#channel-box .channel-item input[type="text"] {
    width: 100%; /* 모바일에서는 전체 */
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
}

/* -------------------
   >=480px부터 가로 배치 
------------------- */
@media (min-width: 480px) {
    .channel-item {
        flex-direction: row;
        align-items: center;
    }

    #channel-box .channel-item select {
        flex: 0 0 30%; /* PC에서 select 비율 */
        width: auto;
    }

    #channel-box .channel-item input[type="text"] {
        flex: 1;
        width: auto;
    }
}


/* 채널 동적 추가 */
.channel-item {
    display:flex;
    gap:10px;
    margin-bottom:15px;
}
.channel-item select {
    flex:0 0 40%;
}
.channel-item input {
    flex:1;
}
.add-channel-btn {
    width:100%;
    padding:12px;
    font-size:14px;
    background:#e8ecf5;
    border-radius:10px;
    margin-top:10px;
    cursor:pointer;
    border:none;
}




.profile-btn{
    width:100%;margin-top:20px;padding:16px 0;background:#3B82F6;color:#fff;font-size:18px;
    border:none;border-radius:12px;cursor:pointer;font-weight:600;transition:background .2s;
}
.profile-btn:hover{background:#255eff;}
@media (max-width:600px){
    .profile-btn{font-size:16px;}
}