/* [1] 공통 테마 설정 */
:root {
    --primary: #4285f4;
    --success: #34a853;
    --bg: #f0f2f5;
    --card: #ffffff;
}

body {
    background-color: var(--bg);
    font-family: 'Pretendard', sans-serif;
    margin: 0;
    padding: 60px 0 10px;
    display: flex;
    justify-content: center;
    color: #333;
    line-height: 1.5;
}

.container {
    width: 95%;
    max-width: 1100px;
}

/* [2] 헤더 */
header {
    text-align: center;
    margin-bottom: 40px;
}

header h1 {
    font-size: 3rem;
    font-weight: 800;
    margin: 0;
    letter-spacing: -1px;
}

/* [3] 벤토 그리드 레이아웃 */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.bento-item {
    background: var(--card);
    border-radius: 24px;
    padding: 25px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
}

.main-tool {
    grid-column: span 2;
}

.result-section {
    grid-column: span 1;
}

/* 하단 배치: 정보카드(2칸), 쿠팡광고(1칸) */
.info-card {
    grid-column: span 2;
}

.coupang-card {
    grid-column: span 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* [4] 입출력창 높이 통일 */
.input-list,
.result-scroll-area {
    height: 400px;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 5px;
}

/* [5] 입력행 디자인 */
.input-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f8f9fa;
    padding: 12px 15px;
    border-radius: 14px;
    margin-bottom: 10px;
    border: 1px solid #eee;
}

.row-num {
    background: var(--primary);
    color: white;
    min-width: 26px;
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.8rem;
}

.drive-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
}

/* [6] 액션 버튼 */
.action-buttons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.add-btn {
    flex: 1;
    border: 2px solid var(--primary);
    background: #fff;
    color: var(--primary);
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    height: 54px;
}

.reset-btn {
    flex: 1;
    border: 1px solid #ddd;
    background: #fff;
    color: #888;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
}

.convert-btn {
    flex: 2;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
}

/* [7] 결과창 헤더 */
.result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #f1f3f5;
    padding-bottom: 15px;
}

.all-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f1f3f5;
    border: 1px solid #e9ecef;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    min-width: 85px;
}

/* [8] 결과 아이템 */
.result-item {
    background: #f8f9fa;
    border-radius: 16px;
    padding: 15px;
    margin-bottom: 12px;
    border: 1px solid #eee;
}

.result-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.result-badge {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--primary);
    background: #e8f0fe;
    padding: 3px 8px;
    border-radius: 6px;
}

.result-url {
    font-size: 0.75rem;
    color: #666;
    word-break: break-all;
    font-family: monospace;
    display: block;
    background: #fff;
    padding: 8px;
    border-radius: 8px;
}

.copy-btn {
    background: transparent;
    border: none;
    color: var(--primary);
    font-weight: 700;
    cursor: pointer;
    font-size: 0.75rem;
}

/* [9] 통합 정보 카드 스타일 (내부 레이아웃) */
.info-content-wrapper {
    display: flex;
    gap: 30px;
}

/* 가이드와 보안을 가로로 배치 */
.info-left {
    flex: 1.2;
}

.info-right {
    flex: 1;
    border-left: 1px solid #f1f3f5;
    padding-left: 30px;
}

.card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.step-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.step {
    background: #f8f9fa;
    padding: 10px 15px;
    border-radius: 10px;
    font-size: 0.9rem;
    border: 1px solid #f1f1f1;
}

.step strong {
    color: var(--primary);
    margin-right: 5px;
}

.warning {
    font-size: 0.8rem;
    color: #ea4335;
    margin-top: 12px;
    font-weight: 600;
}

.security-text {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #666;
    margin: 0;
}

/* [10] 쿠팡 광고 문구 스타일 */
.ad-container {
    width: 100%;
    display: flex;
    justify-content: center;
}

.coupang-notice {
    font-size: 0.75rem;
    color: #aaa;
    margin-top: 12px;
}

/* [11] 푸터 (사용자 수정 반영) */
footer {
    margin-top: 60px;
    padding: 40px 0 0 0;
    text-align: center;
    border-top: 1px solid #e9ecef;
}

footer p {
    color: #adb5bd;
    font-size: 0.85rem;
}

/* [12] 반응형 레이아웃 */
@media (max-width: 850px) {
    .bento-grid {
        grid-template-columns: 1fr;
    }

    .main-tool,
    .result-section,
    .info-card,
    .coupang-card {
        grid-column: span 1;
    }

    .info-content-wrapper {
        flex-direction: column;
        gap: 25px;
    }

    /* 모바일에서 다시 세로로 */
    .info-right {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid #f1f3f5;
        padding-top: 25px;
    }
}