/*
 * 한그루 리소 공통 스타일 — 관리자(/ops/)와 부모용 화면(/friends/ 등)이 함께 쓴다.
 * 형태: uxui-design-coach/references/hangru-form-spec.md
 *   글자 13(배지·짧은 라벨만)·16·21·28·37 / 여백 4·8·12·20·32·52 / 라운드 버튼·입력 6, 카드 14, 큰 박스 20, 배지 999
 * 색: palettes.md 「한그루 리소」 + 리소 서명(그레인·하드 그림자·노랑 강조). 그라데이션·블러 금지.
 * 본문 CSS에 hex를 쓰지 않는다. 필요한 색은 여기 토큰으로 추가한다.
 */
:root{
  --paper:#F7F6F2; --card:#FFFFFF; --input:#F3F1ED;
  --ink:#17171A; --muted:#5A5A62; --faint:#78767E; --line:#D9D6CF;
  --brand:#2C5443; --blue:#0078BF; --blue-text:#0067A6;
  --yellow:#FFE800; --green:#00A95C; --danger:#A4262C; --on-dark:#FFFFFF;
  --tint-yellow:#FBF3B4; --tint-blue:#D6E6F2; --tint-green:#CDEBD9; --tint-red:#F3D9D9;
  --shadow:3px 3px 0 rgba(23,23,26,.13);
  --shadow-btn:2px 2px 0 rgba(23,23,26,.18);
  --shadow-btn-up:3px 3px 0 rgba(23,23,26,.22);
  --shadow-pop:6px 6px 0 rgba(23,23,26,.16);
  --scrim:rgba(23,23,26,.32); --hover:rgba(23,23,26,.05);
  --font:"Pretendard Variable",Pretendard,"Noto Sans KR","Malgun Gothic",sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.75;letter-spacing:-.015em;word-break:keep-all}
[hidden]{display:none !important}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
a{color:var(--blue-text)}
.mono{font-family:var(--mono);letter-spacing:0}

/* 리소 서명 1: 그레인. 페이지에 <svg class="riso-defs">…#riso-grain… 한 번 넣는다(layout.php). */
.riso-defs{position:absolute;width:0;height:0}
body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;filter:url(#riso-grain) contrast(160%) brightness(115%);opacity:.06;mix-blend-mode:multiply}
@media print{body::after{display:none}}

/* 글자 */
h1,.t-37{font-size:37px;line-height:1.25;font-weight:800;letter-spacing:-.02em;margin:0}
h2,.t-28{font-size:28px;line-height:1.25;font-weight:800;letter-spacing:-.02em;margin:0}
h3,.t-21{font-size:21px;line-height:1.3;font-weight:800;margin:0}
.t-13{font-size:13px;line-height:1.5}
.muted{color:var(--muted)}
mark{background:var(--yellow);color:var(--ink);padding:0 4px}

/* 버튼 — 리소 서명 2: 하드 오프셋 그림자 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:6px;border:1.5px solid var(--ink);background:var(--card);font:inherit;font-weight:700;color:var(--ink);cursor:pointer;text-decoration:none;box-shadow:var(--shadow-btn);transition:transform .08s,box-shadow .08s;white-space:nowrap}
.btn:hover{transform:translate(-1px,-1px);box-shadow:var(--shadow-btn-up)}
.btn:active{transform:translate(1px,1px);box-shadow:none}
.btn:disabled,.btn[aria-disabled=true]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn.main{background:var(--yellow)}   /* 리소 서명 3: 노랑 주 버튼 */
.btn.dark{background:var(--ink);color:var(--paper)}
.btn.sm{min-height:38px;padding:0 12px}
.btn.danger{color:var(--danger);border-color:var(--danger)}
.btn.flat{box-shadow:none;border-color:var(--line)}
.btn.flat.on{border-color:var(--ink);box-shadow:var(--shadow-btn)}

/* 입력 */
.input,input[type=text],input[type=password],input[type=search],input[type=date],input[type=tel],input[type=month],select,textarea{width:100%;min-height:44px;border:1.5px solid var(--line);border-radius:6px;background:var(--input);padding:8px 12px;font:inherit;color:var(--ink)}
textarea{min-height:84px;resize:vertical}
.input:focus,input:focus,select:focus,textarea:focus{border-color:var(--ink);background:var(--card);outline:none}
input::placeholder,textarea::placeholder{color:var(--faint)}
label.field{display:block;font-weight:700;margin:0 0 8px}

/* 탭(한 화면 안의 구분) */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.tab{min-height:44px;padding:0 20px;border:1.5px solid var(--line);border-radius:6px;background:var(--card);font:inherit;font-weight:700;color:var(--ink);cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.tab:hover{border-color:var(--ink)}
.tab.on{background:var(--ink);border-color:var(--ink);color:var(--paper);box-shadow:var(--shadow-btn)}
.tab .n{min-width:28px;padding:0 8px;border-radius:999px;background:var(--paper);border:1px solid var(--ink);color:var(--ink);font-size:13px;line-height:22px;text-align:center;font-family:var(--mono)}
.tab.on .n{background:var(--yellow)}

/* 칩(필터) */
.chip{min-height:38px;padding:0 12px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);font:inherit;font-weight:600;color:var(--ink);cursor:pointer}
.chip:hover{border-color:var(--ink)}
.chip.on{background:var(--brand);border-color:var(--brand);color:var(--on-dark)}

/* 배지 */
.badge{display:inline-block;padding:0 12px;border-radius:999px;border:1px solid var(--ink);font-size:13px;line-height:24px;font-weight:800;white-space:nowrap;color:var(--ink);background:var(--card)}
.badge.yellow{background:var(--yellow)} .badge.blue{background:var(--blue);color:var(--on-dark)}
.badge.green{background:var(--tint-green)} .badge.gray{background:var(--input)} .badge.red{background:var(--tint-red)}
.pill{display:inline-block;padding:0 8px;border-radius:999px;border:1px solid var(--ink);font-size:13px;line-height:22px;white-space:nowrap}

/* 카드·박스 */
.card{border:1.5px solid var(--ink);border-radius:14px;background:var(--card);box-shadow:var(--shadow)}
.card.pad{padding:20px}
.notice{padding:12px 20px;border:1.5px solid var(--ink);border-radius:14px;background:var(--yellow)}
.note{padding:12px 20px;border:1.5px dashed var(--ink);border-radius:14px;background:var(--card)}

/* 표 */
.table-box{border:1.5px solid var(--ink);border-radius:14px;overflow:hidden;background:var(--card);box-shadow:var(--shadow)}
table.grid{width:100%;border-collapse:collapse}
.grid th{background:var(--ink);color:var(--paper);text-align:left;font-size:13px;font-weight:700;padding:8px 12px;white-space:nowrap}
.grid td{padding:12px;border-top:1px solid var(--line);vertical-align:top}
.grid tbody tr.click{cursor:pointer}
.grid tbody tr.click:hover td{box-shadow:inset 0 0 0 999px var(--hover)}
.grid .empty td{text-align:center;padding:32px}

/* 상세 창(가운데 모달) */
.panel-bg{position:fixed;inset:0;background:var(--scrim);z-index:20}
.panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(760px,calc(100% - 40px));max-height:calc(100vh - 52px);background:var(--paper);z-index:21;border:1.5px solid var(--ink);border-radius:20px;box-shadow:var(--shadow-pop);display:flex;flex-direction:column;overflow:hidden}
.panel-head{padding:20px;border-bottom:1.5px solid var(--ink);background:var(--card);display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.panel-body{padding:20px 20px 52px;overflow-y:auto}
.x{width:44px;height:44px;flex:none;border:1.5px solid var(--ink);border-radius:6px;background:var(--paper);font:inherit;font-size:21px;line-height:1;cursor:pointer;color:var(--ink)}
.sec-t{font-size:16px;font-weight:800;margin:32px 0 8px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.sec-t:first-child{margin-top:0}

/* 대화상자 */
dialog.dlg{border:1.5px solid var(--ink);border-radius:20px;background:var(--paper);box-shadow:var(--shadow-pop);padding:0;width:min(560px,calc(100% - 24px));color:var(--ink)}
dialog.dlg::backdrop{background:var(--scrim)}
.dlg-head{padding:20px;border-bottom:1.5px solid var(--ink);background:var(--card);display:flex;justify-content:space-between;align-items:center;gap:12px}
.dlg-body{padding:20px;display:grid;gap:12px}
.dlg-foot{padding:12px 20px 20px;display:flex;justify-content:flex-end;gap:8px}

/* 스위치 */
.switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-weight:700}
.switch input{width:44px;height:24px;min-height:0;margin:0;padding:0;appearance:none;background:var(--line);border:1.5px solid var(--ink);border-radius:999px;position:relative;cursor:pointer}
.switch input::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:999px;background:var(--paper);border:1px solid var(--ink);transition:left .15s}
.switch input:checked{background:var(--green)}
.switch input:checked::after{left:21px}

/* 토스트 */
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:8px 20px;border-radius:999px;box-shadow:var(--shadow-btn);font-weight:700;opacity:0;transition:opacity .2s;z-index:70;pointer-events:none}
.toast.show{opacity:1}
.toast.err{background:var(--danger)}

/* 관리자 셸 (layout.php) */
.ops-top{background:var(--card);border-bottom:1.5px solid var(--ink)}
.ops-top-in{max-width:1180px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.ops-brand{font-weight:800;font-size:16px;color:var(--ink);text-decoration:none;margin-right:12px}
.ops-nav{display:flex;gap:8px;flex-wrap:wrap}
.ops-nav a{min-height:38px;padding:0 12px;display:inline-flex;align-items:center;border-radius:6px;border:1.5px solid transparent;color:var(--ink);font-weight:700;text-decoration:none}
.ops-nav a:hover{border-color:var(--line)}
.ops-nav a.on{background:var(--yellow);border-color:var(--ink);box-shadow:var(--shadow-btn)}
.ops-top .spacer{flex:1}
.ops-wrap{max-width:1180px;margin:0 auto;padding:32px 20px 52px}
.ops-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:20px}
.ops-head p{margin:4px 0 0}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.row.end{justify-content:flex-end}
.grow{flex:1}

@media (max-width:760px){
  .ops-wrap{padding:20px 12px 52px}
  .panel{width:calc(100% - 24px);max-height:calc(100vh - 24px)}
  h1,.t-37{font-size:28px}
}