/* 카카오맵 리뷰 접수 - 공통 스타일 (flat, 단색) */
:root{
  --bg:#f5f6f7;
  --card:#ffffff;
  --text:#1f2328;
  --muted:#6b7280;
  --line:#e3e5e8;
  --line-strong:#cfd2d6;
  --green:#22c55e;
  --green-d:#16a34a;
  --orange:#f97316;
  --orange-d:#ea580c;
  --head:#eef3ec;        /* 표 헤더 연녹색 */

  /* 버튼 — 은은한 벽돌빛 빨강 */
  --red:#c0564f;
  --red-d:#a5453f;       /* hover */
  --red-l:#fdf5f4;       /* 연한 배경 */
  --red-line:#e8ccc9;    /* 연한 테두리 */
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:"Malgun Gothic","맑은 고딕",-apple-system,system-ui,sans-serif;
  font-size:14px;
  line-height:1.5;
}
a{color:inherit;text-decoration:none}
.ic{vertical-align:-3px}

/* ---- 상단바 ---- */
.topbar{background:var(--card);border-bottom:1px solid var(--line);position:relative;z-index:30}
.topbar-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:24px;padding:0 20px;height:54px}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:16px;letter-spacing:-.2px;flex:0 0 auto}
.brand img{display:block;width:26px;height:26px;flex:0 0 auto}
/* 데스크탑에선 패널이 그냥 가로 배치 컨테이너 역할만 한다 */
.navpanel{display:flex;align-items:center;gap:24px;flex:1}
.navburger{display:none}
.navscrim{display:none}
.mainnav{display:flex;gap:4px;flex:1}
.mainnav a{display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:6px;color:var(--muted);font-weight:600}
.mainnav a:hover{background:var(--bg);color:var(--text)}
.mainnav a.on{background:var(--head);color:var(--green-d)}
.topbar-right{display:flex;align-items:center;gap:14px}
.who{color:var(--muted);font-size:13px}
.who em{font-style:normal;color:var(--green-d);font-weight:700;margin-left:4px}
.logout{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:13px}
.logout:hover{color:var(--text)}

/* ---- 레이아웃 ---- */
.wrap{max-width:1180px;margin:0 auto;padding:28px 20px 64px}
.wrap-wide{max-width:none;padding-left:28px;padding-right:28px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:20px;gap:16px}
.page-head h1{font-size:20px;margin:0 0 4px}
.page-head .sub{color:var(--muted);font-size:13px}
.card{background:var(--card);border:1px solid var(--line);border-radius:8px}
.card-pad{padding:22px}
.card + .card{margin-top:18px}
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.sec-title{display:flex;align-items:center;gap:7px;font-weight:700;font-size:15px}

/* ---- 버튼 (전부 은은한 빨강 계열) ---- */
.btn{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 16px;border-radius:6px;
  border:1px solid var(--red-line);background:var(--card);color:var(--red-d);font-weight:600;
  font-size:14px;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.btn:hover{background:var(--red-l);border-color:var(--red)}
.btn-primary{background:var(--red);border-color:var(--red);color:#fff}
.btn-primary:hover{background:var(--red-d);border-color:var(--red-d)}
/* 취소·닫기용. 유일하게 색을 빼서 주액션과 헷갈리지 않게 한다 */
.btn-ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn-ghost:hover{color:var(--text);background:var(--bg)}
.btn-sm{height:32px;padding:0 12px;font-size:13px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn[disabled]:hover{background:var(--card);border-color:var(--red-line)}
.btn-primary[disabled]:hover{background:var(--red);border-color:var(--red)}

/* ---- 폼 ---- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1 / -1}
.field label{font-weight:600;font-size:13px}
.field label .req{color:var(--red);margin-left:2px}
.field .hint{color:var(--muted);font-size:12px}
input[type=text],input[type=password],input[type=number],input[type=date],input[type=email],select,textarea{
  width:100%;height:38px;padding:0 11px;border:1px solid var(--line-strong);border-radius:6px;
  background:#fff;color:var(--text);font-size:14px;font-family:inherit;transition:border-color .15s}
textarea{height:auto;padding:10px 11px;resize:vertical;min-height:78px;line-height:1.6}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--green)}
/* 체크·라디오는 브라우저 기본이 파란색이라 팔레트에 맞춰 초록으로 */
input[type=checkbox],input[type=radio]{accent-color:var(--green-d);width:15px;height:15px;cursor:pointer}
.radio-row,.check-row{display:flex;gap:18px;align-items:center;min-height:38px;flex-wrap:wrap}
.radio-row label,.check-row label{display:flex;align-items:center;gap:6px;font-weight:500;cursor:pointer}
.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
/* 발행 요일 선택 */
.dow-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dow{position:relative}
.dow input{position:absolute;opacity:0;width:0;height:0}
.dow span{display:inline-flex;align-items:center;justify-content:center;width:44px;height:38px;
  border:1px solid var(--line-strong);border-radius:7px;font-weight:700;font-size:14px;
  color:var(--muted);background:#fff;cursor:pointer;transition:all .12s;user-select:none}
.dow span:hover{border-color:var(--red)}
.dow.sun span{color:#dc2626}
.dow.sat span{color:#2563eb}
.dow input:checked + span{background:var(--red);border-color:var(--red);color:#fff}
.dow input:focus-visible + span{outline:2px solid var(--green);outline-offset:2px}

.inline-num{display:flex;align-items:center;gap:8px}
.inline-num input{width:96px}
.inline-num .unit{color:var(--muted);font-size:13px;white-space:nowrap}

/* ---- 알림 ---- */
.alert{padding:11px 14px;border-radius:6px;font-size:13px;margin-bottom:18px;border:1px solid}
.alert-ok{background:#f0faf3;border-color:#bfe8cc;color:var(--green-d)}
.alert-err{background:var(--red-l);border-color:var(--red-line);color:var(--red-d)}
.alert-info{background:#fafbfc;border-color:var(--line-strong);color:var(--muted)}

/* ---- 표 ---- */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th,.tbl td{border:1px solid var(--line);padding:9px 11px;text-align:left;vertical-align:middle}
.tbl thead th{background:var(--head);font-weight:700;color:#33402f;white-space:nowrap}
.tbl tbody tr:hover{background:#fafbfa}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.tbl .center{text-align:center}
.tbl a.link{color:var(--green-d);font-weight:600}
.tbl a.link:hover{text-decoration:underline}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---- 상태 뱃지 ---- */
.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:12px;font-weight:700;line-height:1.6}
.st-wait{background:#f1f3f5;color:#6b7280}
.st-ok{background:#eef3ec;color:var(--green-d)}
.st-go{background:#fff4e8;color:var(--orange-d)}
.st-done{background:#e9f7ee;color:var(--green-d)}
.st-hold{background:#f3eefb;color:#7c3aed}
.tag{display:inline-block;padding:1px 7px;border-radius:4px;font-size:11px;font-weight:700;
  background:#eef3ec;color:var(--green-d);vertical-align:1px}
.tag-photo{background:#fff4e8;color:var(--orange-d)}

/* ---- 통계 ---- */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:18px 20px}
.stat .lab{color:var(--muted);font-size:12px;font-weight:600;margin-bottom:6px}
.stat .val{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2}
.stat .val small{font-size:13px;font-weight:600;color:var(--muted);margin-left:3px}

/* ---- 빈 상태 ---- */
.empty{text-align:center;padding:56px 20px;color:var(--muted)}
.empty p{margin:0 0 14px}

/* ---- 로그인 / 회원가입 ---- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{width:100%;max-width:360px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:32px 28px}
.login-card.wide{max-width:520px}
.login-logo{display:block;margin:0 auto 14px}
.login-card h1{font-size:18px;margin:0 0 4px;text-align:center}
.login-card .sub{color:var(--muted);font-size:13px;text-align:center;margin-bottom:24px}
.login-card .field{margin-bottom:14px}
.login-card .btn{width:100%;justify-content:center;margin-top:6px}
.login-foot{text-align:center;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  color:var(--muted);font-size:13px}
.login-foot a{color:var(--green-d);font-weight:700}
.login-foot a:hover{text-decoration:underline}

/* ---- 진행률 미니바 ---- */
.prog-row{display:flex;align-items:center;gap:7px;font-size:12px;line-height:1.9}
.prog-lab{flex:0 0 30px;color:var(--muted);font-weight:600}
.prog-track{flex:1;height:7px;background:var(--line);border-radius:4px;overflow:hidden;min-width:70px}
.prog-track i{display:block;height:100%;border-radius:4px}
.prog-num{flex:0 0 auto;font-variant-numeric:tabular-nums;color:var(--text);min-width:52px;text-align:right}
.prog-big{height:10px}

/* ---- 포토 그리드 ---- */
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.photo-item{position:relative;border:1px solid var(--line);border-radius:7px;overflow:hidden;background:#fafbfc}
.photo-item img{display:block;width:100%;height:104px;object-fit:cover}
.photo-item .pno{position:absolute;left:0;top:0;background:rgba(31,35,40,.72);color:#fff;
  font-size:11px;font-weight:700;padding:2px 7px;border-bottom-right-radius:6px}
.photo-del{position:absolute;right:4px;top:4px;width:22px;height:22px;border:0;border-radius:5px;
  background:rgba(31,35,40,.72);color:#fff;font-size:14px;line-height:1;cursor:pointer;font-family:inherit}
.photo-del:hover{background:var(--red-d)}
.dropzone{border:1px dashed var(--line-strong);border-radius:8px;padding:26px 18px;text-align:center;
  color:var(--muted);font-size:13px;background:#fafbfc;cursor:pointer;transition:border-color .15s,background .15s}
.dropzone:hover,.dropzone.over{border-color:var(--green);background:#f6fbf7;color:var(--green-d)}
.dropzone b{display:block;color:var(--text);font-size:14px;margin-bottom:4px}

/* ---- 원고 슬롯 ---- */
.slot{border:1px solid var(--line);border-radius:8px;background:#fff;padding:14px;margin-bottom:10px}
.slot.is-published{border-color:#bfe8cc;background:#fbfdfb}
.slot-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.slot-no{font-weight:700;font-size:14px;font-variant-numeric:tabular-nums;min-width:34px}
.slot-date{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.slot-tools{margin-left:auto;display:flex;gap:6px;align-items:center}
.slot textarea{min-height:72px;font-size:13px}
.slot-photos{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}
.slot-photos img{width:52px;height:52px;object-fit:cover;border-radius:5px;border:1px solid var(--line)}
.slot-meta{color:var(--muted);font-size:12px;margin-top:8px}

/* ---- 오늘 발행 ---- */
.day-group{border:1px solid var(--line);border-radius:8px;background:#fff;margin-bottom:16px;overflow:hidden}
.day-group-head{display:flex;align-items:center;gap:12px;padding:13px 16px;background:var(--head);
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.day-group-head .name{font-weight:700;font-size:15px;color:#33402f}
.day-group-head .cnt{color:var(--green-d);font-weight:700;font-size:13px}
.day-group-head .tools{margin-left:auto;display:flex;gap:8px;align-items:center}
.day-group-body{padding:14px 16px}
.copy-box{position:relative}
.copy-btn{position:absolute;right:8px;top:8px}

/* 표 안에서 쓰는 작은 텍스트 버튼 */
.linkbtn{border:0;background:transparent;padding:0 2px;margin-left:6px;font-family:inherit;
  font-size:12px;font-weight:600;color:var(--red-d);cursor:pointer;text-decoration:underline}
.linkbtn:hover{color:var(--red)}

.hint{color:var(--muted);font-size:12px}
.sub{color:var(--muted);font-size:13px}
.mono{font-family:Consolas,"D2Coding",monospace;font-size:12px}
.nowrap{white-space:nowrap}

@media(max-width:760px){
  .form-grid{grid-template-columns:1fr}
  .wrap{padding:18px 12px 56px}
  .topbar-in{gap:10px;padding:0 12px;justify-content:space-between}
  .brand{font-size:15px;gap:8px;min-width:0}
  .brand img{width:24px;height:24px}
  .brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* ---- 햄버거 메뉴 ---- */
  .navburger{display:inline-flex;align-items:center;justify-content:center;
    width:40px;height:40px;margin-right:-8px;padding:0;border:0;border-radius:8px;
    background:transparent;color:var(--text);cursor:pointer}
  .navburger:hover{background:var(--bg)}
  .navburger .nb-close{display:none}
  body.nav-open .navburger .nb-open{display:none}
  body.nav-open .navburger .nb-close{display:inline-flex}

  /* 메뉴·계정정보 전체가 이 패널 안으로 들어간다.
     표시/숨김은 display 로만 한다 — opacity·visibility 트랜지션은 렌더링이 멈춘 상황
     (백그라운드 탭·절전·저사양)에서 시작값에 머물러 "메뉴가 안 열리는" 사고를 낸다.
     아래 애니메이션은 장식일 뿐, 안 돌아도 패널은 정상 표시된다. */
  .navpanel{position:absolute;left:0;right:0;top:100%;
    display:none;flex:none;background:var(--card);
    border-bottom:1px solid var(--line);box-shadow:0 8px 20px rgba(0,0,0,.08);
    padding:8px 12px 12px}
  body.nav-open .navpanel{display:block;animation:navdrop .16s ease-out}
  @keyframes navdrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
  @media(prefers-reduced-motion:reduce){
    body.nav-open .navpanel{animation:none}
  }

  .navpanel .mainnav{display:block}
  .navpanel .mainnav a{display:flex;gap:10px;padding:12px 10px;border-radius:7px;
    font-size:15px;color:var(--text)}
  .navpanel .mainnav a.on{background:var(--head);color:var(--green-d)}
  .navpanel .mainnav a + a{margin-top:2px}

  .navpanel .topbar-right{display:flex;align-items:center;justify-content:space-between;
    gap:12px;margin-top:8px;padding:12px 10px 4px;border-top:1px solid var(--line)}
  .navpanel .who{display:block;font-size:13px}
  .navpanel .logout{font-size:14px;font-weight:600;padding:6px 10px;border-radius:7px}
  .navpanel .logout:hover{background:var(--bg)}

  /* 메뉴 뒤 화면을 덮어 바깥 클릭을 받는다.
     [hidden] 은 클래스 선택자에 밀리므로 표시는 body.nav-open 으로만 제어한다 */
  .navscrim{display:none;position:fixed;inset:0;z-index:20;background:rgba(15,17,20,.28)}
  body.nav-open .navscrim{display:block}
  body.nav-open{overflow:hidden}

  .page-head{flex-direction:column;align-items:stretch}
  .stat-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .form-actions{flex-direction:column-reverse}
  .form-actions .btn{width:100%;justify-content:center}
  .photo-grid{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
  .photo-item img{height:88px}
  .day-group-head .tools{width:100%;margin-left:0;flex-wrap:wrap}
  /* flex:1 로 3등분하면 글자가 두 줄로 쪼개진다. 내용만큼 잡고 모자라면 줄바꿈. */
  .day-group-head .tools .btn{flex:1 1 auto;justify-content:center;white-space:nowrap}
}