:root {
    font-family: Arial, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    color: #24232a;
    background: #faf8fb
}

* {
    box-sizing: border-box
}

body {
    margin: 0
}

main {
    padding: 32px 24px;
    max-width: 1700px;
    margin: auto
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 20px
}

h1 {
    font-size: 32px;
    margin: 6px 0
}

.eyebrow {
    letter-spacing: 2px;
    font-size: 11px;
    color: #9a7194;
    font-weight: 700
}

.subtitle,
.hint {
    color: #77717b;
    font-size: 13px
}

.actions,
.dialog-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

button {
    border: 0;
    border-radius: 10px;
    background: #6d4d70;
    color: white;
    padding: 11px 16px;
    font-weight: 700;
    cursor: pointer
}

button:hover {
    filter: brightness(.94)
}

button.secondary {
    background: #eee7ef;
    color: #5c4860
}

.notice {
    font-size: 12px;
    color: #856d83;
    background: #f3edf3;
    padding: 12px;
    border-radius: 9px
}

.table-wrap {
    overflow: auto;
    background: white;
    border: 1px solid #e7e0e8;
    border-radius: 14px;
    padding: 12px
}

table {
    border-collapse: separate;
    border-spacing: 5px;
    table-layout: fixed
}

th,
td {
    width: 88px;
    min-width: 88px;
    height: 88px;
    text-align: center;
    border-radius: 8px;
    overflow: hidden
}

thead th {
    height: 76px;
    background: #eae1ec;
    padding: 8px;
    font-size: 12px;
    word-break: keep-all
}

th.corner {
    min-width: 120px;
    width: 120px;
    background: #ded1e2
}

tbody th {
    min-width: 120px;
    width: 120px;
    background: #f0eaf1;
    padding: 5px;
    font-size: 12px
}

.profile-photo,
.member-photo {
    display: block;
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 50%;
    margin: 0 auto 5px
}

.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ded6e0;
    color: #8c7c8d;
    font-size: 24px
}

.cell {
    width: 88px;
    height: 88px;
    background: #f7f3f8;
    border: 1px dashed #e3dbe5;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px
}

.cell img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.cell .empty {
    font-size: 23px;
    color: #c2b5c4
}

.cell .none {
    font-size: 13px;
    color: #8d7e90
}

.cell .initial {
    font-size: 11px;
    color: #6c526e;
    line-height: 1.5;
    padding: 5px
}

.cell:hover {
    background: #ede5ef
}

dialog {
    border: 0;
    border-radius: 18px;
    box-shadow: 0 15px 60px #251a2940;
    width: min(95vw, 570px);
    max-height: 85vh;
    padding: 0
}

dialog::backdrop {
    background: #20152588
}

.dialog-body {
    padding: 24px
}

.dialog-body h2 {
    margin: 0 0 16px;
    font-size: 22px
}

label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin: 14px 0
}

input {
    display: block;
    width: 100%;
    margin-top: 7px;
    padding: 11px;
    border: 1px solid #d8ccda;
    border-radius: 8px
}

.dialog-actions {
    justify-content: flex-end;
    margin-top: 18px
}

.member-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    max-height: 55vh;
    overflow-y: auto
}

.member-choice {
    background: #f5f0f6;
    color: #463a49;
    padding: 10px 5px;
    border-radius: 12px;
    min-width: 0
}

.member-choice .member-photo {
    width: 70px;
    height: 70px
}

.member-choice span:last-child {
    font-size: 12px;
    display: block
}

.member-choice.selected {
    outline: 3px solid #9b77a1
}

@media(max-width:600px) {
    main {
        padding: 16px 10px
    }

    h1 {
        font-size: 26px
    }

    th,
    td,
    .cell {
        min-width: 72px;
        width: 72px;
        height: 72px
    }

    thead th {
        height: 68px
    }

    th.corner,
    tbody th {
        min-width: 96px;
        width: 96px
    }

    .member-options {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

/* 참여자 이름 아래에 표시되는 수정/삭제 버튼 */
.profile-actions {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 6px;
}

.profile-actions button {
    font-size: 10px;
    padding: 4px 6px;
    border-radius: 5px;
}

.profile-edit {
    background: #8d7191;
}

.profile-delete {
    background: #b98791;
}

/* 수정/삭제 버튼을 포함하는 참여자 칸의 내용이 잘리지 않도록 조정 */
tbody th {
    height: auto;
    min-height: 88px;
    overflow: visible;
    overflow-wrap: anywhere;
}

/* ========================================
   미니멀 화이트 디자인
   ======================================== */

/* 전체 배경과 글자 */
:root {
    color: #111111;
    background: #ffffff;
}

body {
    background: #ffffff;
}

/* 전체 콘텐츠 영역 */
main {
    max-width: 1800px;
    margin: 0 auto;
    padding: 30px 24px 50px;
}

/* 제목 가운데 정렬 */
header {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    margin-bottom: 24px;
}

.title-area {
    text-align: center;
}

h1 {
    font-size: 30px;
    font-weight: 800;
    margin: 0;
    color: #111111;
}

.subtitle {
    font-size: 12px;
    color: #777777;
    margin: 7px 0 0;
}

/* 버튼 영역 */
.actions {
    display: flex;
    justify-content: center;
    gap: 8px;
}

button {
    background: #333333;
    color: #ffffff;
    border-radius: 7px;
}

button.secondary {
    background: #f2f2f2;
    color: #333333;
}

button:hover {
    filter: brightness(0.95);
}

/* 안내 문구 */
.notice {
    max-width: 650px;
    margin: 0 auto 22px;
    text-align: center;
    color: #888888;
    background: transparent;
    font-size: 11px;
    padding: 0;
}

/* 표를 가운데 배치 */
.table-wrap {
    overflow-x: auto;
    background: #ffffff;
    border: none;
    border-radius: 0;
    padding: 0;
    text-align: center;
}

table {
    margin: 0 auto;
    border-collapse: separate;
    border-spacing: 6px;
}

/* 모든 표 칸 */
th,
td {
    background: #ffffff;
    border-radius: 0;
}

/* 그룹명 */
thead th {
    background: #ffffff;
    color: #111111;
    font-size: 12px;
    font-weight: 500;
    height: 55px;
    padding: 6px 3px;
    border-radius: 0;
}

/* 왼쪽 위 제목 칸 */
th.corner {
    background: #ffffff;
    color: #888888;
    font-size: 11px;
}

/* 참여자 프로필 영역 */
tbody th {
    background: #ffffff;
    color: #111111;
    font-size: 12px;
    font-weight: 500;
    padding: 6px 3px;
}

/* 참여자 사진 */
.profile-photo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

/* 취향표 선택 칸 */
.cell {
    background: #ffffff;
    border: 1px solid transparent;
    border-radius: 7px;
}

.cell:hover {
    background: #f7f7f7;
    border-color: #eeeeee;
}

/* 선택한 멤버 사진 */
.cell img {
    border-radius: 7px;
}

/* 선택하지 않은 칸 */
.cell .empty {
    color: #dddddd;
    font-size: 18px;
}

/* 텅 표시 */
.cell .none {
    color: #111111;
    font-size: 22px;
    font-weight: 800;
}

/* 사진이 아직 없는 멤버 */
.cell .initial {
    color: #aaaaaa;
    font-size: 20px;
}

/* 프로필 수정/삭제 버튼 */
.profile-actions button {
    background: #f1f1f1;
    color: #555555;
    font-weight: 500;
}

.profile-actions .profile-delete {
    background: #f8f8f8;
    color: #888888;
}

/* 팝업창 */
dialog {
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 12px;
    box-shadow: 0 12px 40px #00000018;
}

dialog::backdrop {
    background: #00000055;
}

.member-choice {
    background: #f8f8f8;
    color: #222222;
}

.member-choice.selected {
    outline: 2px solid #777777;
}

/* 기본 프로필 이미지 */
.placeholder {
    background: #f2f2f2;
    color: #aaaaaa;
}

/* 모바일 */
@media (max-width: 600px) {
    main {
        padding: 20px 10px 35px;
    }

    h1 {
        font-size: 26px;
    }

    header {
        gap: 12px;
    }

    table {
        border-spacing: 4px;
    }

    .cell .none {
        font-size: 18px;
    }
}

/* ========================================
   모바일 취향표 비율 유지 + 가로 스크롤
   ======================================== */

@media (max-width: 600px) {

    /* 표를 감싸는 영역에서만 가로 스크롤 */
    .table-wrap {
        width: 100%;
        max-height: 70vh;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 표가 모바일 화면에 맞춰 찌그러지지 않도록 */
    #chart {
        width: max-content;
        min-width: max-content;
        margin: 0 auto;
        table-layout: fixed;
        border-spacing: 6px;
    }

    /* 모든 칸을 PC와 동일한 크기로 고정 */
    #chart th,
    #chart td {
        width: 88px;
        min-width: 88px;
        height: 88px;
    }

    /* 그룹명 높이 유지 */
    #chart thead th {
        height: 76px;
    }

    /* 참여자 영역 너비 유지 */
    #chart th.corner,
    #chart tbody th {
        width: 120px;
        min-width: 120px;
    }

    /* 최애 선택 칸도 PC와 동일하게 */
    #chart .cell {
        width: 88px;
        min-width: 88px;
        height: 88px;
    }

    /* 모바일에서도 사진 크기 유지 */
    #chart .profile-photo {
        width: 48px;
        height: 48px;
    }

    /* '텅' 글씨 크기 유지 */
    #chart .cell .none {
        font-size: 22px;
    }
}

/* ========================================
   모바일 취향표 그룹명 상단 고정
   ======================================== */

@media (max-width: 600px) {

    /* 가로·세로 스크롤 영역 */
    .table-wrap {
        width: 100%;
        max-height: 70vh;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 그룹명 행을 스크롤 영역 상단에 고정 */
    #chart thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        background: #ffffff;
    }

    /* 왼쪽 위 '참여자 / 아이돌' 칸 */
    #chart thead th.corner {
        z-index: 3;
    }
}

/* ========================================
   멤버 선택 팝업 — 컴팩트 미니멀 디자인
   ======================================== */

#member-dialog {
    width: min(92vw, 460px);
    max-height: 85vh;
    border-radius: 14px;
}

#member-dialog .dialog-body {
    padding: 22px;
}

#member-dialog h2 {
    font-size: 18px;
    margin-bottom: 16px;
    font-weight: 700;
}

#member-dialog .member-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    max-height: 55vh;
    overflow-y: auto;
}

#member-dialog .member-choice {
    padding: 12px 6px;
    border-radius: 10px;
    background: #f7f7f7;
}

#member-dialog .member-choice .member-photo {
    width: 58px;
    height: 58px;
    margin-bottom: 7px;
}

#member-dialog .member-choice span:last-child {
    font-size: 12px;
}

#member-dialog .dialog-actions {
    margin-top: 14px;
}

#member-dialog .dialog-actions button {
    padding: 9px 14px;
    font-size: 12px;
}

/* 선택된 멤버 카드 테두리 */
#member-dialog .member-choice.selected {
    outline: none;
    border: 2px solid #777777;
    background: #ffffff;
}

/* 선택 여부와 관계없이 카드 크기 유지 */
#member-dialog .member-choice {
    border: 2px solid transparent;
}

html,
body {
    background-color: #ffffff;
}

/* 멤버 선택 팝업의 '텅' 표시 */
#member-dialog .empty-choice-text {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 800;
    color: #111111;
    background: transparent;
    border-radius: 0;
    margin: 0 auto 7px;
}

/* '텅' 선택지: 글자 하나만 정중앙에 표시 */
#member-dialog .member-choice:has(.empty-choice-text) {
    display: flex;
    align-items: center;
    justify-content: center;
}

#member-dialog .empty-choice-text {
    width: 100%;
    height: auto;
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    color: #111111;
    background: transparent;
    border-radius: 0;
}

/* 모바일 취향표 가로 스크롤 */
@media (max-width: 600px) {
    .table-wrap {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #chart {
        width: max-content;
        min-width: 100%;
    }

    #chart th,
    #chart td {
        white-space: nowrap;
    }
}

/* ========================================
   모바일 팝업 최적화
   ======================================== */

@media (max-width: 600px) {

    /* 모든 팝업이 모바일 화면 안에 들어오도록 */
    dialog {
        width: calc(100% - 24px);
        max-width: 460px;
        max-height: 85dvh;
        overflow-y: auto;
    }

    /* 참여자 추가·수정 팝업 */
    .dialog-body {
        padding: 18px;
    }

    .dialog-body h2 {
        font-size: 18px;
    }

    /* 멤버 선택 팝업 */
    #member-dialog {
        width: calc(100% - 24px);
        max-width: 460px;
        max-height: 85dvh;
    }

    #member-dialog .dialog-body {
        padding: 16px;
    }

    #member-dialog .member-options {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
        max-height: 55dvh;
        overflow-y: auto;
    }

    #member-dialog .member-choice {
        padding: 10px 4px;
    }

    #member-dialog .member-choice .member-photo {
        width: 54px;
        height: 54px;
    }

    #member-dialog .dialog-actions button {
        min-height: 40px;
    }
}

/* 제목, 아이디, 버튼 간격 조정 */

/* 제목과 아이디 사이 */
.title-area .subtitle {
    margin-top: 5px;
}

/* 제목 영역과 버튼 사이 */
header {
    gap: 22px;
}

/* 멤버 선택 카드: 모바일에서도 깔끔한 회색 테두리 */
#member-dialog .member-choice {
    border: 2px solid transparent;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
}

#member-dialog .member-choice.selected {
    border: 2px solid #777777;
    outline: none;
    background: #ffffff;
}

#member-dialog .member-choice:focus,
#member-dialog .member-choice:focus-visible {
    outline: none;
}

/* 선택 여부에 따라 카드 크기가 달라지지 않도록 */
#member-dialog .member-choice {
    box-sizing: border-box;
}

/* 프로필 사진 삭제 옵션 */
#remove-photo-label {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    width: fit-content;
    margin: 0;
    padding: 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    cursor: pointer;
}

#remove-photo-label span {
    font-size: inherit;
    font-weight: 400;
}

#remove-photo-label input[type="checkbox"] {
    appearance: auto;
    display: inline-block;
    width: 14px;
    height: 14px;
    min-width: 14px;
    margin: 0;
    padding: 0;
    flex: none;
    accent-color: #555;
    transform: translateY(2px);
}

/* 모바일에서만 체크박스 높이 조정 */
@media (max-width: 600px) {
    #remove-photo-label input[type="checkbox"] {
        transform: translateY(0px);
    }
}

/* 모바일 취향표: 참여자 열 왼쪽 고정 */
@media (max-width: 600px) {

    /* 참여자 이름과 프로필 사진 고정 */
    #chart tbody th {
        position: sticky;
        left: 0;
        z-index: 2;
        background: #ffffff;
    }

    /* 왼쪽 위 모서리 칸은 가장 위에 표시 */
    #chart thead th.corner {
        position: sticky;
        top: 0;
        left: 0;
        z-index: 4;
        background: #ffffff;
    }
}