/* ============ Base ============ */
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: 'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    color: #222;
    background: #f7f8fa;
    line-height: 1.5;
}
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.hidden { display: none !important; }
.muted { color: #888; font-size: 0.9em; }
.req { color: #e74c3c; }

/* ============ Header / Footer ============ */
.site-header {
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    padding: 16px 0;
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; }
.site-header .logo {
    font-size: 1.25rem; font-weight: 700; color: #111; text-decoration: none;
}
.site-header.admin .logo { color: #d97706; }
.site-header nav a, .site-header nav span {
    margin-left: 16px; color: #555; text-decoration: none; font-size: 0.95rem;
}
.site-header nav a.active, .site-header nav a:hover { color: #2563eb; }

.site-footer {
    margin-top: 60px; padding: 24px 0; text-align: center; color: #aaa;
    border-top: 1px solid #eee; background: #fff;
}

/* ============ Hero ============ */
.hero {
    text-align: center; padding: 60px 20px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #fff; border-radius: 16px; margin: 40px 0;
}
.hero .hero-sub { font-size: 1rem; margin: 0 0 8px; opacity: 0.9; letter-spacing: 0.02em; }
.hero h1 { font-size: 2.5rem; margin: 0 0 12px; }
.hero .hero-brand { color: #fde047; }
.hero .lead { font-size: 1.2rem; margin-bottom: 16px; opacity: 0.95; }
.hero .prize { font-size: 1.15rem; margin: 0 0 16px; }
.hero .prize strong { font-size: 1.6rem; color: #fde047; }
.hero .period { margin-bottom: 28px; opacity: 0.9; }

/* ============ Info cards ============ */
.info-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 20px; margin: 40px 0;
}
.info-card {
    background: #fff; padding: 24px; border-radius: 12px;
    border: 1px solid #e5e7eb;
}
.info-card h3 { margin: 0 0 12px; font-size: 1.1rem; }
.info-card p  { margin: 0; color: #555; }

/* ============ Forms ============ */
.form { background: #fff; padding: 32px; border-radius: 12px; border: 1px solid #e5e7eb; margin-top: 24px; }
.form.narrow { max-width: 480px; margin-left: auto; margin-right: auto; }
.form fieldset { border: none; padding: 0; margin: 0 0 28px; }
.form legend { font-size: 1.05rem; font-weight: 700; margin-bottom: 12px; color: #111; }
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.95rem; }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="url"],
.field input[type="password"],
.field input[type="date"],
.field textarea,
.field select {
    width: 100%; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 6px;
    font-size: 1rem; font-family: inherit;
}
.field input:focus, .field textarea:focus, .field select:focus {
    outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .grid-2 { grid-template-columns: 1fr; } }

.radio-row label { margin-right: 24px; font-weight: normal; }
.check-row { display: block; margin-bottom: 10px; }
.check-row input { margin-right: 8px; }

.form-actions { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; }
.form-row { display: flex; gap: 12px; align-items: center; }

/* ============ Buttons ============ */
.btn {
    display: inline-block; padding: 10px 20px; border: none; border-radius: 6px;
    font-size: 1rem; font-weight: 600; cursor: pointer; text-decoration: none;
    transition: all .15s; font-family: inherit;
}
.btn-primary { background: #2563eb; color: #fff; }
.btn-primary:hover { background: #1d4ed8; }
.btn-ghost { background: #fff; color: #555; border: 1px solid #d1d5db; }
.btn-ghost:hover { background: #f3f4f6; }
.btn-danger { background: #dc2626; color: #fff; }
.btn-danger:hover { background: #b91c1c; }
.btn-lg { padding: 14px 32px; font-size: 1.05rem; }
.btn-sm { padding: 5px 12px; font-size: 0.85rem; }
.btn-link { background: none; border: none; color: #2563eb; cursor: pointer; padding: 0; }

/* ============ Member rows (deprecated, kept for safety) ============ */
.member-row {
    border: 1px dashed #d1d5db; padding: 16px; border-radius: 8px; margin-bottom: 12px;
    position: relative;
}
.member-row .remove {
    position: absolute; top: 8px; right: 8px; background: none; border: none;
    cursor: pointer; color: #dc2626; font-size: 1.2rem;
}

/* ============ Participant table (참가신청서) ============ */
.notice {
    background: #fef3c7; border: 1px solid #fbbf24; color: #92400e;
    border-radius: 6px; padding: 12px 16px; margin-bottom: 12px; font-size: 0.9rem;
}
.notice strong { display: block; margin-bottom: 4px; }
.notice ol { margin: 0; padding-left: 22px; }
.participant-table {
    width: 100%; border-collapse: collapse; margin-bottom: 12px;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 6px; overflow: hidden;
}
.participant-table th, .participant-table td {
    padding: 8px 10px; border: 1px solid #e5e7eb; vertical-align: middle;
    font-size: 0.9rem;
}
.participant-table thead { background: #f9fafb; }
.participant-table th { font-weight: 600; color: #555; text-align: center; }
.participant-table th small { color: #888; font-weight: normal; }
.participant-table td.seq { text-align: center; font-weight: 600; }
.participant-table input[type="text"],
.participant-table input[type="tel"] {
    width: 100%; padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 4px;
    font-size: 0.9rem; font-family: inherit;
}
.participant-table input:disabled { background: #f3f4f6; color: #aaa; }
.participant-table label { font-weight: normal; margin-right: 10px; white-space: nowrap; }

/* 모바일: 표를 참가자별 카드로 전환해 입력칸이 좁아지지 않도록 */
@media (max-width: 700px) {
    .participant-table { border: none; background: transparent; }
    .participant-table thead { display: none; }
    .participant-table tr.participant-row {
        display: block; margin-bottom: 16px; padding: 8px 12px 12px;
        background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
    }
    .participant-table td {
        display: flex; align-items: center; gap: 10px;
        border: none; border-bottom: 1px solid #f0f1f3; padding: 8px 0;
    }
    .participant-table tr.participant-row td:last-child { border-bottom: none; }
    .participant-table td::before {
        content: attr(data-label);
        flex: 0 0 92px; font-weight: 600; color: #555; font-size: 0.85rem;
    }
    /* 입력칸이 카드 너비를 모두 사용하도록 */
    .participant-table td input[type="text"],
    .participant-table td input[type="tel"] { flex: 1 1 auto; padding: 9px 10px; font-size: 1rem; }
    /* 번호 행: 카드 헤더처럼 표시 */
    .participant-table td.seq {
        text-align: left; font-size: 0.85rem; color: #888;
        padding-bottom: 4px; border-bottom: 1px solid #e5e7eb;
    }
    .participant-table td.seq::before { content: "참가자 " ; flex: 0 0 auto; color: #555; }
    /* 직책 라디오: 라벨 줄바꿈 허용 */
    .participant-table td[data-label="직책"] { flex-wrap: wrap; }
    /* 체크박스 행: 라벨 왼쪽, 체크박스 왼쪽 정렬 */
    .participant-table td.chk { justify-content: flex-start; }
    .participant-table td.chk input[type="checkbox"] {
        width: 20px; height: 20px;
    }
    /* 삭제 버튼: 꽉 차지 않게 */
    .participant-table td.manage::before { display: none; }
    .participant-table td.manage { justify-content: flex-end; padding-top: 10px; }
}

/* ============ Consent box ============ */
.consent-box {
    background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px;
    padding: 16px 20px; margin-bottom: 16px;
}
.consent-box h3 {
    margin: 0 0 10px; font-size: 0.98rem; padding: 6px 10px;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 4px;
    text-align: center;
}
.consent-box ul { margin: 0 0 12px; padding-left: 20px; font-size: 0.9rem; color: #444; }
.consent-box ul li { margin-bottom: 4px; }
.consent-box .check-row { font-weight: 600; }

/* ============ Progress ============ */
#progress { margin-top: 20px; }
.progress-bar { width: 100%; height: 12px; background: #e5e7eb; border-radius: 6px; overflow: hidden; }
.progress-bar-fill { height: 100%; background: #2563eb; transition: width .2s; }
.progress-text { margin-top: 6px; font-size: 0.9rem; color: #555; }

/* ============ Tables ============ */
.data-table {
    width: 100%; border-collapse: collapse; background: #fff;
    border-radius: 8px; overflow: hidden;
    border: 1px solid #e5e7eb; margin-top: 16px;
}
.data-table th, .data-table td {
    padding: 12px 14px; border-bottom: 1px solid #e5e7eb; text-align: left;
}
.data-table thead { background: #f9fafb; }
.data-table th { font-size: 0.9rem; color: #555; font-weight: 600; }
.data-table tbody tr:hover { background: #f9fafb; }
.data-table td.empty { text-align: center; padding: 40px; color: #888; }

/* ============ Badges ============ */
.badge { padding: 3px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; }
.badge-submitted { background: #dbeafe; color: #1d4ed8; }
.badge-canceled  { background: #fee2e2; color: #b91c1c; }

/* ============ Search bar ============ */
.search-bar {
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
    background: #fff; padding: 16px; border-radius: 8px; border: 1px solid #e5e7eb;
    margin: 16px 0;
}
.search-bar input, .search-bar select {
    padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.95rem;
}

/* ============ Pagination ============ */
.pagination { margin-top: 20px; text-align: center; }
.pagination a {
    display: inline-block; padding: 6px 14px; margin: 0 4px;
    background: #fff; border: 1px solid #d1d5db; border-radius: 6px;
    color: #555; text-decoration: none;
}
.pagination span { margin: 0 12px; color: #555; }

/* ============ Complete page ============ */
.complete-card {
    max-width: 600px; margin: 40px auto; background: #fff;
    padding: 48px 40px; border-radius: 12px; border: 1px solid #e5e7eb;
    text-align: center;
}
.check-icon {
    width: 80px; height: 80px; margin: 0 auto 20px;
    background: #10b981; color: #fff; border-radius: 50%;
    font-size: 48px; line-height: 80px;
}
.receipt {
    background: #f9fafb; border-radius: 8px; padding: 24px; margin: 24px 0;
    text-align: left;
}
.receipt-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed #e5e7eb; }
.receipt-row:last-child { border-bottom: none; }
.receipt-row .label { color: #888; }
.receipt-row .value { font-weight: 600; }
.receipt-row .value.password {
    font-family: monospace; font-size: 1.3rem; letter-spacing: 0.4em; color: #dc2626;
}

.alert { padding: 16px 20px; border-radius: 8px; margin: 20px 0; text-align: left; }
.alert-warning { background: #fef3c7; border: 1px solid #fbbf24; color: #92400e; }
.alert-error   { background: #fee2e2; border: 1px solid #f87171; color: #991b1b; }
.alert p { margin: 6px 0 0; font-size: 0.9rem; }

/* ============ Login ============ */
body.centered {
    display: flex; align-items: center; justify-content: center; min-height: 100vh;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
}
.login-card {
    background: #fff; padding: 40px; border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3); min-width: 360px;
}
.login-card h1 { text-align: center; margin: 0 0 24px; }

/* ============ Admin detail ============ */
.detail-card {
    background: #fff; padding: 24px; border-radius: 8px;
    border: 1px solid #e5e7eb; margin-bottom: 20px;
}
.detail-card h2 { margin: 0 0 12px; font-size: 1.1rem; }

/* ============ File drag & drop ============ */
.dropzone {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; text-align: center; cursor: pointer;
    padding: 24px 16px; border: 2px dashed #cbd5e1; border-radius: 8px;
    background: #f9fafb; color: #6b7280; font-weight: 500;
    transition: border-color .15s, background-color .15s;
}
.dropzone:hover { border-color: #93c5fd; background: #f3f6ff; }
.dropzone.dragover { border-color: #2563eb; background: #eef4ff; color: #1d4ed8; }
.dropzone input[type="file"] { display: none; }
.dropzone .dz-text { font-size: 0.95rem; }
.dropzone .dz-text b { color: #2563eb; }
.dropzone .dz-file { font-size: 0.9rem; font-weight: 600; color: #111827; word-break: break-all; }
.dropzone.has-file { border-style: solid; border-color: #10b981; background: #ecfdf5; }
.dropzone.has-file .dz-text { color: #059669; }

/* ============ Print ============ */
@media print {
    .site-header, .site-footer, .form-actions, .alert { display: none !important; }
    body { background: #fff; }
    .complete-card { box-shadow: none; border: 2px solid #000; }
}