/* ============================================
   GG-MODAL.CSS - 꼼다 통합 모달 시스템
   v2.2.0 | 모달 스타일 가이드 v2.2 기반
   ============================================ */

/* ─── Keyframes ─── */
@keyframes ggmSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ─── A1: Overlay ─── */
.modal-a1 {
    position: fixed;
    inset: 0;
    /* z-index는 JS에서 inline style로 제어 */
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.modal-a1.active {
    opacity: 1;
}

.modal-a1.closing {
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

/* 바텀시트 오버레이 정렬 */
.modal-a1.modal-a1--bottom {
    align-items: flex-end;
}

/* ─── A2: Panel (공통) ─── */
.modal-a2 {
    background: var(--g-card-bg, #fff);
    border-radius: 16px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    position: relative;
    opacity: 0;
}

.modal-a1.active .modal-a2 {
    opacity: 1;
}

.modal-a1.closing .modal-a2 {
    opacity: 0;
}

/* ─── Panel: Center (기본) ─── */
.modal-a2.center {
    width: 90%;
    max-width: 480px;
    transform: translateY(20px);
    transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1),
                opacity 0.2s ease-out;
}

.modal-a1.active .modal-a2.center {
    transform: translateY(0);
}

.modal-a1.closing .modal-a2.center {
    transform: translateY(10px);
    transition: transform 0.15s ease-in,
                opacity 0.15s ease-in;
}

/* ─── Panel: Wide ─── */
.modal-a2.wide {
    width: 90%;
    max-width: 640px;
    transform: translateY(20px);
    transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1),
                opacity 0.2s ease-out;
}

.modal-a1.active .modal-a2.wide {
    transform: translateY(0);
}

.modal-a1.closing .modal-a2.wide {
    transform: translateY(10px);
    transition: transform 0.15s ease-in,
                opacity 0.15s ease-in;
}

/* ─── Panel: Compact ─── */
.modal-a2.compact {
    width: 85%;
    max-width: 320px;
    transform: translateY(20px);
    transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1),
                opacity 0.2s ease-out;
}

.modal-a1.active .modal-a2.compact {
    transform: translateY(0);
}

.modal-a1.closing .modal-a2.compact {
    transform: translateY(10px);
    transition: transform 0.15s ease-in,
                opacity 0.15s ease-in;
}

/* ─── Panel: Bottom Sheet ─── */
.modal-a2.bottom {
    width: 100%;
    max-width: 100%;
    border-radius: 16px 16px 0 0;
    max-height: 90vh;
    transform: translateY(100%);
    opacity: 1;
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.modal-a1.active .modal-a2.bottom {
    transform: translateY(0);
}

.modal-a1.closing .modal-a2.bottom {
    transform: translateY(100%);
    transition: transform 0.2s ease-in;
}

/* 드래그 핸들 */
.modal-drag-handle {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--g-border-default, #D9D6CC);
    margin: 8px auto 0;
    flex-shrink: 0;
    position: relative;
    transition: background 0.2s ease;
}

/* 터치 영역 확장 (시각 크기 유지, 터치 타겟 44px 이상) */
.modal-drag-handle::before {
    content: '';
    position: absolute;
    top: -20px;
    bottom: -20px;
    left: -30px;
    right: -30px;
}

/* ─── B1: Header ─── */
.modal-b1 {
    padding: 20px 20px 12px;
    border-bottom: 1px solid var(--g-border-light, #E8E5DC);
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.modal-b1 .modal-title {
    font-size: var(--fs-lg, 18px);
    font-weight: var(--fw-bold, 700);
    color: var(--g-text-primary, #333);
    margin: 0;
    line-height: 1.4;
}

.modal-b1 .modal-desc {
    font-size: var(--fs-sm, 13px);
    color: var(--g-text-muted, #888);
    margin: 4px 0 0;
    line-height: 1.5;
}

/* ─── B2: Body ─── */
.modal-b2 {
    padding: 16px 20px;
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* ─── B3: Footer ─── */
.modal-b3 {
    padding: 12px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-shrink: 0;
    border-top: 1px solid var(--g-border-light, #E8E5DC);
}

/* ─── Button Styles ─── */
.modal-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: var(--fs-md, 14px);
    font-weight: var(--fw-sb, 600);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
    font-family: inherit;
    line-height: 1.4;
    min-width: 80px;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}

.modal-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Primary */
.modal-btn.primary {
    background: var(--g-accent, #8BA86E);
    color: #fff;
}

.modal-btn.primary:hover:not(:disabled) {
    background: var(--g-accent-dark, #7E9B63);
}

/* Secondary */
.modal-btn.secondary {
    background: var(--g-inactive-bg, #F4F6F1);
    color: var(--g-text-secondary, #555);
    border: 1px solid var(--g-border-default, #D9D6CC);
}

.modal-btn.secondary:hover:not(:disabled) {
    background: #E8EBE3;
    color: var(--g-text-primary, #333);
}

/* Danger */
.modal-btn.danger {
    background: #fff;
    color: #E57373;
    border: 1px solid #E57373;
}

.modal-btn.danger:hover:not(:disabled) {
    background: #FFF5F5;
    color: #D32F2F;
    border-color: #D32F2F;
}

/* ─── C1: Field Group (기본 1행 = row) ─── */
.modal-c1 {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.modal-c1:last-child {
    margin-bottom: 0;
}

.modal-c1 .field-label,
.modal-c1 > label {
    flex-shrink: 0;
    min-width: 80px;
    font-size: var(--fs-sm, 13px);
    font-weight: var(--fw-sb, 600);
    color: var(--g-text-secondary, #555);
    white-space: nowrap;
}

.modal-c1 input,
.modal-c1 select {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--g-border-default, #D9D6CC);
    border-radius: 8px;
    font-size: var(--fs-md, 14px);
    font-family: inherit;
    background: var(--g-card-bg, #fff);
    color: var(--g-text-primary, #333);
    box-sizing: border-box;
    transition: border-color 0.2s;
    outline: none;
    text-align: left;
}

.modal-c1 input[type="date"] {
    flex: 0 0 auto;
    text-align: left;
    -webkit-appearance: none;
    appearance: none;
}

.modal-c1 input:focus,
.modal-c1 select:focus {
    border-color: var(--g-accent, #8BA86E);
    box-shadow: 0 0 0 2px rgba(139, 168, 110, 0.15);
}

.modal-c1 .field-help {
    flex-shrink: 0;
    font-size: var(--fs-xs, 11px);
    color: var(--g-text-muted, #888);
}

.modal-c1 .field-error {
    flex-shrink: 0;
    font-size: var(--fs-xs, 11px);
    color: #E57373;
}

/* 에러 상태 input */
.modal-c1.has-error input,
.modal-c1.has-error select,
.modal-c1.has-error textarea {
    border-color: #E57373;
}

.modal-c1.has-error input:focus,
.modal-c1.has-error select:focus,
.modal-c1.has-error textarea:focus {
    box-shadow: 0 0 0 2px rgba(229, 115, 115, 0.15);
}

/* ─── 요일 원형 체크 (weekplan 모달) ─── */
.modal-day-checkboxes {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.modal-day-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.modal-day-circle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.modal-day-circle span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: var(--g-page-bg, #F5F3EE);
    border: 1.5px solid var(--g-border-default, #D9D6CC);
    border-radius: 50%;
    font-size: var(--fs-sm, 13px);
    font-weight: 600;
    color: #999;
    transition: all 0.15s ease;
    user-select: none;
}

.modal-day-circle.all span {
    width: auto;
    min-width: 34px;
    padding: 0 10px;
    border-radius: 17px;
    font-size: var(--fs-xs, 11px);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.modal-day-circle:hover span {
    border-color: var(--g-accent, #8BA86E);
    color: var(--g-accent, #8BA86E);
}

.modal-day-circle input:checked + span {
    background: var(--g-accent, #8BA86E);
    border-color: var(--g-accent, #8BA86E);
    color: var(--g-text-inverted, #fff);
    font-weight: 600;
}

.modal-day-circle.sun span {
    color: #E57373;
}

.modal-day-circle.sun:hover span {
    border-color: #E57373;
    color: #E57373;
}

.modal-day-circle.sun input:checked + span {
    background: #E57373;
    border-color: #E57373;
    color: var(--g-text-inverted, #fff);
}

.modal-day-circle.sat span {
    color: #64B5F6;
}

.modal-day-circle.sat:hover span {
    border-color: #64B5F6;
    color: #64B5F6;
}

.modal-day-circle.sat input:checked + span {
    background: #64B5F6;
    border-color: #64B5F6;
    color: var(--g-text-inverted, #fff);
}

/* ─── C1 Block: 2행 변형 (textarea, 복합 위젯) ─── */
.modal-c1.c1-block {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

.modal-c1.c1-block .field-label,
.modal-c1.c1-block > label {
    min-width: unset;
    white-space: normal;
}

.modal-c1.c1-block textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--g-border-default, #D9D6CC);
    border-radius: 8px;
    font-size: var(--fs-md, 14px);
    font-family: inherit;
    background: var(--g-card-bg, #fff);
    color: var(--g-text-primary, #333);
    box-sizing: border-box;
    transition: border-color 0.2s;
    outline: none;
    min-height: 80px;
    resize: vertical;
}

.modal-c1.c1-block textarea:focus {
    border-color: var(--g-accent, #8BA86E);
    box-shadow: 0 0 0 2px rgba(139, 168, 110, 0.15);
}

/* ─── C1 Wrap: row + 하위 d1 줄바꿈 ─── */
.modal-c1.c1-wrap {
    flex-wrap: wrap;
}

.modal-c1.c1-wrap > .modal-d1 {
    flex-basis: 100%;
    margin-top: 4px;
}

.modal-c1.c1-wrap > .modal-d1:empty {
    display: none;
}

/* ─── C2: Inline Action Row (body 직접 하위) ─── */
/* label + input + button 한 줄 배치. 태그 생성, 짧은 카테고리 입력 등 */
.modal-c2 {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
}

.modal-c2:last-child {
    margin-bottom: 0;
}

.modal-c2 .c2-label {
    flex-shrink: 0;
    min-width: 60px;
    font-size: var(--fs-sm, 13px);
    color: var(--g-text-secondary, #555);
}

.modal-c2 .c2-input {
    flex: 1;
}

.modal-c2 .c2-input input,
.modal-c2 .c2-input select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--g-border-default, #D9D6CC);
    border-radius: 8px;
    font-size: var(--fs-md, 14px);
    font-family: inherit;
    background: var(--g-card-bg, #fff);
    color: var(--g-text-primary, #333);
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s;
}

.modal-c2 .c2-input input:focus,
.modal-c2 .c2-input select:focus {
    border-color: var(--g-accent, #8BA86E);
    box-shadow: 0 0 0 2px rgba(139, 168, 110, 0.15);
}

.modal-c2 .c2-action {
    flex-shrink: 0;
}

.modal-c2 .c2-action button {
    padding: 8px 12px;
    border: 1px solid var(--g-border-default, #D9D6CC);
    border-radius: 8px;
    background: var(--g-inactive-bg, #F4F6F1);
    font-size: var(--fs-sm, 13px);
    font-family: inherit;
    cursor: pointer;
    color: var(--g-text-secondary, #555);
    transition: background 0.15s;
    white-space: nowrap;
}

.modal-c2 .c2-action button:hover {
    background: var(--g-border-light, #E8E5DC);
}

/* ─── D1: Inline Sub Action Row (c1/c3 내부 전용) ─── */
/* input + button 보조 행. 상위 c1 또는 c3 내부에서만 사용 */
.modal-d1 {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
}

.modal-d1 input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--g-border-default, #D9D6CC);
    border-radius: 8px;
    font-size: var(--fs-md, 14px);
    font-family: inherit;
    background: var(--g-card-bg, #fff);
    color: var(--g-text-primary, #333);
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s;
}

.modal-d1 input:focus {
    border-color: var(--g-accent, #8BA86E);
    box-shadow: 0 0 0 2px rgba(139, 168, 110, 0.15);
}

.modal-d1 button {
    flex-shrink: 0;
    padding: 8px 12px;
    border: 1px solid var(--g-border-default, #D9D6CC);
    border-radius: 8px;
    background: var(--g-inactive-bg, #F4F6F1);
    font-size: var(--fs-sm, 13px);
    font-family: inherit;
    cursor: pointer;
    color: var(--g-text-secondary, #555);
    transition: background 0.15s;
    white-space: nowrap;
}

.modal-d1 button:hover {
    background: var(--g-border-light, #E8E5DC);
}

/* ─── E1: Selectable Item (d1/c3 내부 단위 항목) ─── */
/* checkbox/radio + label 한 쌍. d1 또는 c3 내부에서 사용 */
.modal-e1 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    cursor: pointer;
    font-size: var(--fs-sm, 13px);
    border-radius: 4px;
    transition: background 0.12s;
}

.modal-e1:hover {
    background: var(--green-bg-soft, #F0F5EB);
}

.modal-e1 input[type="checkbox"],
.modal-e1 input[type="radio"] {
    flex: none;
    accent-color: var(--g-accent, #8BA86E);
    width: 16px;
    height: 16px;
    margin: 0;
}

/* ─── C3: List Group ─── */
.modal-c3 {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.modal-c3 .list-label {
    font-size: var(--fs-sm, 13px);
    font-weight: var(--fw-sb, 600);
    color: var(--g-text-secondary, #555);
    margin-bottom: 4px;
}

.modal-c3 .list-item {
    padding: 10px 12px;
    border: 1px solid var(--g-border-light, #E8E5DC);
    border-radius: 8px;
    cursor: pointer;
    font-size: var(--fs-md, 14px);
    color: var(--g-text-primary, #333);
    transition: background 0.15s, border-color 0.15s;
}

.modal-c3 .list-item:hover {
    background: var(--g-section-bg, #F9FAF7);
    border-color: var(--g-accent, #8BA86E);
}

.modal-c3 .list-item.selected {
    background: var(--green-bg-soft, #F0F5EB);
    border-color: var(--g-accent-dark, #7E9B63);
}

.modal-c3 .list-empty {
    text-align: center;
    padding: 24px;
    color: var(--g-text-muted, #888);
    font-size: var(--fs-sm, 13px);
}

.modal-c3 .list-scroll {
    max-height: 200px;
    overflow-y: auto;
    scrollbar-width: thin;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ─── State: Loading ─── */
.modal-a2.state-loading .modal-b3 .modal-btn {
    opacity: 0.5;
    pointer-events: none;
}

.modal-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
    border-radius: inherit;
}

.modal-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--g-border-light, #E8E5DC);
    border-top-color: var(--g-accent, #8BA86E);
    border-radius: 50%;
    animation: ggmSpin 0.6s linear infinite;
}

.modal-loading-text {
    font-size: var(--fs-sm, 13px);
    color: var(--g-text-muted, #888);
    margin-top: 8px;
}

/* ─── State: Success ─── */
.modal-a2.state-success .modal-b1 {
    border-bottom-color: var(--g-accent, #8BA86E);
}

/* ─── State: Error ─── */
.modal-a2.state-error .modal-b1 {
    border-bottom-color: #E57373;
}

/* ─── State: Disabled ─── */
.modal-a2.state-disabled .modal-b3 .modal-btn.primary {
    opacity: 0.5;
    pointer-events: none;
}

/* ─── Body Scroll Lock ─── */
body.gg-modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

/* ─── Bridge (deprecated): detail-field → modal-c1 마이그레이션 완료 ─── */
/* 관리자 콘솔(page-console-*.php) 호환용. 신규 코드에서는 modal-c1 사용 */
.modal-a2 .detail-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.modal-a2 .detail-field:last-child {
    margin-bottom: 0;
}

.modal-a2 .detail-field > label,
.modal-a2 .detail-field-row > div > label {
    font-size: var(--fs-sm, 13px);
    font-weight: var(--fw-sb, 600);
    color: var(--g-text-secondary, #555);
}

.modal-a2 .detail-field input[type="text"],
.modal-a2 .detail-field input[type="number"],
.modal-a2 .detail-field input[type="date"],
.modal-a2 .detail-field input[type="url"],
.modal-a2 .detail-field select,
.modal-a2 .detail-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--g-border-default, #D9D6CC);
    border-radius: 8px;
    font-size: var(--fs-md, 14px);
    font-family: inherit;
    background: var(--g-card-bg, #fff);
    color: var(--g-text-primary, #333);
    box-sizing: border-box;
    transition: border-color 0.2s;
    outline: none;
}

.modal-a2 .detail-field input:focus,
.modal-a2 .detail-field select:focus,
.modal-a2 .detail-field textarea:focus {
    border-color: var(--g-accent, #8BA86E);
    box-shadow: 0 0 0 2px rgba(139, 168, 110, 0.15);
}

.modal-a2 .detail-field textarea {
    min-height: 80px;
    resize: vertical;
}

.modal-a2 .detail-modal-content {
    display: flex;
    flex-direction: column;
}

.modal-a2 .detail-field-row {
    display: flex;
    flex-direction: row;
    gap: 12px;
}

.modal-a2 .detail-field-row > div {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.modal-a2 .detail-field-row > div input,
.modal-a2 .detail-field-row > div select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

/* input-with-unit 모바일 정렬 */
@media (max-width: 480px) {
    .modal-a2 .input-with-unit {
        flex-wrap: wrap;
    }
    .modal-a2 .detail-field-row {
        flex-direction: column;
        gap: 0;
    }
}

/* ─── Reduced Motion ─── */
@media (prefers-reduced-motion: reduce) {
    .modal-a1,
    .modal-a2,
    .modal-a2.center,
    .modal-a2.bottom,
    .modal-a2.wide,
    .modal-a2.compact,
    .modal-a1.closing,
    .modal-a1.closing .modal-a2 {
        transition-duration: 0.01s !important;
    }
}

/* ─── Variant: Memo Paper ─── */
.modal-a2.memo-paper-style {
    background: transparent;
    box-shadow: none;
    border-radius: 4px;
    max-width: 540px;
    overflow: visible;
}
.modal-a2.memo-paper-style .modal-b1 { display: none; }
.modal-a2.memo-paper-style .modal-b2 { padding: 0; }
.modal-a2.memo-paper-style .modal-b3 { display: none; }
.modal-a2.memo-paper-style .memo-paper-modal {
    min-height: 400px;
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15), inset 0 0 60px rgba(255,255,255,0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ─── Responsive: 768px ─── */
@media (max-width: 768px) {
    .modal-b1 {
        padding: 16px 16px 10px;
    }
    .modal-b2 {
        padding: 12px 16px;
    }
    .modal-b3 {
        padding: 10px 16px 16px;
    }
}

/* ─── Responsive: 480px ─── */
@media (max-width: 480px) {
    .modal-b3 {
        flex-direction: column;
    }
    .modal-b3 .modal-btn {
        width: 100%;
    }
    .modal-c2 {
        flex-wrap: wrap;
    }
    .modal-c2 .c2-label {
        width: 100%;
    }
}