@charset "UTF-8";
/**
 * Ggomda Template Header Styles
 * 공통 헤더, 버튼, 토스트, 모달 스타일
 * Version: 1.0.0
 */

/* ============================================
   PLANNER COMMON BUTTONS (통일된 저장/히스토리 버튼)
   ============================================ */
.planner-save-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--accent-dark-green);
    color: white;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow);
    transition: var(--transition-fast);
    padding: 0;
    position: relative;
}

.planner-save-btn:hover {
    opacity: 0.9;
    transform: scale(1.05);
}

.planner-save-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    display: block;
    flex-shrink: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.planner-history-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--card-bg);
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow);
    transition: var(--transition-fast);
    padding: 0;
    position: relative;
}

.planner-history-btn:hover {
    background: var(--light-grey);
    color: var(--text-primary);
}

.planner-history-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    display: block;
    flex-shrink: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 단축 URL 공유 버튼 */
.planner-share-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--accent-blue);
    color: white;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow);
    transition: var(--transition-fast);
    padding: 0;
    position: relative;
}

.planner-share-btn:hover {
    opacity: 0.9;
    transform: scale(1.05);
}

.planner-share-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    display: block;
    flex-shrink: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 플래너 공통 헤더 액션 영역 */
.planner-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 0;
}

/* ============================================
   PLANNER TOAST MESSAGE (저장 완료 알림)
   ============================================ */
.planner-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    background: rgba(40, 40, 40, 0.95);
    color: white;
    padding: 16px 28px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 500;
    z-index: var(--z-toast);
    opacity: 0;
    transition: all 0.3s ease;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.planner-toast.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.planner-toast .toast-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--accent-green);
    color: white;
    border-radius: 50%;
    font-size: 14px;
    font-weight: bold;
}

.planner-toast .toast-message {
    white-space: nowrap;
}

/* ============================================
   PLANNER GLOBAL STYLES
   모든 플래너 템플릿에서 공통으로 사용하는 헤더 스타일
   레이아웃: layout-simple, layout-standard, layout-complex
   ============================================ */

/* 1. 글로벌 제목 스타일 */
.planner-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-color);
    margin: 0;
}

.planner-title[contenteditable="true"] {
    cursor: text;
    outline: none;
    border-bottom: 2px solid transparent;
    padding-bottom: 4px;
    transition: border-color 0.2s ease;
    min-width: 100px;
}

.planner-title[contenteditable="true"]:hover {
    border-color: var(--accent-light-green);
}

.planner-title[contenteditable="true"]:focus {
    border-color: var(--accent-dark-green);
}

/* 2. 글로벌 네비게이션 스타일 */
.planner-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.planner-nav-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: var(--light-grey);
    border-radius: 50%;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
    color: var(--text-muted);
}

.planner-nav-btn:hover {
    background: var(--border-color);
    color: var(--text-color);
}

.planner-nav-display {
    font-size: var(--font-size-md);
    font-weight: 500;
    color: var(--text-color);
    min-width: 120px;
    text-align: center;
}

/* 3. 글로벌 뷰 탭 스타일 */
.planner-view-tabs {
    display: flex;
    gap: 4px;
    background: var(--border-color);
    padding: 4px;
    border-radius: 10px;
}

.planner-view-tab {
    background: transparent;
    border: none;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
}

.planner-view-tab:hover {
    color: var(--text-color);
}

.planner-view-tab.active {
    background: #fff;
    color: var(--accent-dark-green);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* 4. Today 버튼 스타일 */
.planner-today-btn {
    background: var(--accent-dark-green);
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.planner-today-btn:hover {
    background: var(--accent-olive);
}

/* 5. 글로벌 헤더 레이아웃 */
.planner-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg) var(--space-xl);
    gap: 20px;
    flex-wrap: wrap;
}

/* layout-simple: 1행 (제목/날짜 + 액션버튼) */
.planner-header.layout-simple {
    padding: 10px 25px;
}

/* layout-standard: 2행 (제목+네비게이션 / 액션버튼) */
.planner-header.layout-standard .planner-header-left {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* layout-complex: 3행 (제목+뷰탭 / 날짜네비 / Today+액션) */
.planner-header.layout-complex {
    flex-wrap: wrap;
}

.planner-header.layout-complex .planner-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.planner-header.layout-complex .planner-header-center {
    display: flex;
    align-items: center;
    gap: 12px;
}

.planner-header.layout-complex .planner-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 반응형 */
@media (max-width: 768px) {
    .planner-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .planner-header.layout-complex .planner-header-center {
        width: 100%;
        justify-content: center;
    }
    
    .planner-header.layout-complex .planner-header-right {
        width: 100%;
        justify-content: flex-end;
    }
}

.thumbnail-preview {
    width: 100%;
    height: 120px;
    border: 2px dashed var(--light-grey);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    overflow: hidden;
}

.thumbnail-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.thumbnail-placeholder {
    color: var(--text-muted);
    font-size: 13px;
}

.btn-upload {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 8px;
    background: var(--light-grey);
    color: var(--text-main);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-upload:hover {
    background: var(--border-color);
}

.link-url-preview {
    margin-top: 16px;
}

.short-url-display {
    padding: 12px;
    background: var(--light-grey);
    border-radius: 10px;
    font-size: 13px;
    color: var(--accent-blue);
    word-break: break-all;
}

/* Square 섹션 */
.square-section {
    margin-top: 20px;
}

.square-divider {
    height: 1px;
    background: var(--light-grey);
    margin-bottom: 16px;
}

.square-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin: 8px 0 16px;
}

.square-details {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.square-status {
    padding: 12px;
    border-radius: 10px;
    background: var(--light-grey);
}

.square-status-badge {
    font-size: 13px;
    font-weight: 500;
}

.square-reject-reason {
    padding: 12px;
    background: #fff3f3;
    border-radius: 10px;
    color: #d32f2f;
    font-size: 13px;
}

.gallery-preview {
    border: 2px dashed var(--light-grey);
    border-radius: 10px;
    padding: 12px;
}

.gallery-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.gallery-item {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
}

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

.gallery-item .remove-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    color: white;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-add-gallery {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 8px;
    background: var(--light-grey);
    color: var(--text-main);
    font-size: 13px;
    cursor: pointer;
}

.dotori-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dotori-input-wrap input {
    flex: 1;
}

.dotori-unit {
    font-size: 14px;
    color: var(--text-muted);
}

.btn-square-register {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 12px;
    background: var(--accent-blue);
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}

.btn-square-register:hover {
    opacity: 0.9;
}

/* Square 헤더 배지 */
.square-header-badge {
    display: inline-block;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 4px;
}

.square-header-badge.pending {
    background: #fff3cd;
    color: #856404;
}

.square-header-badge.approved {
    background: #d4edda;
    color: #155724;
}

.square-header-badge.rejected {
    background: #f8d7da;
    color: #721c24;
}

/* 읽기 전용 배지 */
.readonly-badge,
.header-readonly-badge {
    font-size: 12px;
    padding: 4px 10px;
    background: var(--light-grey);
    color: var(--text-muted);
    border-radius: 6px;
    font-weight: 500;
}

/* ============================================
   HEADER CAPACITY (용량 + 체크율 표시)
   ============================================ */
.header-capacity {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted, #9a9a9a);
    cursor: pointer;
    transition: opacity 0.2s;
}

.header-capacity:hover {
    opacity: 0.7;
}

.header-capacity svg {
    flex-shrink: 0;
    color: inherit;
}

.header-capacity .capacity-icon,
.header-capacity .check-icon {
    width: 14px;
    height: 14px;
}

.header-capacity .capacity-percent,
.header-capacity .capacity-bytes {
    font-weight: 500;
    color: inherit;
}

.header-capacity .capacity-bytes .check-count {
    font-size: 0.85em;
    margin-left: 2px;
    opacity: 0.8;
}

.header-capacity.warning {
    color: #f0ad4e;
}

.header-capacity.warning .capacity-percent {
    color: #f0ad4e;
}

.header-capacity.danger {
    color: #d9534f;
}

.header-capacity.danger .capacity-percent {
    color: #d9534f;
}

/* ============================================
   HEADER TITLE GROUP (제목 + 팀 배지 묶음)
   ============================================ */
.header-title-group {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* ============================================
   TEAM BADGE (팀 모드 배지)
   ============================================ */
.team-badge-header {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(108, 165, 135, 0.15);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    color: var(--accent-dark-green, #6CA587);
    vertical-align: middle;
    flex-shrink: 0;
}

.team-badge-header svg {
    width: 14px;
    height: 14px;
}

/* ============================================
   GEOCODE CONVERT SYSTEM (주소→좌표 변환)
   ============================================ */

.geocode-convert-btn {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: var(--z-dropdown);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: white;
    border: none;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: #333;
    transition: background 0.2s, box-shadow 0.2s;
}

.geocode-convert-btn:hover {
    background: #f5f5f5;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}

.geocode-convert-btn:active {
    background: #eee;
}

.geocode-convert-btn svg {
    flex-shrink: 0;
    color: var(--accent-dark-green, #2d6a4f);
}

@media (max-width: 768px) {
    .geocode-convert-btn span {
        display: none;
    }

    .geocode-convert-btn {
        padding: 8px;
    }
}