/* common.css */
@import url('https://cdn.jsdelivr.net/gh/toss/tossface/dist/tossface.css');

:root {--color-primary:#4f46e5;--color-primary-hover:#4338ca;--color-primary-light:#f5f3ff;--color-bg:#f8fafc;--color-surface:#ffffff;--color-text-main:#0f172a;--color-text-muted:#64748b;--color-border:#e2e8f0;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--shadow-sm:0 1px 2px rgba(15,23,42,0.04);--shadow-soft:0 10px 25px -5px rgba(15,23,42,0.03),0 8px 10px -6px rgba(15,23,42,0.03);--shadow-hover:0 20px 25px -5px rgba(15,23,42,0.08);--shadow-btn:0 4px 12px rgba(79,70,229,0.2);--font-family:'Nanum Gothic','Tossface',sans-serif}

* {box-sizing:border-box;scrollbar-width:thin;}
*::-webkit-scrollbar-thumb {background-color:#cbd5e1;border-radius:10px;}
*::-webkit-scrollbar-track {background-color:#f1f5f9;}
body {font-family:'Nanum Gothic',sans-serif;background-color:#f8f9fa;margin:0;padding:0;color:#333;line-height:1.6;}
.header {position:fixed;top:0;left:0;right:0;background-color:#ffffff;z-index:1000;}
.header-inner {height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 15px;border-bottom:1px solid #edf1f5;z-index:1000;}
.header-left {display:flex;align-items:center;gap:30px;}
.header-logo-icon img {width:125px;}
.gnb-overlay {position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(15,23,42,0.5);z-index:1001;
    opacity:0;visibility:hidden;transition:opacity 0.3s ease,visibility 0.3s;}
.gnb-overlay.show {opacity:1;visibility:visible;}
.gnb-nav {position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}
.gnb-menu {display:flex;align-items:center;gap:45px;margin:0;padding:0;list-style:none;}
.gnb-menu li a {text-decoration:none;color:#495057;font-size:16px;font-weight:400;transition:color 0.2s;}
.gnb-menu li a:hover {color:#6366f1;}
.header-right {display:flex;align-items:center;gap:12px;position:relative;z-index:1003;}
.member-menu {display:flex;align-items:center;gap:12px;margin:0;padding:0;list-style:none;}
.member-menu li {display:flex;align-items:center;}
.btn-user {display:inline-flex;align-items:center;text-decoration:none;font-size:13px;color:#868e96;font-weight:400;margin:0;box-sizing:border-box;}
.btn-user:hover {color:#111;}
.btn-mypage {color:#6366f1;font-size:13px;font-weight:700;text-decoration:none;transition:all 0.2s;font-family:inherit;margin:0;box-sizing:border-box;}
.btn-mypage:hover {}
.btn-admin {color:#6366f1;}
.btn-admin:hover {color:#4338ca;}
.header-actions {display:flex;align-items:center;gap:8px;}
.btn-gray {display:inline-flex;height:32px;align-items:center;justify-content:center;padding:0 20px;border:0;border-radius:6px;background:#f8f9fa;color:#495057;font-size:13px;font-weight:700;cursor:pointer;text-decoration:none;transition:all 0.2s;font-family:inherit;margin:0;box-sizing:border-box;}
.btn-gray:hover {background:#eee;color:#111;}
.btn-default {display:inline-flex;height:32px;align-items:center;justify-content:center;padding:0 20px;border:0;border-radius:6px;background:#6366f1;color:#fff;font-size:13px;font-weight:700;gap:5px;cursor:pointer;text-decoration:none;transition:all 0.2s;font-family:inherit;margin:0;box-sizing:border-box;}
.btn-default:hover {background:#3c3fc7;}
#global_loader_overlay {position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,0.9);z-index:10001;display:none;align-items:center;justify-content:center;flex-direction:column;color:#212529;backdrop-filter:blur(4px);}
.spinner-circle {width:60px;height:60px;border:5px solid rgba(23,103,255,0.1);border-top-color:#6366f1;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:20px;}
.loader-text {font-weight:700;font-size:15px;color:#495057;}
@keyframes spin {100%{transform:rotate(360deg);}}
.btn-hamburger {display:none;}

/* ── 편지쓰기/업로드 등 헤더 우측 버튼이 많은 페이지 :
      절대배치 중앙 GNB 가 우측 버튼과 겹치지 않도록 flex 흐름 배치로 전환 ── */
@media (min-width:992px) and (max-width:1699px) {
    .header-inner.has-actions {gap:16px;}
    .header-inner.has-actions .gnb-nav {position:static;transform:none;flex:1;min-width:0;display:flex;justify-content:center;}
    .header-inner.has-actions .gnb-menu {gap:clamp(14px, 2.6vw, 45px);flex-wrap:nowrap;}
    .header-inner.has-actions .gnb-menu li a {white-space:nowrap;}
    .header-inner.has-actions .header-left,
    .header-inner.has-actions .header-right {flex-shrink:0;}
}
/* 폭이 더 좁아지면 글자·버튼·간격을 단계적으로 압축 */
@media (min-width:992px) and (max-width:1280px) {
    .header-inner.has-actions .gnb-menu li a {font-size:14px;}
    .header-inner.has-actions .member-menu {gap:8px;}
    .header-inner.has-actions .member-menu a {font-size:13px;}
    .header-inner.has-actions .btn-gray,
    .header-inner.has-actions .btn-default {padding:0 12px;font-size:12.5px;}
}
@media (min-width:992px) and (max-width:1120px) {
    .header-inner.has-actions .gnb-menu li a {font-size:13px;}
    .header-inner.has-actions .btn-gray,
    .header-inner.has-actions .btn-default {padding:0 9px;font-size:12px;}
    .header-inner.has-actions .header-logo-icon img {width:88px;}
}

@media (max-width:991px) {
    .member-menu {gap:8px;}
    .header-logo-icon img {width:85px;}
    .header-left {gap:15px;}
    .header-right {gap:8px;}
    .header-inner {height:auto;flex-wrap:wrap;padding:0 15px;height:45px;}
    .header-actions {width:100%;justify-content:flex-end;height:40px;padding:0 15px;border-bottom:1px solid #edf1f5;}
    .btn-hamburger {display:block;width:24px;height:18px;position:relative;background:none;border:none;cursor:pointer;padding:0;margin-left:12px;z-index:1003;}
    .btn-hamburger span {display:block;position:absolute;width:100%;height:2px;background:#333;left:0;top:8px;transition:0.3s;}
    .btn-hamburger span::before {content:'';display:block;position:absolute;width:100%;height:2px;background:#333;left:0;top:-8px;transition:0.3s;}
    .btn-hamburger span::after {content:'';display:block;position:absolute;width:100%;height:2px;background:#333;left:0;bottom:-8px;transition:0.3s;}
    .btn-hamburger.active span {background:transparent;}
    .btn-hamburger.active span::before {top:0;transform:rotate(45deg);}
    .btn-hamburger.active span::after {bottom:0;transform:rotate(-45deg);}
    /* 오프캔버스 메뉴(.gnb-menu)가 화면 밖 오른쪽에 fixed로 놓여 모바일에서 가로 스크롤을 유발 → 루트에서 가로 오버플로 차단 */
    html, body {overflow-x:hidden;}
    .gnb-nav {position:relative;top:auto;left:auto;transform:none;}
    .gnb-menu {display:flex;flex-direction:column;position:fixed;top:0;right:-100%;left:auto;width:290px;height:100vh;height:100dvh;
        background:linear-gradient(180deg,#fbfaff 0%,#fff 30%);padding:76px 18px 24px;
        box-shadow:-16px 0 40px rgba(15,23,42,0.14);border-radius:20px 0 0 20px;
        transition:right 0.3s cubic-bezier(0.4,0,0.2,1);z-index:1002;align-items:stretch;gap:4px;overflow-y:auto;}
    .gnb-menu.active {right:0;}
    /* 상단 라벨 */
    .gnb-menu::before {content:'MENU';display:block;margin:0 10px 10px;font-size:11px;font-weight:800;
        letter-spacing:0.18em;color:#a5b4fc;}
    .gnb-menu li {width:100%;}
    .gnb-menu li a {display:flex;align-items:center;justify-content:space-between;padding:13px 14px;
        border-radius:12px;font-size:15px;font-weight:600;color:#334155;
        transition:background 0.15s,color 0.15s,padding 0.15s;position:relative;}
    /* 우측 화살표 */
    .gnb-menu li a::after {content:'';width:7px;height:7px;flex:none;margin-left:10px;
        border-top:2px solid #cbd5e1;border-right:2px solid #cbd5e1;transform:rotate(45deg);
        transition:border-color 0.15s,transform 0.15s;}
    .gnb-menu li a:hover,
    .gnb-menu li a:active {background:#f5f3ff;color:#6366f1;}
    .gnb-menu li a:hover::after {border-color:#6366f1;transform:rotate(45deg) translate(2px,-2px);}
    /* 현재 페이지(인라인 색상 지정된 항목) 강조 */
    .gnb-menu li a[style*="rgb(99, 102, 241)"] {background:linear-gradient(135deg,#eef2ff,#f5f3ff);font-weight:800;}
    .gnb-menu li a[style*="rgb(99, 102, 241)"]::after {border-color:#818cf8;}
    /* 항목 사이 옅은 구분선 */
    .gnb-menu li + li {border-top:1px solid #f4f4fb;padding-top:4px;margin-top:4px;}
    .btn-gray {padding:0 12px;font-size:12px;}
}

/* common */
/* body가 flex-column이라 좌우 auto 마진이 stretch를 무효화해 컨테이너가 콘텐츠 폭으로 커지는 문제 방지 → width:100% 명시 */
.container {width:100%;max-width:1230px;margin:60px auto;padding:0 15px;box-sizing:border-box;}

.custom-confirm-overlay {position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(15,23,42,0.3);backdrop-filter:blur(3px);z-index:10001;display:none;align-items:center;justify-content:center;animation:fadeIn 0.2s ease}
@keyframes fadeIn {from {opacity:0} to {opacity:1}}
.custom-confirm-box {position:absolute;top:50%;left:50%;background:var(--color-surface);border-radius:var(--radius-lg);width:90%;max-width:340px;padding:24px;box-shadow:0 20px 25px -5px rgba(0,0,0,0.1);text-align:center;transform: translate(-50%, -50%) scale(0.96);animation:popIn 0.25s cubic-bezier(0.16,1,0.3,1) forwards}
@keyframes popIn {to {transform: translate(-50%, -50%) scale(1);}}
.custom-confirm-msg {font-size:15px;font-weight:600;color:var(--color-text-main);margin-bottom:20px;line-height:1.45}
.custom-confirm-btns {display:flex;gap:8px}
.custom-confirm-btn {flex:1;padding:10px;border-radius:var(--radius-md);font-size:13px;font-weight:600;cursor:pointer;border:none;transition:all 0.15s ease}
.custom-confirm-btn.cancel {background:#f1f5f9;color:var(--color-text-main)}
.custom-confirm-btn.cancel:hover {background:#e2e8f0}
.custom-confirm-btn.confirm {background:var(--color-primary);color:#fff}
.custom-confirm-btn.confirm:hover {background:var(--color-primary-hover)}