@charset "utf-8";
/* ==========================================================================
   Mega Sign — 공통 스타일
   디자인 토큰 · 기본 리셋 · 레이아웃 셸 · GNB · 상단바 · 모바일 드로어
   ※ 모든 페이지에서 항상 로드됩니다. (include/header.php)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 디자인 토큰
   -------------------------------------------------------------------------- */
:root{
  /* Primary (#6D78DB 중심) */
  --primary-50:#F0F1FC;   /* 틴트 배경, 소프트 버튼, 아바타 */
  --primary-100:#E1E4F9;  /* 호버 틴트 */
  --primary-300:#A9B0EC;  /* 보조 아이콘(다크 위) */
  --primary-500:#838DE3;  /* 보조 강조 */
  --primary-600:#6D78DB;  /* 주조색 · 기본 버튼 · 링크 · 강조 */
  --primary-700:#5560C4;  /* 버튼 호버/프레스 */

  /* Neutral */
  --ink-900:#1E2233;      /* 제목·본문 기본 텍스트 */
  --ink-700:#37405C;      /* 보조 텍스트, 레이블 */
  --gray-500:#656B82;     /* 설명 텍스트 */
  --gray-300:#9096AD;     /* 캡션, placeholder */
  --line:#E4E6F0;         /* 보더, 구분선 */
  --surface:#F4F5F9;      /* 페이지 배경 */
  --white:#FFFFFF;        /* 카드 서피스 */
  --dark:#171B2E;         /* 사이드바 · 신뢰 바 배경 */
  --input-border:#D6D9E8; /* 입력 보더 */

  /* Semantic */
  --success:#2FD46B;  --success-text:#1CA653; --success-tint:#E4FBEC;  /* 서명 완료 */
  --warning:#FFB020;  --warning-text:#C7860B; --warning-tint:#FFF4DE;  /* 서명 대기 */
  --danger:#FB4E6D;   --danger-text:#EB2F5B;  --danger-tint:#FFEBF0;   /* 거절/실패 */
  --info:#6D78DB;     --info-text:#6D78DB;    --info-tint:#F0F1FC;     /* 열람/진행중 */
  --neutral:#7A8095;  --neutral-text:#7A8095; --neutral-tint:#EEF0F4;  /* 만료 */
  --danger-input-bg:#FFF5F7;
}

/* --------------------------------------------------------------------------
   2. 기본(reset)
   -------------------------------------------------------------------------- */
*{box-sizing:border-box}
body{margin:0;font-family:"Pretendard Variable",Pretendard,sans-serif;font-size:14px;line-height:1.5;color:var(--ink-900);background:var(--surface);overflow-x:hidden}
a{color:var(--primary-600);text-decoration:none}
a:hover{color:var(--primary-700)}
button{font-family:inherit;cursor:pointer}
.num{font-variant-numeric:tabular-nums}
svg{flex-shrink:0}

/* --------------------------------------------------------------------------
   2-1. 상태 칩 (공통 컴포넌트)
   --------------------------------------------------------------------------
   마이페이지(등록증·서명 준비도) · 1:1 문의(접수/답변완료)에서 함께 씁니다.
   ※ 예전에는 mypage.css 에만 있어서 mypage.css 를 싣지 않는 화면
     (/inquiry/ 등)에서는 칩이 아무 스타일 없이 나왔습니다. 여기로 옮깁니다.

     .chip          중립(회색) — 기본값
     .chip.ok       완료·등록됨   (초록)
     .chip.done     완료          (초록, .ok 와 같은 뜻)
     .chip.wait     대기·미등록·접수 (주황)
   -------------------------------------------------------------------------- */
.chip{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:7px;font-size:13px;font-weight:700;background:var(--neutral-tint);color:var(--gray-500);white-space:nowrap}
.chip .d{width:6px;height:6px;border-radius:50%;flex-shrink:0;background:var(--gray-300)}
.chip.ok,
.chip.done{background:var(--success-tint);color:var(--success-text)}
.chip.ok .d,
.chip.done .d{background:var(--success)}
.chip.wait{background:var(--warning-tint);color:var(--warning-text)}
.chip.wait .d{background:var(--warning)}

/* --------------------------------------------------------------------------
   2-2. 첨부파일 (1:1 문의 — 마이페이지 · /inquiry/ 공용)
   --------------------------------------------------------------------------
   마크업은 include/inquiry_files.php 한 곳에서 만듭니다.
   한 줄에 하나씩 세로로 쌓지 않고, **파일명 길이만큼만** 차지하는 칩이
   옆으로 나열되다가 자리가 모자라면 다음 줄로 넘어갑니다.
   -------------------------------------------------------------------------- */
.inq-files{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.inq-files li{min-width:0;max-width:100%}
.inq-files a{
  display:inline-flex;align-items:center;gap:7px;max-width:100%;
  padding:7px 11px;border:1px solid var(--line);border-radius:8px;
  background:var(--white);color:var(--ink-700);text-decoration:none;
  font-size:13px;transition:all .15s ease;
}
.inq-files a:hover{border-color:var(--primary-600);background:var(--primary-50);color:var(--primary-700)}
.inq-files a svg{flex-shrink:0;color:var(--gray-500)}
.inq-files a:hover svg{color:var(--primary-600)}
/* 파일명이 아주 길면 칩이 줄 전체를 넘지 않도록 말줄임 */
.inq-files .fn{min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* --------------------------------------------------------------------------
   3. 레이아웃 셸
   -------------------------------------------------------------------------- */
.app{display:flex;min-height:100vh;background:var(--white)}
.main{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--surface)}

/* --------------------------------------------------------------------------
   4. 로고 (워드마크)
   --------------------------------------------------------------------------
   images/logo_pos.svg · logo_neg.svg 는 275×142 캔버스에 여백이 넓어,
   워드마크 영역(x 80~194 / y 55~87)만 잘라 씁니다.
   표시 폭은 --logo-w 하나만 바꾸면 나머지 값이 따라옵니다.
       .pos = 밝은 배경용 · .neg = 다크 배경용
   -------------------------------------------------------------------------- */
.logo-img{
  --logo-w:128px;
  display:block;
  width:var(--logo-w);
  height:calc(var(--logo-w) * 308 / 808);   /* mega 로고 원본 비율(808x308) */
  background-repeat:no-repeat;
  background-size:contain;
  background-position:left center;
}
/* pos = 밝은 배경용(어두운색 로고) · neg = 어두운 배경용(흰색 로고) */
.logo-img.pos{background-image:url('/images/logo_mega_45.png')}
.logo-img.neg{background-image:url('/images/logo_mega_w_45.png')}

/* --------------------------------------------------------------------------
   5. GNB (좌측 다크 사이드바) — include/aside.php
   -------------------------------------------------------------------------- */
.gnb{width:250px;flex-shrink:0;background:var(--dark);display:flex;flex-direction:column;padding:22px 16px;position:sticky;top:0;height:100vh;align-self:flex-start;overflow-y:auto}
.gnb-logo{--logo-w:112px;margin:2px 8px 24px}
.gnb nav{display:flex;flex-direction:column;gap:3px}
.gnb-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:9px;color:rgba(255,255,255,.62);font-size:14px;font-weight:700;transition:background .15s ease,color .15s ease,box-shadow .15s ease}
.gnb-item:hover{background:rgba(255,255,255,.06);color:#fff}
.gnb-item.active{background:var(--primary-600);color:#fff;box-shadow:0 3px 8px rgba(109,120,219,.32)}
.gnb-item.active:hover{background:var(--primary-600);color:#fff}
.gnb-item .grow{flex:1}
.gnb-item .count{font-size:12px;font-weight:700;color:rgba(255,255,255,.55);background:rgba(255,255,255,.08);border-radius:5px;padding:1px 6px;line-height:1.4}
.gnb-item.active .count{color:var(--primary-700);background:#fff}
.gnb-profile{display:flex;align-items:center;gap:11px;padding:8px 8px 16px;margin-bottom:12px;border-bottom:1px solid rgba(255,255,255,.1)}
.gnb-avatar{width:34px;height:34px;border-radius:8px;background:var(--primary-600);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0}
.gnb-profile .who{flex:1;line-height:1.35;min-width:0}
.gnb-profile .who b{display:block;color:#fff;font-size:14px;font-weight:700}
.gnb-profile .who span{color:rgba(255,255,255,.45);font-size:14px}
.gnb-logout{margin-top:auto;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:9px;color:rgba(255,255,255,.5);font-size:14px;font-weight:600;transition:all .15s ease}
.gnb-logout:hover{background:rgba(255,255,255,.06);color:#fff}

/* --------------------------------------------------------------------------
   6. 상단바 (breadcrumb)
   -------------------------------------------------------------------------- */
.topbar{height:60px;flex-shrink:0;background:var(--white);border-bottom:1px solid var(--line);display:flex;justify-content:center;padding:0 56px}
.topbar-inner{width:100%;max-width:1360px;display:flex;align-items:center;justify-content:space-between}
.crumbs{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--gray-500)}
.crumbs a{color:var(--gray-500)}
.crumbs a:hover{color:var(--primary-600)}
.crumbs .sep{color:var(--gray-300)}
.crumbs .here{color:var(--primary-700);font-weight:600}
.crumbs svg{color:var(--primary-600);flex-shrink:0}

/* --------------------------------------------------------------------------
   7. 페이지 본문 공통
   -------------------------------------------------------------------------- */
.page{flex:1;padding:32px 56px 48px;display:flex;flex-direction:column}
.page-inner{max-width:1360px;width:100%;margin:0 auto;flex:1;display:flex;flex-direction:column;gap:20px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.page-title h1{margin:0 0 6px;font-size:28px;font-weight:800;letter-spacing:-0.03em}
.page-title p{margin:0;font-size:14px;color:var(--gray-500)}

/* --------------------------------------------------------------------------
   8. 모바일 헤더 / 드로어 (기본 숨김)
   -------------------------------------------------------------------------- */
.mobile-header{display:none}
.drawer-overlay{display:none}

/* --------------------------------------------------------------------------
   9. 반응형 — 공통 셸
   -------------------------------------------------------------------------- */
@media (max-width:768px){
  .gnb{position:fixed;left:0;top:0;height:100vh;transform:translateX(-100%);transition:transform .25s ease;z-index:200}
  .gnb.open{transform:translateX(0)}
  .main{width:100%;min-width:0}

  .mobile-header{display:flex;position:sticky;top:0;z-index:100;align-items:center;gap:10px;height:56px;padding:0 14px;background:var(--white);border-bottom:1px solid var(--line)}
  .hamburger{width:40px;height:40px;border:0;background:transparent;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--ink-900);cursor:pointer;padding:0;margin-left:-6px}
  .hamburger:active{background:var(--surface)}
  .mobile-logo{--logo-w:100px;margin-right:auto}

  .drawer-overlay{display:block;position:fixed;inset:0;background:rgba(23,27,46,.5);z-index:150;opacity:0;pointer-events:none;transition:opacity .25s ease}
  .drawer-overlay.open{opacity:1;pointer-events:auto}

  /* 데스크탑 breadcrumb 바는 기본적으로 숨김 (필요 페이지에서 재노출) */
  .topbar{display:none}

  .page{padding:20px 16px 28px}
  .page-inner{gap:14px}
  .page-head{align-items:flex-start}
  .page-title h1{font-size:22px;line-height:1.25;margin-bottom:4px}
  .page-title p{font-size:13px;line-height:1.45}
}


/* ==========================================================================
   가로로 넓은 표 — 마우스 스크롤 (js/common.js 와 짝)
   .can-pan  : 옆으로 넘길 여유가 있을 때 JS 가 붙입니다 → 손바닥 커서
   .panning  : 실제로 끌고 있는 동안 → 쥔 커서 + 글자 선택 방지
   ========================================================================== */
.table-scroll.can-pan{cursor:grab}
.table-scroll.panning{cursor:grabbing;user-select:none;-webkit-user-select:none}
/* 끌고 있는 동안에는 셀 안의 링크/글자가 끌려나오지 않게 합니다 */
.table-scroll.panning a,
.table-scroll.panning img{pointer-events:none;-webkit-user-drag:none}

/* 스크롤바를 조금 도톰하게 — 마우스로 잡기 쉽게 */
.table-scroll::-webkit-scrollbar{height:10px}
.table-scroll::-webkit-scrollbar-track{background:#EEF0F7;border-radius:6px}
.table-scroll::-webkit-scrollbar-thumb{background:#C3C8DC;border-radius:6px}
.table-scroll::-webkit-scrollbar-thumb:hover{background:#9AA1BF}
.table-scroll{scrollbar-width:thin;scrollbar-color:#C3C8DC #EEF0F7}

/* 모바일 카드형에서는 표가 접히므로 손바닥 커서를 쓰지 않습니다 */
@media (max-width:768px){
  .table-scroll.can-pan{cursor:default}
}