/*******************************************************************************
 * 페인커 v2 — 반응형 웹 (matchpro 디자인 시스템 기반)
 * Mobile-first · Pretendard · Primary #18a8f1
 ******************************************************************************/
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

:root {
    /* ── 메인 컬러 (#18a8f1 기반) ── */
    --primary: #18a8f1;
    --primary-dark: #0d8bd4;
    --primary-light: #e8f6fe;
    --primary-50: #d0edfc;
    --primary-hover: #1299de;
    --primary-glow: rgba(24, 168, 241, 0.12);

    /* ── 보조 컬러 ── */
    --accent: #06B6D4; --accent-light: #ECFEFF;
    --success: #10B981; --success-light: #ECFDF5;
    --warning: #F59E0B; --warning-light: #FFFBEB;
    --danger: #EF4444; --danger-light: #FEF2F2;

    /* ── 텍스트 ── */
    --text-primary: #0F172A;
    --text-secondary: #475569;
    --text-tertiary: #94A3B8;
    --text-disabled: #CBD5E1;

    /* ── 배경 ── */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F8FAFC;
    --bg-tertiary: #F1F5F9;
    --bg-page: #F8FAFC;

    /* ── 보더 ── */
    --border: #E2E8F0;
    --border-light: #F1F5F9;

    /* ── 레이디어스 ── */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* ── 그림자 ── */
    --shadow-xs: 0 1px 2px rgba(15,23,42,0.04);
    --shadow-sm: 0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
    --shadow-md: 0 4px 6px -1px rgba(15,23,42,0.06), 0 2px 4px -2px rgba(15,23,42,0.04);
    --shadow-lg: 0 10px 15px -3px rgba(15,23,42,0.06), 0 4px 6px -4px rgba(15,23,42,0.03);
    --shadow-card: 0 1px 3px rgba(15,23,42,0.04), 0 1px 2px rgba(15,23,42,0.02);
    --shadow-card-hover: 0 8px 25px -5px rgba(15,23,42,0.1), 0 4px 10px -4px rgba(15,23,42,0.04);

    /* ── 레이아웃 ── */
    --header-h: 56px;
    --nav-h: 58px;
    --content-max: 640px;
    --page-max: 1080px;

    /* ── 트랜지션 ── */
    --ease-out: cubic-bezier(0.16,1,0.3,1);
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s var(--ease-out);
    --transition-slow: 0.4s var(--ease-out);
}

/* ── 리셋 ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
    font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Noto Sans KR',sans-serif;
    font-size:15px;line-height:1.6;color:var(--text-primary);
    background:var(--bg-page);-webkit-font-smoothing:antialiased;
    overflow-x:hidden;letter-spacing:-0.01em;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;border:none;outline:none;background:none}
ul,ol{list-style:none}
.hidden{display:none!important}
::selection{background:var(--primary-50);color:var(--primary-dark)}

/* ── 스크롤 히든 ── */
.scroll-h{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.scroll-h::-webkit-scrollbar{display:none}


/* ═══════════════════════════════════════
   APP CONTAINER
   ═══════════════════════════════════════ */
.pk-app{
    min-height:100vh;
    padding-top:var(--header-h);
    padding-bottom:calc(var(--nav-h) + 16px + env(safe-area-inset-bottom,0));
}
.pk-app.has-box-menu{
    padding-top:calc(var(--header-h) + 46px);
}
.pk-page{
    max-width:var(--content-max);
    margin:0 auto;
}


/* ═══════════════════════════════════════
   MOBILE HEADER
   ═══════════════════════════════════════ */
.pk-header{
    position:fixed;top:0;left:0;right:0;z-index:100;
    background:rgba(255,255,255,0.95);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(226,232,240,0.6);
}
.pk-header-inner{
    display:flex;align-items:center;justify-content:space-between;
    height:var(--header-h);padding:0 16px;
    max-width:var(--page-max);margin:0 auto;
}
.pk-header-logo{
    font-size:19px;font-weight:800;color:var(--primary);
    letter-spacing:-0.5px;display:flex;align-items:center;gap:6px;
}
.pk-header-logo img{height:32px;border-radius:8px}
.pk-header-logo span{font-weight:500;color:var(--text-secondary);font-size:17px}
.pk-header-title{
    font-size:16px;font-weight:700;
    position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;
}
.pk-header-back{
    width:40px;height:40px;display:flex;align-items:center;justify-content:center;
    border-radius:var(--radius-full);color:var(--text-primary);cursor:pointer;
}
.pk-header-actions{display:flex;gap:4px;align-items:center}
.pk-header-btn{
    width:40px;height:40px;display:flex;align-items:center;justify-content:center;
    border-radius:var(--radius-full);color:var(--text-secondary);
    transition:all var(--transition-fast);position:relative;cursor:pointer;
}
.pk-header-btn:hover{background:var(--bg-tertiary);color:var(--text-primary)}
.pk-header-btn svg{width:22px;height:22px}


/* ═══════════════════════════════════════
   BOTTOM NAV
   ═══════════════════════════════════════ */
.pk-nav{
    position:fixed;bottom:0;left:0;right:0;z-index:200;
    background:rgba(255,255,255,0.96);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-top:1px solid rgba(226,232,240,0.6);
    padding-bottom:env(safe-area-inset-bottom,0);
}
.pk-nav-inner{
    display:flex;height:var(--nav-h);
    max-width:var(--page-max);margin:0 auto;
}
.pk-nav-item{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;font-size:10px;font-weight:500;color:var(--text-tertiary);
    transition:color var(--transition-fast);position:relative;cursor:pointer;
    text-decoration:none;
}
.pk-nav-item.active{color:var(--primary);font-weight:700}
.pk-nav-item .pk-nav-icon{display:flex}
.pk-nav-item .pk-nav-icon svg{width:22px;height:22px}
.pk-nav-badge{
    position:absolute;top:2px;right:calc(50% - 24px);
    min-width:18px;height:18px;padding:0 5px;
    font-size:10px;font-weight:700;color:white;
    background:var(--danger);border-radius:var(--radius-full);
    display:flex;align-items:center;justify-content:center;line-height:1;
}
/* 센터 버튼 (견적요청 / 구인등록) */
.pk-nav-center .pk-nav-icon{
    background:var(--primary);color:white!important;
    width:42px;height:42px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    margin-top:-18px;
    box-shadow:0 4px 14px rgba(24,168,241,0.35);
}
.pk-nav-center{color:var(--primary)!important;font-weight:700!important}


/* ═══════════════════════════════════════
   SECTIONS & LAYOUT
   ═══════════════════════════════════════ */
.pk-section{padding:16px}
.pk-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.pk-section-title{font-size:18px;font-weight:800;color:var(--text-primary);letter-spacing:-0.02em}
.pk-section-more{font-size:13px;color:var(--text-tertiary);font-weight:500;transition:color var(--transition-fast)}
.pk-section-more:hover{color:var(--primary)}
.pk-divider{height:6px;background:var(--bg-tertiary)}


/* ═══════════════════════════════════════
   BANNER
   ═══════════════════════════════════════ */
.pk-banner-wrap{position:relative;padding:12px 16px}
.pk-banner{
    border-radius:var(--radius-xl);padding:24px 20px;color:white;
    position:relative;overflow:hidden;min-height:120px;
    background:linear-gradient(135deg, var(--primary), var(--primary-dark));
}
.pk-banner::after{
    content:'';position:absolute;right:-30px;top:-30px;
    width:160px;height:160px;background:rgba(255,255,255,0.08);border-radius:50%;
}
.pk-banner-tag{
    display:inline-block;padding:4px 12px;font-size:11px;font-weight:700;
    background:rgba(255,255,255,0.2);backdrop-filter:blur(4px);
    border-radius:var(--radius-full);margin-bottom:12px;width:fit-content;
}
.pk-banner-title{font-size:22px;font-weight:800;line-height:1.3;margin-bottom:6px;letter-spacing:-0.02em}
.pk-banner-desc{font-size:14px;opacity:0.85;font-weight:400}


/* ═══════════════════════════════════════
   CARDS
   ═══════════════════════════════════════ */
.pk-card{
    background:var(--bg-primary);border-radius:var(--radius-lg);overflow:hidden;
    box-shadow:var(--shadow-card);transition:all var(--transition-normal);
}
.pk-card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-2px)}
.pk-card-body{padding:16px}

/* ── 리스트 아이템 카드 (견적요청, 구인 등) ── */
.pk-list-card{
    display:block;padding:16px;background:var(--bg-primary);
    border-bottom:1px solid var(--border-light);transition:all var(--transition-normal);
    text-decoration:none;color:inherit;
}
.pk-list-card:hover{background:var(--bg-secondary)}
.pk-list-card + .pk-list-card{border-top:none}

.pk-list-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.pk-list-avatar{
    width:42px;height:42px;border-radius:var(--radius-md);
    display:flex;align-items:center;justify-content:center;
    font-weight:700;font-size:14px;flex-shrink:0;
    background:var(--primary);color:white;
}
.pk-list-avatar.closed{background:var(--text-disabled)}
.pk-list-title{font-size:15px;font-weight:700;line-height:1.4;letter-spacing:-0.01em}
.pk-list-sub{font-size:12px;color:var(--text-tertiary);margin-top:2px}

.pk-list-info{display:flex;align-items:center;gap:6px;margin-bottom:6px;font-size:13px;color:var(--text-secondary)}
.pk-list-info svg{width:14px;height:14px;color:var(--text-disabled);flex-shrink:0}

.pk-list-footer{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}


/* ═══════════════════════════════════════
   STATUS BADGE / CHIP / TAG
   ═══════════════════════════════════════ */
.pk-badge{
    display:inline-flex;align-items:center;padding:3px 10px;
    font-size:11px;font-weight:700;border-radius:var(--radius-full);letter-spacing:0.2px;
}
.pk-badge-open{background:var(--warning-light);color:#B45309}
.pk-badge-progress{background:#EFF6FF;color:#1D4ED8}
.pk-badge-complete{background:var(--bg-tertiary);color:var(--text-tertiary)}
.pk-badge-closed{background:var(--bg-tertiary);color:var(--text-disabled)}
.pk-badge-danger{background:var(--danger-light);color:var(--danger)}

.pk-chip{
    display:inline-flex;align-items:center;padding:5px 12px;
    font-size:12px;font-weight:600;color:var(--text-secondary);
    background:var(--bg-tertiary);border-radius:var(--radius-full);
    white-space:nowrap;
}
.pk-chip-primary{background:var(--primary-light);color:var(--primary)}
.pk-chip-success{background:var(--success-light);color:#047857}
.pk-chip-warning{background:var(--warning-light);color:#B45309}


/* ═══════════════════════════════════════
   TABS
   ═══════════════════════════════════════ */
.pk-tabs{
    display:flex;background:var(--bg-primary);
    border-bottom:1px solid var(--border-light);
    overflow-x:auto;scrollbar-width:none;
}
.pk-tabs::-webkit-scrollbar{display:none}
.pk-tab{
    flex:1;text-align:center;padding:14px 12px;font-size:14px;font-weight:600;
    color:var(--text-tertiary);cursor:pointer;
    border-bottom:2.5px solid transparent;transition:all var(--transition-fast);
    white-space:nowrap;
}
.pk-tab.active{color:var(--primary);border-bottom-color:var(--primary)}
.pk-tab:hover{color:var(--text-primary)}


/* ═══════════════════════════════════════
   FORMS
   ═══════════════════════════════════════ */
.pk-form-group{margin-bottom:18px}
.pk-form-label{display:block;font-size:14px;font-weight:700;margin-bottom:8px;color:var(--text-primary)}
.pk-form-label .required{color:var(--danger)}
.pk-form-input{
    width:100%;padding:13px 16px;font-size:15px;
    background:var(--bg-primary);border:1.5px solid var(--border);
    border-radius:var(--radius-md);transition:all var(--transition-normal);
}
.pk-form-input:focus{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-glow)}
.pk-form-input.is-invalid{border-color:var(--danger);box-shadow:0 0 0 4px rgba(239,68,68,0.08)}
.pk-form-select{
    appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394A3B8' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 5.646a.5.5 0 01.708 0L8 8.293l2.646-2.647a.5.5 0 01.708.708l-3 3a.5.5 0 01-.708 0l-3-3a.5.5 0 010-.708z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 16px center;padding-right:42px;
}
.pk-form-textarea{min-height:130px;resize:vertical;line-height:1.65}
.pk-form-helper{font-size:12px;color:var(--text-tertiary);margin-top:6px}
.pk-form-error{font-size:12px;color:var(--danger);margin-top:6px;display:none}
.pk-form-row{display:flex;gap:12px}
.pk-form-row .pk-form-group{flex:1}

/* ── 체크박스/라디오 (칩 스타일) ── */
.pk-check-group{display:flex;flex-wrap:wrap;gap:8px}
.pk-check-item{position:relative}
.pk-check-item input{position:absolute;opacity:0;width:0;height:0}
.pk-check-item label{
    display:inline-flex;align-items:center;padding:8px 16px;
    font-size:13px;font-weight:500;color:var(--text-secondary);
    background:var(--bg-primary);border:1.5px solid var(--border);
    border-radius:var(--radius-full);cursor:pointer;
    transition:all var(--transition-normal);
}
.pk-check-item input:checked + label{
    background:var(--primary);color:white;border-color:var(--primary);
    box-shadow:0 2px 8px rgba(24,168,241,0.25);
}
.pk-check-item label:hover{border-color:var(--primary);color:var(--primary)}


/* ═══════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════ */
.pk-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    padding:11px 22px;font-size:14px;font-weight:700;
    border-radius:var(--radius-md);cursor:pointer;
    transition:all var(--transition-normal);white-space:nowrap;
    letter-spacing:-0.01em;text-decoration:none;
}
.pk-btn-primary{background:var(--primary);color:white;box-shadow:0 1px 3px rgba(24,168,241,0.25)}
.pk-btn-primary:hover{background:var(--primary-hover);box-shadow:0 4px 14px rgba(24,168,241,0.3);transform:translateY(-1px)}
.pk-btn-outline{background:var(--bg-primary);color:var(--primary);border:1.5px solid var(--primary)}
.pk-btn-outline:hover{background:var(--primary-light)}
.pk-btn-ghost{background:var(--bg-tertiary);color:var(--text-secondary)}
.pk-btn-ghost:hover{background:var(--border);color:var(--text-primary)}
.pk-btn-danger{background:var(--danger-light);color:var(--danger)}
.pk-btn-danger:hover{background:var(--danger);color:white}
.pk-btn-sm{padding:8px 16px;font-size:13px}
.pk-btn-lg{padding:15px 28px;font-size:15px;border-radius:var(--radius-lg)}
.pk-btn-full{width:100%}
.pk-btn-icon{
    width:40px;height:40px;padding:0;border-radius:var(--radius-sm);
    display:flex;align-items:center;justify-content:center;
}

/* ── 고정 하단 바 (액션 바) ── */
.pk-fixed-bar{
    position:fixed;bottom:0;left:0;right:0;z-index:150;
    background:rgba(255,255,255,0.96);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-top:1px solid rgba(226,232,240,0.6);
    padding:12px 16px;
    padding-bottom:calc(12px + env(safe-area-inset-bottom,0));
}
.pk-fixed-bar .pk-fixed-inner{
    display:flex;gap:10px;max-width:var(--content-max);margin:0 auto;
}


/* ═══════════════════════════════════════
   SIDE MENU (좌측 메뉴 — 모바일:숨김, PC:사이드바)
   ═══════════════════════════════════════ */
.pk-menu-item{
    display:flex;align-items:center;gap:14px;padding:14px 16px;
    border-bottom:1px solid var(--border-light);
    transition:all var(--transition-normal);cursor:pointer;
    text-decoration:none;color:inherit;
}
.pk-menu-item:hover{background:var(--bg-secondary)}
.pk-menu-icon{
    width:38px;height:38px;border-radius:var(--radius-md);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
    background:var(--bg-tertiary);color:var(--text-tertiary);
}
.pk-menu-text{flex:1;font-size:14px;font-weight:600;color:var(--text-primary)}
.pk-menu-arrow{color:var(--text-disabled);flex-shrink:0}
.pk-menu-badge{
    min-width:20px;height:20px;padding:0 6px;
    background:var(--primary);color:white;font-size:11px;font-weight:700;
    border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;
}


/* ═══════════════════════════════════════
   SEARCH ROW (1줄 나란히 검색 — compat !important 오버라이드)
   ═══════════════════════════════════════ */
.pk-search-row{
    display:flex!important;gap:6px!important;align-items:center!important;
}
.pk-search-row select.pk-sr-select{
    flex:0 0 auto!important;
    width:auto!important;
    display:inline-block!important;
    padding:9px 32px 9px 10px!important;
    font-size:13px!important;
    min-width:0!important;
    border-radius:var(--radius-md)!important;
    border:1.5px solid var(--border)!important;
    background:var(--bg-primary)!important;
    appearance:none!important;-webkit-appearance:none!important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394A3B8' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 5.646a.5.5 0 01.708 0L8 8.293l2.646-2.647a.5.5 0 01.708.708l-3 3a.5.5 0 01-.708 0l-3-3a.5.5 0 010-.708z'/%3E%3C/svg%3E")!important;
    background-repeat:no-repeat!important;background-position:right 10px center!important;
}
.pk-search-row .pk-sr-input{
    flex:1 1 auto!important;
    min-width:60px!important;
    width:auto!important;
    padding:9px 12px!important;
    font-size:13px!important;
    border:1.5px solid var(--border)!important;
    border-radius:var(--radius-md)!important;
    background:var(--bg-primary)!important;
    outline:none!important;
}
.pk-search-row .pk-sr-input:focus{
    border-color:var(--primary)!important;
    box-shadow:0 0 0 3px var(--primary-glow)!important;
}
.pk-search-row .pk-sr-btn{
    flex-shrink:0!important;
    padding:9px 14px!important;
    font-size:13px!important;
}


/* ═══════════════════════════════════════
   TAG MENU (좌측메뉴 → 태그박스 스타일)
   ═══════════════════════════════════════ */
.pk-tag-menu{
    display:flex;flex-wrap:wrap;gap:8px;
}
.pk-tag-btn{
    display:inline-flex;align-items:center;gap:6px;
    padding:9px 16px;
    background:var(--bg-primary);
    border:1.5px solid var(--border);
    border-radius:var(--radius-full);
    font-size:13px;font-weight:600;
    color:var(--text-secondary);
    text-decoration:none;
    transition:all var(--transition-fast);
    cursor:pointer;white-space:nowrap;
}
.pk-tag-btn svg{width:15px;height:15px;flex-shrink:0}
.pk-tag-btn:hover{
    border-color:var(--primary);color:var(--primary);
    background:var(--primary-light);
}
.pk-tag-btn.active{
    background:var(--primary);color:white;border-color:var(--primary);
    box-shadow:0 2px 8px rgba(24,168,241,0.2);
}
/* 색상 변형 */
.pk-tag-primary{
    background:var(--primary-light);border-color:rgba(24,168,241,0.2);color:var(--primary);
}
.pk-tag-primary:hover,.pk-tag-primary.active{
    background:var(--primary);color:white;border-color:var(--primary);
}
.pk-tag-accent{
    background:var(--accent-light);border-color:rgba(6,182,212,0.2);color:var(--accent);
}
.pk-tag-accent:hover,.pk-tag-accent.active{
    background:var(--accent);color:white;border-color:var(--accent);
}
.pk-tag-danger{
    background:var(--danger-light);border-color:rgba(239,68,68,0.15);color:var(--danger);
}
.pk-tag-danger:hover{
    background:var(--danger);color:white;border-color:var(--danger);
}
.pk-tag-badge{
    min-width:18px;height:18px;padding:0 5px;
    background:var(--primary);color:white;font-size:10px;font-weight:700;
    border-radius:var(--radius-full);display:inline-flex;align-items:center;justify-content:center;
    margin-left:2px;
}
.pk-tag-btn.active .pk-tag-badge{
    background:white;color:var(--primary);
}


/* ═══════════════════════════════════════
   EMPTY / LOADING / TOAST
   ═══════════════════════════════════════ */
.pk-empty{text-align:center;padding:48px 24px}
.pk-empty-icon{color:var(--text-disabled);margin-bottom:16px;font-size:48px}
.pk-empty-title{font-size:17px;font-weight:700;color:var(--text-secondary);margin-bottom:6px}
.pk-empty-desc{font-size:14px;color:var(--text-tertiary)}

.pk-spinner{
    display:none;position:fixed;z-index:999999;
    top:0;left:0;width:100%;height:100%;
    background:rgba(0,0,0,0.3);
    align-items:center;justify-content:center;
}
.pk-spinner.show{display:flex}
.pk-spinner-circle{
    width:44px;height:44px;border:4px solid var(--border);
    border-top-color:var(--primary);border-radius:50%;
    animation:pk-spin 0.8s linear infinite;
}
@keyframes pk-spin{to{transform:rotate(360deg)}}

.pk-toast{
    position:fixed;top:72px;left:50%;transform:translateX(-50%);
    background:var(--text-primary);color:white;padding:14px 28px;
    border-radius:var(--radius-lg);font-size:14px;z-index:9999;
    max-width:400px;text-align:center;
    box-shadow:0 12px 32px rgba(0,0,0,0.18);font-weight:500;
    opacity:0;transition:opacity 0.3s;pointer-events:none;
}
.pk-toast.show{opacity:1}


/* ═══════════════════════════════════════
   IMAGE GALLERY / MODAL
   ═══════════════════════════════════════ */
.pk-img-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.pk-img-grid img{
    width:calc(33.33% - 6px);aspect-ratio:1;object-fit:cover;
    border-radius:var(--radius-md);cursor:pointer;transition:opacity var(--transition-fast);
}
.pk-img-grid img:hover{opacity:0.85}

.pk-img-modal{
    display:none;position:fixed;z-index:99999;
    left:0;top:0;width:100%;height:100%;
    background:rgba(0,0,0,.85);
    align-items:center;justify-content:center;
}
.pk-img-modal.show{display:flex}
.pk-img-modal img{max-width:95%;max-height:90%;border-radius:var(--radius-md)}
.pk-img-modal-close{
    position:absolute;top:16px;right:20px;
    color:white;font-size:28px;cursor:pointer;
    width:40px;height:40px;display:flex;align-items:center;justify-content:center;
}


/* ═══════════════════════════════════════
   FILE UPLOAD
   ═══════════════════════════════════════ */
.pk-upload-zone{
    border:2px dashed var(--border);border-radius:var(--radius-lg);
    padding:24px;text-align:center;cursor:pointer;
    transition:all var(--transition-normal);position:relative;overflow:hidden;
}
.pk-upload-zone:hover{border-color:var(--primary);background:var(--primary-light)}
.pk-upload-zone input[type="file"]{
    position:absolute;top:0;left:0;width:100%;height:100%;
    opacity:0;cursor:pointer;
}
.pk-upload-icon{color:var(--text-disabled);margin-bottom:8px;font-size:32px}
.pk-upload-text{font-size:13px;color:var(--text-tertiary)}
.pk-upload-preview{
    margin-top:10px;position:relative;display:inline-block;
}
.pk-upload-preview img{
    max-width:100%;border-radius:var(--radius-md);display:block;
}
.pk-upload-remove{
    position:absolute;top:4px;right:4px;
    width:24px;height:24px;border-radius:50%;
    background:var(--danger);color:white;border:none;
    display:flex;align-items:center;justify-content:center;
    font-size:14px;cursor:pointer;
}


/* ═══════════════════════════════════════
   DETAIL PAGE
   ═══════════════════════════════════════ */
.pk-detail{padding:0 16px 24px}
.pk-detail-header{margin-bottom:20px;padding-top:16px}
.pk-detail-title{font-size:20px;font-weight:800;line-height:1.3;letter-spacing:-0.02em;margin-bottom:8px}
.pk-detail-meta{font-size:13px;color:var(--text-tertiary);display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.pk-detail-section{margin-bottom:20px}
.pk-detail-section-title{
    font-size:15px;font-weight:700;color:var(--text-primary);
    margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border-light);
    display:flex;align-items:center;gap:6px;
}
.pk-detail-section-title svg{width:16px;height:16px;color:var(--text-tertiary)}

.pk-detail-row{display:flex;margin-bottom:10px;font-size:14px}
.pk-detail-label{
    min-width:90px;font-weight:600;color:var(--text-secondary);flex-shrink:0;
}
.pk-detail-value{flex:1;color:var(--text-primary);line-height:1.5}

.pk-detail-content{
    background:var(--bg-tertiary);border-radius:var(--radius-md);
    padding:16px;font-size:14px;color:var(--text-secondary);
    line-height:1.7;white-space:pre-wrap;word-wrap:break-word;
}

.pk-detail-contact{
    background:var(--primary-light);border-radius:var(--radius-lg);
    padding:18px;margin-top:16px;
}


/* ═══════════════════════════════════════
   PAGING
   ═══════════════════════════════════════ */
.pk-paging{text-align:center;padding:20px 0}
.pk-paging a,.pk-paging span{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:36px;height:36px;padding:0 8px;margin:0 2px;
    border-radius:var(--radius-sm);font-size:13px;font-weight:600;
    color:var(--text-secondary);text-decoration:none;
    transition:all var(--transition-fast);
}
.pk-paging a:hover{background:var(--bg-tertiary)}
.pk-paging span.current{background:var(--primary);color:white}


/* ═══════════════════════════════════════
   LOGIN / REGISTER (페인커용 심플 버전)
   ═══════════════════════════════════════ */
.pk-auth{
    max-width:420px;margin:40px auto;padding:0 16px;
}
.pk-auth-header{margin-bottom:28px;text-align:center}
.pk-auth-header h1{font-size:24px;font-weight:800;letter-spacing:-0.02em;margin-bottom:4px}
.pk-auth-header p{font-size:14px;color:var(--text-tertiary)}
.pk-auth-footer{
    text-align:center;margin-top:24px;padding:20px 0;font-size:14px;
    color:var(--text-tertiary);border-top:1px solid var(--border-light);
}
.pk-auth-footer a{color:var(--primary);font-weight:700;margin-left:4px}


/* ═══════════════════════════════════════
   CALENDAR (달력 뷰)
   ═══════════════════════════════════════ */
.pk-cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding:0 4px}
.pk-cal-nav button{
    background:none;border:1.5px solid var(--border);border-radius:var(--radius-sm);
    padding:6px 14px;cursor:pointer;font-size:13px;font-weight:600;color:var(--text-secondary);
    transition:all var(--transition-fast);
}
.pk-cal-nav button:hover{background:var(--bg-tertiary);border-color:var(--text-disabled)}
.pk-cal-title{font-size:17px;font-weight:800;color:var(--text-primary)}

.pk-cal-table{width:100%;border-collapse:collapse;table-layout:fixed}
.pk-cal-table th{
    text-align:center;padding:8px 0;font-size:12px;font-weight:600;
    color:var(--text-tertiary);border-bottom:1px solid var(--border-light);
}
.pk-cal-table td{
    vertical-align:top;height:72px;border:1px solid var(--border-light);
    padding:4px;font-size:11px;background:var(--bg-primary);
}
.pk-cal-table td.today{background:var(--primary-light)}
.pk-cal-day{font-size:12px;font-weight:700;color:var(--text-primary);margin-bottom:2px}
.pk-cal-table td.sun .pk-cal-day{color:var(--danger)}
.pk-cal-table td.sat .pk-cal-day{color:#1D4ED8}
.pk-cal-table td.other{background:var(--bg-secondary)}
.pk-cal-table td.other .pk-cal-day{color:var(--text-disabled)}
.pk-cal-event{
    display:block;padding:1px 4px;margin-bottom:1px;
    border-radius:3px;font-size:10px;font-weight:600;color:white;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    text-decoration:none;cursor:pointer;
}
.pk-cal-event.open{background:var(--primary)}
.pk-cal-event.closed{background:var(--text-disabled)}
.pk-cal-more{font-size:10px;color:var(--primary);font-weight:600;cursor:pointer;padding:1px 4px}


/* ═══════════════════════════════════════
   PC GNB (모바일에서는 숨김)
   ═══════════════════════════════════════ */
.pk-gnb{display:none}


/* ═══════════════════════════════════════
   MOBILE BOX MENU (헤더 아래 고정)
   ═══════════════════════════════════════ */
.pk-box-menu{
    position:fixed;top:var(--header-h);left:0;right:0;z-index:90;
    background:rgba(255,255,255,0.97);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(226,232,240,0.6);
    padding:6px 12px;
}
.pk-box-menu-inner{
    display:flex;gap:6px;
    max-width:var(--page-max);margin:0 auto;
    overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
}
.pk-box-menu-inner::-webkit-scrollbar{display:none}
.pk-box-item{
    display:flex;align-items:center;gap:5px;
    padding:7px 14px;
    background:var(--bg-primary);
    border:1.5px solid var(--border);
    border-radius:var(--radius-full);
    font-size:12px;font-weight:600;
    color:var(--text-secondary);
    white-space:nowrap;
    text-decoration:none;
    transition:all var(--transition-fast);
    cursor:pointer;flex-shrink:0;
}
.pk-box-item:hover{
    border-color:var(--primary);color:var(--primary);background:var(--primary-light);
}
.pk-box-item.active{
    background:var(--primary);color:white;border-color:var(--primary);
    box-shadow:0 2px 8px rgba(24,168,241,0.2);
}
.pk-box-item .pk-box-icon{display:flex;align-items:center}
.pk-box-item .pk-box-icon svg{width:14px;height:14px}

/* 구인·협업 강조 */
.pk-box-highlight{
    background:var(--accent-light)!important;
    border-color:var(--accent)!important;
    color:var(--accent)!important;
    font-weight:700!important;
}
.pk-box-highlight.active{
    background:var(--accent)!important;
    color:white!important;
}

/* 박스메뉴 있을 때 앱 컨테이너 상단 여백 - 위에서 이미 정의됨 */


/* ═══════════════════════════════════════
   ACTION BOXES (메인 페이지 주요 메뉴)
   ═══════════════════════════════════════ */
.pk-action-boxes{
    display:flex;flex-direction:column;gap:10px;
}
.pk-action-box{
    display:flex;align-items:center;gap:14px;
    padding:16px 18px;
    background:var(--bg-primary);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-card);
    text-decoration:none;color:inherit;
    transition:all var(--transition-normal);
    border:1.5px solid transparent;
}
.pk-action-box:hover{
    box-shadow:var(--shadow-card-hover);
    transform:translateY(-2px);
    border-color:var(--primary-50);
}
/* 구인·협업 강조 박스 */
.pk-action-box-accent{
    background:linear-gradient(135deg, #ECFEFF 0%, #E0F7FA 100%)!important;
    border-color:rgba(6,182,212,0.2)!important;
}
.pk-action-box-accent:hover{
    border-color:var(--accent)!important;
}
.pk-action-box-accent .pk-action-title{
    color:var(--accent)!important;
}

.pk-action-icon{
    width:52px;height:52px;border-radius:var(--radius-lg);
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
}
.pk-action-text{flex:1;min-width:0}
.pk-action-title{font-size:16px;font-weight:800;letter-spacing:-0.02em;margin-bottom:2px}
.pk-action-desc{font-size:13px;color:var(--text-tertiary)}
.pk-action-arrow,.pk-action-badge{
    color:var(--text-disabled);flex-shrink:0;display:flex;
}


/* ═══════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════ */
@keyframes fadeInUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.pk-animate{animation:fadeInUp .45s var(--ease-out) both}


/* ═══════════════════════════════════════
   PC (≥ 1024px)
   ═══════════════════════════════════════ */
@media(min-width:1024px){
    :root{--content-max:780px;--header-h:0px;--gnb-h:68px}

    /* 모바일 헤더 + 박스메뉴 숨김 */
    .pk-header{display:none}
    .pk-box-menu{display:none}
    .pk-nav{display:none!important}

    /* PC GNB 표시 */
    .pk-gnb{
        display:flex;position:sticky;top:0;z-index:300;
        align-items:center;height:var(--gnb-h);
        padding:0 40px;
        background:rgba(255,255,255,0.97);
        backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
        border-bottom:1px solid rgba(226,232,240,0.5);
    }
    .pk-gnb-inner{
        display:flex;align-items:center;justify-content:space-between;
        width:100%;max-width:var(--page-max);margin:0 auto;
    }
    .pk-gnb-logo{
        font-size:20px;font-weight:900;color:var(--primary);
        letter-spacing:-0.5px;display:flex;align-items:center;gap:8px;
        text-decoration:none;transition:opacity var(--transition-fast);
    }
    .pk-gnb-logo:hover{opacity:0.8}
    .pk-gnb-logo img{height:32px;border-radius:8px}

    /* 메뉴 링크 */
    .pk-gnb-nav{display:flex;align-items:center;gap:4px}
    .pk-gnb-link{
        padding:8px 18px;font-size:14px;font-weight:600;
        color:var(--text-secondary);border-radius:var(--radius-sm);
        transition:all var(--transition-fast);position:relative;
        text-decoration:none;
    }
    .pk-gnb-link:hover{color:var(--text-primary);background:var(--bg-tertiary)}
    .pk-gnb-link.active{color:var(--primary)}
    .pk-gnb-link.active::after{
        content:'';position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);
        width:20px;height:3px;background:var(--primary);border-radius:2px;
    }

    /* 구인·협업 강조 */
    .pk-gnb-highlight{
        background:var(--accent-light)!important;
        color:var(--accent)!important;
        border-radius:var(--radius-full)!important;
        font-weight:700!important;
        padding:8px 16px!important;
        display:inline-flex!important;align-items:center;gap:5px;
    }
    .pk-gnb-highlight:hover{
        background:var(--accent)!important;
        color:white!important;
    }
    .pk-gnb-highlight.active{
        background:var(--accent)!important;
        color:white!important;
        box-shadow:0 2px 8px rgba(6,182,212,0.3);
    }
    .pk-gnb-highlight.active::after{display:none}
    .pk-gnb-highlight svg{width:15px;height:15px}

    /* 서포터즈 보라색 강조 */
    .pk-gnb-highlight-purple{
        background:#F3E8FF!important;
        color:#7C3AED!important;
        border-radius:var(--radius-full)!important;
        font-weight:700!important;
        padding:8px 16px!important;
        display:inline-flex!important;align-items:center;gap:5px;
    }
    .pk-gnb-highlight-purple:hover{
        background:#7C3AED!important;
        color:white!important;
    }
    .pk-gnb-highlight-purple.active{
        background:#7C3AED!important;
        color:white!important;
        box-shadow:0 2px 8px rgba(124,58,237,0.3);
    }
    .pk-gnb-highlight-purple.active::after{display:none}
    .pk-gnb-highlight-purple svg{width:15px;height:15px}

    /* 우측 액션 */
    .pk-gnb-actions{display:flex;align-items:center;gap:8px}
    .pk-gnb-btn-icon{
        width:40px;height:40px;display:flex;align-items:center;justify-content:center;
        border-radius:var(--radius-sm);color:var(--text-secondary);
        cursor:pointer;transition:all var(--transition-fast);position:relative;
    }
    .pk-gnb-btn-icon:hover{background:var(--bg-tertiary);color:var(--text-primary)}
    .pk-gnb-cta{
        margin-left:8px;padding:10px 22px;font-size:14px;font-weight:700;
        background:var(--primary);color:white;border-radius:var(--radius-sm);
        cursor:pointer;transition:all var(--transition-normal);
        display:flex;align-items:center;gap:6px;text-decoration:none;
        box-shadow:0 1px 3px rgba(24,168,241,0.2);
    }
    .pk-gnb-cta:hover{
        background:var(--primary-hover);
        box-shadow:0 4px 12px rgba(24,168,241,0.3);
        transform:translateY(-1px);
    }
    .pk-gnb-cta-accent{
        background:var(--accent)!important;
        box-shadow:0 1px 3px rgba(6,182,212,0.2)!important;
    }
    .pk-gnb-cta-accent:hover{
        background:#0891B2!important;
        box-shadow:0 4px 12px rgba(6,182,212,0.3)!important;
    }

    /* 앱 컨테이너 */
    .pk-app{
        max-width:var(--page-max);margin:0 auto;
        padding-top:0!important;padding-bottom:40px;
    }
    .pk-app.has-box-menu{padding-top:0!important}

    .pk-section{padding:20px 0}
    .pk-divider{height:1px;background:var(--border-light);margin:0}
    .pk-banner-wrap{padding:16px 0}
    .pk-banner{border-radius:var(--radius-2xl);padding:36px 40px;min-height:150px}
    .pk-banner-title{font-size:28px}

    /* 액션 박스 가로 배치 */
    .pk-action-boxes{flex-direction:row;gap:12px}
    .pk-action-box{flex:1}

    .pk-list-card{padding:16px 20px;border-radius:var(--radius-lg);border-bottom:none;box-shadow:var(--shadow-card);margin-bottom:8px}
    .pk-list-card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-2px)}
    .pk-menu-item{padding:14px 20px;border-radius:var(--radius-lg);border-bottom:none;margin-bottom:6px;box-shadow:var(--shadow-card)}
    .pk-menu-item:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-1px)}

    .pk-form-input{padding:12px 16px}
    .pk-form-textarea{min-height:140px}
    .pk-detail{padding:0 0 24px}

    /* 스크롤바 */
    ::-webkit-scrollbar{width:6px}
    ::-webkit-scrollbar-track{background:transparent}
    ::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
    ::-webkit-scrollbar-thumb:hover{background:var(--text-disabled)}
}

/* ── Tablet ── */
@media(min-width:768px) and (max-width:1023px){
    .pk-section{padding:16px 20px}
    .pk-banner-wrap{padding:12px 20px}
    .pk-banner{padding:28px}
    .pk-banner-title{font-size:24px}
    .pk-list-card,.pk-menu-item{padding-left:20px;padding-right:20px}

    /* 태블릿에서 액션박스 가로 */
    .pk-action-boxes{flex-direction:row;gap:10px}
    .pk-action-box{flex:1}
    .pk-action-icon{width:44px;height:44px}
    .pk-action-title{font-size:14px}
}