/* ══════════════════════════════════════════════════════════════════
   거제섬-사람이야기연구소 운영 시스템 — 공용 모양새

   색과 서체는 index.html 의 것을 그대로 씁니다. 같은 집이니까요.
   본문 18px, 누르는 자리 44px 이상 — 어르신이 보시기 편하도록 지킵니다.
   ══════════════════════════════════════════════════════════════════ */

:root{
  --paper:#faf7f0;        /* 한지빛 미색 */
  --paper-deep:#f3eee2;
  --ink:#2b2a26;          /* 먹빛 본문 */
  --ink-soft:#6b675e;
  --sea:#1e3a5f;          /* 거제 바다 남빛 */
  --sea-soft:#3d5a80;
  --line:#e0d9c8;
  --serif:'Noto Serif KR', serif;
  --sans:'Noto Sans KR', sans-serif;
  /* 알림에 쓰는 색. 포인트는 남빛 하나라는 원칙을 지키되,
     '되었다 / 안 되었다'는 색으로도 알려 드려야 하기에 둘만 더 씁니다. */
  --good:#2f6b4f;
  --bad:#9c3b30;
}

*{margin:0;padding:0;box-sizing:border-box}
/* ★ text-size-adjust 를 지우지 마십시오. iOS(사파리·카톡 안 브라우저)가
   긴 글이 있는 쪽에서 글자를 제멋대로 키워 화면이 무너집니다. 2026-08-27 확인. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:18px;line-height:1.75;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--serif);letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
img{max-width:100%}
/* ★ hidden 은 늘 이깁니다.
   display 를 정하는 클래스(.grid2 · .btn-row · .tag …)가 붙어 있으면 브라우저 기본
   [hidden] 규칙이 눌려, hidden 을 달아 두어도 아무 일이 없습니다. 2026-08-24 에
   /lab/ 의 로그인 상자가 로그인한 분께도 계속 보이던 까닭이 이것입니다.
   화면에서 감추는 것은 자물쇠가 아니지만, 감춘다고 적었으면 감춰져야 합니다. */
[hidden]{display:none !important}
.wrap{max-width:1000px;margin:0 auto;padding:0 22px}

/* ── 머리 ───────────────────────────── */
/* ★ backdrop-filter 를 되넣지 마십시오.
   iOS 사파리는 흐림 겹이 얹힌 sticky 머리글 아래에서 화면을 다시 칠하다 놓칩니다.
   2026-08-29, 숫자로 로그인하신 소장님 휴대폰이 통째로 빈 채 떴고 손가락으로
   쓸어 올려야 나타났습니다. 바탕색이 본문과 같은 한지빛이라 떼어도 보기에는
   달라지지 않습니다 — 얻는 것 없이 다시 칠할 겹만 하나 더 얹던 자리였습니다. */
header{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px}
.logo{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-weight:700;font-size:1.05rem;min-width:0}
.logo img{width:38px;height:38px;object-fit:contain;flex:0 0 auto}
/* ★ 이름이 한 줄에 들어가야 합니다. 없으면 '거제섬-사람이야 / 기연구소' 로
   낱말 한가운데가 갈립니다. 2026-08-27 휴대폰에서 확인했습니다. */
.logo > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logo small{display:block;font-family:var(--sans);font-weight:400;font-size:.66rem;color:var(--ink-soft);letter-spacing:.12em}
.nav-right{display:flex;align-items:center;gap:8px;font-size:.9rem;flex:0 0 auto}
.who{color:var(--ink-soft);white-space:nowrap;line-height:1.35;text-align:right}
.who b{color:var(--sea);display:block;font-weight:500}
.who i{font-style:normal;font-size:.78rem;opacity:.85}

/* ── 아이콘 단추 ─────────────────────────
   ★ 글자를 붙이지 않습니다. 그림만 둡니다(2026-08-27 소장님 결정).
     홈과 로그아웃은 누구나 아는 그림이고, 글자를 붙이면 좁은 화면에서
     '로/그/아/웃' 으로 쌓여 머리글이 무너집니다.
     무엇인지는 길게 누르시면 뜹니다(title) — lab-core.js 의 iconBtn 참고. */
.icon-btn{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:0 0 auto;border:1px solid var(--line);border-radius:3px;
  background:#fff;color:var(--ink-soft);cursor:pointer;transition:.18s;padding:0}
/* ★ 그림을 상자에 꽉 차게 키웁니다(2026-08-28 소장님 요청).
   상자 44px 은 그대로 둡니다 — 누르는 자리라 줄이면 안 됩니다. 안쪽 여백만 덜어 냅니다.
   ⚠ svg 크기가 곧 그림 크기는 아닙니다. 획이 viewBox 24 안에서 3~21 자리에만 그려져,
     실제로 보이는 그림은 svg 의 약 84% 입니다(획 굵기 2.1 이 밖으로 반쯤 걸칩니다).
     그래서 22px → 32px 로 키워야 그림이 18.5px → 26.9px 가 됩니다.
   테두리 1px 을 빼면 안쪽이 42px 이니, 32px 그림 둘레에 5px 이 남습니다.
   이보다 키우면 획이 테두리에 닿습니다. */
.icon-btn svg{width:32px;height:32px;flex:0 0 auto;display:block}
.icon-btn:hover,.icon-btn:focus-visible{border-color:var(--sea);color:var(--sea);background:#fff}
.icon-btn.on{border-color:var(--sea);color:var(--sea)}

/* 운영 시스템 안의 이동 줄 */
.tabs{border-bottom:1px solid var(--line);background:var(--paper)}
.tabs ul{display:flex;flex-wrap:wrap;gap:2px;list-style:none;font-size:.93rem}
.tabs a{display:block;padding:13px 15px;color:var(--ink-soft);border-bottom:2px solid transparent;min-height:44px}
.tabs a:hover{color:var(--sea)}
.tabs a.on{color:var(--sea);border-bottom-color:var(--sea);font-weight:500}

/* ── 쪽 머리 ────────────────────────── */
.page-head{padding:44px 0 26px}
.page-head .num{font-family:var(--serif);color:var(--sea-soft);font-size:.88rem;letter-spacing:.2em}
.page-head h1{font-size:clamp(1.5rem,3.2vw,2rem);font-weight:600;margin-top:10px}
.page-head p{color:var(--ink-soft);margin-top:14px;font-size:.97rem;max-width:44em;word-break:keep-all}

main{padding-bottom:80px;min-height:50vh}

/* ── 상자 ───────────────────────────── */
.card{background:#fff;border:1px solid var(--line);border-radius:3px;padding:24px 26px;margin-bottom:20px}
.card > h2{font-size:1.12rem;font-weight:600;margin-bottom:14px;word-break:keep-all}
.card > h3{font-size:1rem;font-weight:600;margin-bottom:10px;word-break:keep-all}
.card-lead{color:var(--ink-soft);font-size:.93rem;margin-bottom:16px;word-break:keep-all}

/* 눌러서 가는 상자 — 누를 수 있다는 것이 보여야 합니다.
   ★ 화살표와 왼쪽 띠가 그 표시입니다. 밋밋한 네모는 글 상자처럼 보입니다. */
a.card{display:block;position:relative;padding-left:30px;overflow:hidden}
a.card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--sea);opacity:.3;transition:.18s}
a.card::after{content:'';position:absolute;right:24px;top:50%;width:9px;height:9px;
  margin-top:-5px;border-right:2px solid var(--sea);border-bottom:2px solid var(--sea);
  transform:rotate(-45deg);opacity:.45;transition:.18s}
a.card > h3{color:var(--sea);padding-right:26px}
a.card:hover,a.card:focus-visible{border-color:var(--sea-soft);box-shadow:0 3px 14px rgba(30,58,95,.09)}
a.card:hover::before,a.card:focus-visible::before{opacity:1}
a.card:hover::after,a.card:focus-visible::after{opacity:1;right:19px}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

/* ── 알림 ───────────────────────────── */
.note{background:var(--paper-deep);border-left:3px solid var(--sea);padding:16px 20px;font-size:.92rem;margin-bottom:18px;word-break:keep-all}
.note.good{border-left-color:var(--good)}
.note.bad{border-left-color:var(--bad)}
.note b{color:var(--sea)}
.note.good b{color:var(--good)}
.note.bad b{color:var(--bad)}
/* 안내 문구 끝에 붙는 '갈 곳'. 어르신이 누르기 쉽게 한 줄 아래 큼직하게 둡니다 */
.note-go{display:block;width:fit-content;margin-top:14px;padding:10px 18px;background:var(--sea);color:#fff;
  text-decoration:none;border-radius:2px;font-weight:500;font-size:.95rem;min-height:38px;line-height:20px}
.note-go:hover,.note-go:focus{background:var(--ink)}

/* 화면 전체를 덮는 알림 — 연결이 아예 안 될 때 씁니다. */
.fatal{max-width:36em;margin:80px auto;background:#fff;border:1px solid var(--bad);border-left:4px solid var(--bad);padding:28px 30px}
.fatal h2{font-size:1.1rem;color:var(--bad);margin-bottom:12px}
.fatal p{font-size:.94rem;color:var(--ink-soft);word-break:keep-all}

/* ── 단추 ───────────────────────────── */
/* ★ white-space:nowrap 을 지우지 마십시오.
   없으면 좁은 폭에서 '로그아웃' 이 '로/그/아/웃' 으로 세로로 쌓입니다.
   2026-08-27, 카톡 안 브라우저 머리글에서 실제로 그렇게 무너졌습니다. */
.btn{display:inline-block;padding:13px 26px;border-radius:2px;font-size:.95rem;font-weight:500;font-family:inherit;
  border:1px solid transparent;background:none;cursor:pointer;transition:.2s;min-height:44px;text-align:center;
  white-space:nowrap}
.btn-primary{background:var(--sea);color:#fff}
.btn-primary:hover{background:#16304f}
.btn-ghost{border-color:var(--sea);color:var(--sea)}
.btn-ghost:hover{background:var(--sea);color:#fff}
.btn-quiet{border-color:var(--line);color:var(--ink-soft)}
.btn-quiet:hover{border-color:var(--ink-soft);color:var(--ink)}
.btn-danger{border-color:var(--bad);color:var(--bad)}
.btn-danger:hover{background:var(--bad);color:#fff}
.btn-sm{padding:8px 15px;font-size:.86rem;min-height:38px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
/* 메일을 보낸 뒤에 열리는 '숫자 적는 칸'. 앞의 폼과 한 줄로 갈라 둡니다 —
   붙여 두면 단추 바로 밑에 라벨이 닿아 같은 걸음처럼 보입니다. */
.code-step{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}

/* ── 적는 자리 ──────────────────────── */
.field{margin-bottom:18px}
.field label{display:block;font-size:.9rem;font-weight:500;margin-bottom:7px}
.field .hint{display:block;font-weight:400;color:var(--ink-soft);font-size:.84rem;margin-top:3px}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:2px;
  background:#fff;font-family:inherit;font-size:1rem;color:var(--ink);min-height:48px}
.field textarea{min-height:120px;line-height:1.7;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--sea-soft);outline-offset:-1px;border-color:var(--sea)}
.field .req{color:var(--bad);margin-left:3px}
.field-err{color:var(--bad);font-size:.86rem;margin-top:6px}

/* ── 표 ─────────────────────────────── */
.tbl-scroll{overflow-x:auto;margin-bottom:18px}
.tbl{width:100%;border-collapse:collapse;font-size:.9rem;background:#fff}
.tbl th,.tbl td{border:1px solid var(--line);padding:11px 13px;text-align:left;vertical-align:top;line-height:1.7}
.tbl th{background:var(--paper-deep);font-weight:500;white-space:nowrap}
.tbl td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl tr:hover td{background:#fdfcf9}

/* ── 딱지 ───────────────────────────── */
.tag{display:inline-block;padding:2px 9px;border:1px solid var(--line);border-radius:2px;font-size:.76rem;
  color:var(--ink-soft);white-space:nowrap;vertical-align:middle}
.tag-sea{border-color:var(--sea);color:var(--sea)}
.tag-good{border-color:var(--good);color:var(--good)}
.tag-bad{border-color:var(--bad);color:var(--bad)}

/* ── 기다림과 빈자리 ────────────────── */
.loading,.empty{padding:44px 20px;text-align:center;color:var(--ink-soft);font-size:.94rem}
.empty b{display:block;color:var(--ink);font-family:var(--serif);font-size:1.05rem;margin-bottom:8px}

/* ── 표결 ───────────────────────────── */
.vote-row{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.vote-row .btn{flex:1;min-width:110px}
.vote-row .btn.on{background:var(--sea);color:#fff;border-color:var(--sea)}
.tally{display:flex;gap:18px;flex-wrap:wrap;font-size:.9rem;color:var(--ink-soft);margin-top:10px}
.tally b{color:var(--ink);font-variant-numeric:tabular-nums}
/* 금액 칸 — 재정·감사·첫 화면(회비 신고)이 함께 씁니다. 도우미(armWon)는 lab-core.js 에.
   2026-09-21 에 재정·감사 쪽 <style> 에서 여기로 옮겼습니다 */
.field input.won{font-variant-numeric:tabular-nums;font-size:1.08rem;letter-spacing:.02em}
.won-say{margin-top:6px;font-size:.9rem;color:var(--sea);min-height:1.3em}
.won-say.big{font-weight:500}
.opinion{border-top:1px solid var(--line);padding-top:14px;margin-top:14px}
.opinion li{list-style:none;padding:10px 0;border-bottom:1px dashed var(--line);font-size:.92rem}
.opinion li:last-child{border-bottom:none}
.opinion .by{color:var(--ink-soft);font-size:.85rem;margin-bottom:4px}

/* ── 사진 ───────────────────────────── */
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.thumbs figure{background:#fff;border:1px solid var(--line);padding:8px}
.thumbs img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--paper-deep)}
.thumbs figcaption{font-size:.82rem;color:var(--ink-soft);margin-top:7px;word-break:keep-all}

/* ── 글과 답글 ──────────────────────── */
.post{background:#fff;border:1px solid var(--line);padding:22px 24px;margin-bottom:14px}
.post h3{font-size:1.05rem;margin-bottom:6px}
.post .by{color:var(--ink-soft);font-size:.85rem;margin-bottom:12px}
.post .body{white-space:pre-wrap;word-break:keep-all}
.reply{border-left:2px solid var(--line);margin:14px 0 0 14px;padding-left:16px}

/* ── 발 ─────────────────────────────── */
footer{background:#25313f;color:#93a0af;padding:44px 0 38px;font-size:.84rem;line-height:2}
footer .f-name{font-family:var(--serif);color:#fff;font-size:1rem;margin-bottom:8px}
footer a{color:#c3cfdd}
footer .legal{margin-top:22px;padding-top:18px;border-top:1px solid #3a4756;font-size:.78rem}

/* ── 좁은 화면 ──────────────────────── */
@media(max-width:760px){
  body{font-size:17px}
  .grid2,.grid3{grid-template-columns:1fr}
  .card{padding:20px 18px}
  a.card{padding-left:24px}
  .logo small{display:none}
  /* 부제가 감춰져 한 줄이 되므로 이름을 키웁니다. 셈은 480px 블록과 같고,
     이 폭에서는 상한 1.2rem 에 걸려 고정됩니다. */
  .logo{font-size:clamp(.9rem,calc(9.32vw - 15.84px),1.2rem)}
  .nav{padding:8px 0}
  .btn-row .btn{width:100%}
  .tabs ul{gap:0}
  .tabs a{padding:12px 12px;font-size:.9rem}
  /* 쪽 머리가 첫 화면을 다 먹지 않게 조입니다. 다음 것이 조금 보여야
     사람이 손가락을 움직입니다 — 홈에서 배운 것을 여기에도 씁니다. */
  .page-head{padding:26px 0 18px}
  .page-head p{margin-top:10px;font-size:.94rem}
}

/* 손바닥만 한 화면 — 머리글이 무너지지 않게 조입니다.
   2026-08-27, 카톡 안 브라우저에서 로고가 '거제섬-사람이야 / 기연구소' 로 갈리고
   [로그아웃] 이 넉 줄로 쌓인 것을 보고 다시 손봤습니다. */
@media(max-width:480px){
  .wrap{padding:0 16px}
  .nav{min-height:54px;gap:8px}
  /* ★ 이름을 자리에 꽉 차게 키웁니다(2026-08-28 소장님 요청).
     머리글은 space-between 이라 남는 자리가 '이름과 아이콘 사이의 틈'으로 버려집니다.
     이름 글자를 키우면 그 틈이 저절로 메워집니다 — 줄일 간격 설정은 따로 없습니다.
       이름에 주어지는 폭 = 화면폭 − 32(양옆) − 29(그림) − 7(사이) − 8(.nav gap)
                        − 86(아이콘 둘) − 8(여유) = 화면폭 − 170

     ★★ '거제섬-사람이야기연구소' 의 실제 폭은 글자크기의 10.73배입니다.
       처음에 12자폭으로 잡았다가 잘렸고, 다시 재어 14.3자폭으로 고쳤는데 그것도 틀렸습니다.
       ⚠⚠ 14.3 은 카톡 브라우저의 글자 크기 설정(가가)이 125% 인 화면을 잰 값이었습니다.
         10.73 × 1.25 = 13.4 — 그래서 그 언저리가 나왔던 것입니다.
       2026-08-28 저녁, 같은 쪽을 사파리(100%)와 카톡(125%)으로 각각 찍은 화면 두 장을
       픽셀 단위로 재어 갈랐습니다. 로고 '그림'은 두 장이 똑같은데 '글자'만 1.24배였고,
       가로와 세로가 같은 비율이라 글자 크기 자체가 커진 것이 확인되었습니다.
       ⚠ 우리가 기준으로 삼는 것은 100% 입니다. 가가 설정은 사람마다 다르고 우리가
         어찌할 수 있는 것이 아닙니다. 125% 로 보시는 분께는 말줄임표로 잘립니다.

       글자크기 = (화면폭 − 170) ÷ 10.73 → calc(9.32vw - 15.84px)
     letter-spacing 을 −.02em 만 조인 것은 그만큼 이름이 커질 수 있어서입니다.
     line-height 1.3 은 머리글 높이 54px 을 지키기 위한 것입니다
     (이 폭에서는 .logo small 이 감춰져 있어 조여도 무방합니다).

     ★ 상한 1.2rem 은 아이콘 둘이 놓인 이 머리글에서 375px 화면을 꽉 채우는 값입니다.
       홈(1.45rem)·방침(1.4rem)보다 작은 것은 자리가 좁아서이지 실수가 아닙니다.
     ⚠ 아이콘 상자는 줄이지 않습니다 — 40px 도 권장 44px 아래고, 어르신이 누르실 자리입니다. */
  .logo{font-size:clamp(.9rem,calc(9.32vw - 15.84px),1.2rem);gap:7px;line-height:1.3;letter-spacing:-.02em}
  .logo img{width:29px;height:29px}
  .nav-right{gap:6px}
  .icon-btn{width:40px;height:40px}
  /* 상자는 40px 그대로, 안쪽 여백만 덜어 그림을 키웁니다(위 .icon-btn svg 주석 참고).
     테두리를 뺀 안쪽 38px 에 29px 그림이니 둘레에 4.5px 이 남습니다. */
  .icon-btn svg{width:29px;height:29px}
  /* ★ 성함은 여기서 감춥니다. 로고와 아이콘 둘이 한 줄에 들어가야 하는데
     '김대성 소장' 이 그 자리를 다 먹습니다.
     누구로 들어와 있는지는 [로그아웃] 을 길게 누르시면 보이고(title),
     /lab/ 첫 화면의 인사말에도 성함이 나옵니다. */
  .who{display:none}
  .page-head h1{font-size:clamp(1.4rem,5.4vw,2rem);word-break:keep-all}
  .tabs a{padding:11px 10px;font-size:.88rem}
}