/* 목업(docs/디자인확정본_목업.html)의 <style> 을 스크립트로 추출한 것이다.
   손으로 옮기지 않는다 — 색 하나만 잘못 베껴도 '디자인 확정본'이 조용히 어긋난다.
   뺀 것은 데모용 액자(.stage/.masthead/.deck/.phone/.screen/.statusbar)와
   콘솔 미리보기(.console*)뿐이다. 콘솔은 7단계에서 진짜 화면으로 만든다.

   아래 '앱 셸' 절만 이 프로젝트가 새로 쓴 것이다. 목업의 375x718 액자를
   실제 뷰포트로 바꾸고, 목업에 없던 로그인·가입 화면을 토큰만으로 짠다. */

/* ================= 앱 셸 ================= */
*{margin:0;padding:0;box-sizing:border-box;}
html{height:100%;}
body{height:100dvh;background:var(--page);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Pretendard','Noto Sans KR','Malgun Gothic',sans-serif;
  -webkit-font-smoothing:antialiased;overscroll-behavior-y:none;}
.screen{height:100%;max-width:520px;margin:0 auto;display:flex;flex-direction:column;
  position:relative;background:var(--page);}
.topzone{background:var(--card);padding-top:env(safe-area-inset-top);}
.appbar{padding-top:16px;}
.tabbar{padding-bottom:calc(6px + env(safe-area-inset-bottom));}

/* 게시글 본문 — 목업의 *{margin:0} 이 <p> 여백까지 없애므로 문단 간격을 되살린다.
   목업에는 본문(상세) 화면이 없어서 이 규칙도 없었다. */
.card .body p + p{margin-top:11px;}

/* ================= 로그인·가입 (목업에 없는 화면 — 토큰만 쓴다) ================= */
body.auth-page{display:flex;align-items:center;justify-content:center;padding:24px;height:auto;min-height:100dvh;}
.auth{width:100%;max-width:360px;}
.auth .logo{font-size:26px;font-weight:900;letter-spacing:-.03em;text-align:center;}
.auth .logo .accent{color:var(--green-deep);}
.auth .lead{font-size:13.5px;color:var(--sub);text-align:center;margin:8px 0 26px;line-height:1.6;}
.auth form{background:var(--card);border-radius:20px;padding:22px 20px;box-shadow:0 1px 3px rgba(25,31,40,.03);}
.auth label{display:block;font-size:12.5px;font-weight:700;color:var(--sub);margin:0 2px 6px;}
.auth .gap{margin-top:14px;}
.auth .alt{display:block;text-align:center;font-size:13px;font-weight:700;color:var(--sub);text-decoration:none;padding:16px 0 0;}
.err{background:var(--b-nego-bg);color:var(--b-nego-tx);font-size:12.5px;font-weight:700;border-radius:10px;padding:10px 12px;margin-bottom:12px;}

/* ================= 이하 목업 원문 ================= */
:root{
  --green:#00C471;
  --green-deep:#00A85C;
  --green-dark:#0B3D2E;
  --green-tint:#E8F9F0;
  --page:#F7F8FA;
  --card:#FFFFFF;
  --ink:#191F28;
  --sub:#6B7684;
  --meta:#8B95A1;
  --divider:#F2F4F6;
  --b-notice-bg:#F2F4F6; --b-notice-tx:#4E5968;
  --b-nego-bg:#FFEEEE;  --b-nego-tx:#F04452;
  --b-event-bg:#FFF3E0; --b-event-tx:#F08000;
  --b-fin-bg:#E8F9F0;   --b-fin-tx:#00A85C;
}
/* ---------- PHONE ---------- */
.topzone{background:var(--card);}
.appbar{display:flex;align-items:center;gap:8px;padding:8px 18px 12px;}
.logo{font-size:20px;font-weight:900;letter-spacing:-.03em;}
.logo .accent{color:var(--green-deep);}
.appbar .sub-name{font-size:11px;color:var(--meta);font-weight:600;margin-top:3px;}
.topicons{margin-left:auto;display:flex;gap:6px;}
.topico{position:relative;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:17px;cursor:pointer;}
.topico.bell::after{content:"";position:absolute;top:5px;right:6px;width:7px;height:7px;
  border-radius:50%;background:#F04452;border:1.5px solid var(--card);}
.view{flex:1;overflow-y:auto;padding:0 14px 14px;scrollbar-width:none;}
.view::-webkit-scrollbar{display:none;}
.pane{display:none;animation:fadein .22s ease;}
.pane.on{display:block;}
@keyframes fadein{from{opacity:0;}to{opacity:1;}}
@media (prefers-reduced-motion:reduce){
  .pane{animation:none;}
  .scanline{animation:none !important;}
}
/* ---------- HOME : BANNER CAROUSEL ---------- */
.bn-wrap{position:relative;margin:0 -14px;}
.bn-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;}
.bn-track::-webkit-scrollbar{display:none;}
.bslide{flex:0 0 100%;scroll-snap-align:start;padding:22px 20px 24px;min-height:150px;
  display:flex;align-items:center;gap:10px;cursor:pointer;}
.bslide .bl{flex:1;}
.bslide .pill{display:inline-block;font-size:11.5px;font-weight:800;color:#fff;
  padding:4px 11px;border-radius:999px;margin-bottom:10px;}
.bslide h3{font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.38;}
.bslide h3 .kw{color:inherit;}
.bslide .bdate{font-size:12.5px;color:var(--sub);margin-top:9px;font-weight:600;}
.bslide .bart{font-size:52px;line-height:1;filter:drop-shadow(0 4px 10px rgba(0,0,0,.12));}
.bs-nego{background:#FFE9E6;}
.bs-nego .pill{background:#F04452;}
.bs-nego h3 .kw{color:#E03131;}
.bs-notice{background:#E8F0FE;}
.bs-notice .pill{background:#3182F6;}
.bs-notice h3 .kw{color:#1B64DA;}
.bs-event{background:#FFF1D6;}
.bs-event .pill{background:#F08000;}
.bs-event h3 .kw{color:#E67700;}
.bs-empty{background:var(--divider);justify-content:center;text-align:center;
  font-size:13px;color:var(--meta);line-height:1.6;font-weight:600;}
/* 집행부 직접 작성 배너 */
.bs-custom{background:var(--green-tint);}
.bs-custom .pill{background:var(--green-deep);}
.photo-thumb{width:86px;height:86px;border-radius:20px;flex-shrink:0;position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 75% 20%, rgba(255,235,120,.85) 0 14%, transparent 15%),
    linear-gradient(160deg,#8FD3B0 0%,#2E9E6B 48%,#14563C 100%);
  box-shadow:0 4px 10px rgba(20,86,60,.25);}
.photo-thumb::after{content:"";position:absolute;left:12%;right:12%;bottom:-6%;height:46%;
  background:radial-gradient(ellipse at 30% 100%, #0E3D2A 0 38%, transparent 40%),
             radial-gradient(ellipse at 62% 100%, #145238 0 34%, transparent 36%),
             radial-gradient(ellipse at 90% 100%, #0E3D2A 0 30%, transparent 32%);}
.bslide.photo-full{position:relative;background:
    radial-gradient(circle at 82% 16%, rgba(255,235,120,.75) 0 9%, transparent 10%),
    linear-gradient(155deg,#5FBF93 0%,#1F8659 46%,#0E3D2A 100%);}
.bslide.photo-full::before{content:"";position:absolute;inset:0;background:rgba(10,32,23,.38);}
.bslide.photo-full .bl{position:relative;z-index:1;}
.bslide.photo-full .pill{background:rgba(255,255,255,.24);}
.bslide.photo-full h3{color:#fff;}
.bslide.photo-full .bdate{color:rgba(255,255,255,.85);}
/* composer inputs */
.inp{width:100%;border:1.5px solid var(--divider);border-radius:10px;padding:9px 11px;
  font-size:13px;font-weight:600;font-family:inherit;color:var(--ink);margin-bottom:7px;background:#fff;}
.inp:focus{outline:none;border-color:var(--green);}
.bn-count{position:absolute;right:14px;bottom:12px;background:rgba(25,31,40,.45);color:#fff;
  font-size:11.5px;font-weight:700;padding:4px 11px;border-radius:999px;pointer-events:none;}
/* icon shortcuts card */
.shortcuts{display:flex;background:var(--card);border-radius:20px;padding:18px 8px 15px;
  margin-top:14px;box-shadow:0 1px 3px rgba(25,31,40,.03);}
.sc{flex:1;text-align:center;cursor:pointer;}
.sc .si{font-size:29px;line-height:1;}
.sc .sl{font-size:12px;font-weight:700;margin-top:7px;letter-spacing:-.01em;}
/* dark vote promo */
.promo{display:flex;align-items:center;margin-top:12px;border-radius:20px;padding:18px 20px;
  background:linear-gradient(105deg,var(--green-dark) 30%,var(--green-deep));color:#fff;cursor:pointer;
  box-shadow:0 4px 14px rgba(11,61,46,.28);}
.promo .pt h3{font-size:16.5px;font-weight:800;letter-spacing:-.01em;}
.promo .pt h3 .em{color:#A5F3CB;}
.promo .pt p{font-size:12.5px;opacity:.85;margin-top:4px;font-weight:600;}
.promo .dcirc{margin-left:auto;flex-shrink:0;width:62px;height:62px;border-radius:50%;background:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;}
.promo .dcirc .dd{font-size:17px;font-weight:900;color:var(--green-deep);line-height:1;}
.promo .dcirc .dl{font-size:9.5px;font-weight:700;color:var(--sub);margin-top:2px;}
.promo.p-event{background:linear-gradient(105deg,#8A4B00 30%,#F08000);
  box-shadow:0 4px 14px rgba(240,128,0,.28);}
.promo.p-event .pt h3 .em{color:#FFE2BD;}
.promo.p-event .dcirc .dd{color:#F08000;}
.promo.p-nego{background:linear-gradient(105deg,#16264D 30%,#3182F6);
  box-shadow:0 4px 14px rgba(49,130,246,.28);}
.promo.p-nego .pt h3 .em{color:#BDD7FF;}
.promo.p-nego .dcirc .dd{color:#3182F6;}
/* news section */
.news{background:var(--card);border-radius:20px;padding:18px 18px 8px;margin-top:12px;
  box-shadow:0 1px 3px rgba(25,31,40,.03);}
.news-head{font-size:16.5px;font-weight:800;letter-spacing:-.02em;}
.news-head .accent{color:var(--green-deep);}
.nchips{display:flex;gap:6px;overflow-x:auto;margin:12px 0 4px;scrollbar-width:none;}
.nchips::-webkit-scrollbar{display:none;}
.nchip{flex-shrink:0;padding:7px 13px;border-radius:999px;font-size:12.5px;font-weight:700;
  background:var(--page);border:none;color:var(--sub);cursor:pointer;white-space:nowrap;font-family:inherit;}
.nchip.on{background:var(--ink);color:#fff;}
.nrow{display:flex;gap:10px;padding:13px 2px;border-bottom:1px solid var(--divider);cursor:pointer;align-items:flex-start;}
.nrow:last-of-type{border-bottom:none;}
.nrow .rank{font-size:14px;font-weight:800;color:#F04452;width:14px;flex-shrink:0;padding-top:2px;}
.nrow .nc{flex:1;min-width:0;}
.nrow .nc .rbadge{display:inline-block;font-size:10.5px;font-weight:700;padding:3px 7px;border-radius:5px;margin-right:5px;vertical-align:1px;}
.nrow .nc .nt{font-size:14px;font-weight:700;letter-spacing:-.01em;display:inline;line-height:1.4;}
.nrow .nc .nm{font-size:11.5px;color:var(--meta);margin-top:5px;}
.nrow .thumb{width:46px;height:46px;border-radius:10px;background:var(--b-event-bg);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:21px;}
.nmore{text-align:center;font-size:13px;font-weight:700;color:var(--sub);padding:13px;cursor:pointer;}
.hide{display:none !important;}
/* board / shared */
.sect-head{display:flex;align-items:baseline;margin:18px 6px 9px;}
.sect-head .t{font-size:15px;font-weight:800;letter-spacing:-.01em;}
.card{background:var(--card);border-radius:18px;padding:17px 18px;margin-bottom:10px;
  box-shadow:0 1px 3px rgba(25,31,40,.03);}
.card h3{font-size:15.5px;font-weight:700;letter-spacing:-.01em;line-height:1.42;}
.card .body{font-size:13.5px;color:var(--sub);line-height:1.58;margin-top:6px;}
.card .meta{font-size:12px;color:var(--meta);margin-top:11px;}
.badge{display:inline-block;font-size:11.5px;font-weight:700;
  padding:4px 9px;border-radius:6px;margin-bottom:9px;margin-right:4px;}
.listgroup{background:var(--card);border-radius:18px;margin-bottom:10px;
  box-shadow:0 1px 3px rgba(25,31,40,.03);overflow:hidden;}
.listrow{padding:14px 18px;border-bottom:1px solid var(--divider);cursor:pointer;}
.listrow:last-child{border-bottom:none;}
.listrow .badge{margin-bottom:7px;}
.listrow h3{font-size:14.5px;font-weight:600;letter-spacing:-.01em;line-height:1.4;}
.listrow .meta{font-size:12px;color:var(--meta);margin-top:5px;}
.chips-wrap{background:var(--card);margin:0 -14px 12px;padding:2px 14px 12px;
  border-bottom:1px solid var(--divider);}
.chips{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;}
.chips::-webkit-scrollbar{display:none;}
.chip{flex-shrink:0;padding:8px 14px;border-radius:999px;font-size:13px;font-weight:600;
  background:var(--page);border:none;color:var(--sub);cursor:pointer;white-space:nowrap;font-family:inherit;}
.chip.on{background:var(--ink);color:#fff;}
.card.compact-nego{padding:14px 18px;}
.card.compact-nego .body{display:none;}
.card.compact-nego h3{font-size:14.5px;font-weight:600;}
.card.compact-nego .meta{margin-top:6px;}
.fin-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;}
.fin-cell{background:var(--page);border-radius:12px;padding:12px 13px;}
.fin-cell.hl{background:var(--green-tint);}
.fin-cell .k{font-size:11.5px;color:var(--sub);}
.fin-cell .v{font-size:17px;font-weight:800;margin-top:3px;letter-spacing:-.01em;}
.fin-cell.hl .v{color:var(--green-deep);}
.fin-cell .v small{font-size:11px;font-weight:600;color:var(--sub);}
.fin-link{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:11px;
  padding:11px;border-radius:12px;background:var(--page);
  font-size:13px;font-weight:700;color:var(--ink);cursor:pointer;}
.gal{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:11px;}
.gal div{aspect-ratio:1;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;}
.g1{background:#FFF3E0;}
.g2{background:#E8F9F0;}
.g3{background:#E8F3FF;}
.btn{display:block;width:100%;text-align:center;padding:14px;border:none;border-radius:14px;
  background:var(--green);color:#fff;font-size:14.5px;font-weight:700;cursor:pointer;margin-top:12px;font-family:inherit;}
.btn:active{background:var(--green-deep);}
.btn.gray{background:var(--page);color:var(--ink);}
.btn:disabled{background:#DFE3E8;color:#fff;cursor:default;}
.seats{display:inline-block;font-size:12px;color:var(--b-event-tx);font-weight:700;
  background:var(--b-event-bg);padding:4px 9px;border-radius:6px;margin-top:9px;}
.vote-opt{display:flex;align-items:center;gap:10px;background:var(--page);
  border:1.5px solid transparent;border-radius:14px;padding:14px 15px;margin-top:8px;
  font-size:14px;font-weight:600;cursor:pointer;}
.vote-opt .dot{width:18px;height:18px;border-radius:50%;border:2px solid #C5CBD3;flex-shrink:0;background:#fff;}
.vote-opt.sel{border-color:var(--green);background:var(--green-tint);}
.vote-opt.sel .dot{border-color:var(--green);background:var(--green);
  box-shadow:inset 0 0 0 3.5px var(--green-tint);}
.contact-row{display:flex;align-items:center;gap:12px;padding:15px 18px;
  border-bottom:1px solid var(--divider);font-size:14.5px;font-weight:600;cursor:pointer;}
.contact-row:last-child{border-bottom:none;}
.contact-row .ico{width:36px;height:36px;border-radius:12px;background:var(--page);
  display:flex;align-items:center;justify-content:center;font-size:16px;}
.contact-row .arr{margin-left:auto;color:#C5CBD3;font-weight:400;}
.qr-wrap{padding:30px 8px 8px;text-align:center;}
.finder{width:210px;height:210px;margin:18px auto;position:relative;border-radius:24px;
  background:#191F28;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.finder .qrglyph{font-size:64px;opacity:.22;filter:grayscale(1) brightness(3);}
.finder .corner{position:absolute;width:30px;height:30px;border:3.5px solid var(--green);}
.corner.tl{top:14px;left:14px;border-right:none;border-bottom:none;border-radius:10px 0 0 0;}
.corner.tr{top:14px;right:14px;border-left:none;border-bottom:none;border-radius:0 10px 0 0;}
.corner.bl{bottom:14px;left:14px;border-right:none;border-top:none;border-radius:0 0 0 10px;}
.corner.br{bottom:14px;right:14px;border-left:none;border-top:none;border-radius:0 0 10px 0;}
.scanline{position:absolute;left:16px;right:16px;height:2px;
  background:linear-gradient(90deg,transparent,var(--green),transparent);
  animation:scan 2.2s ease-in-out infinite;}
@keyframes scan{0%,100%{top:18%;}50%{top:80%;}}
.qr-wrap h2{font-size:19px;font-weight:800;letter-spacing:-.02em;}
.qr-wrap p{font-size:13.5px;color:var(--sub);line-height:1.6;margin-top:8px;}
.qr-wrap b{color:var(--green-deep);}
.profile{display:flex;align-items:center;gap:13px;padding:10px 6px 16px;}
.avatar{width:54px;height:54px;border-radius:50%;background:var(--green-tint);color:var(--green-deep);
  display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:800;}
.profile .nm{font-size:18px;font-weight:800;letter-spacing:-.02em;}
.profile .dept{font-size:12.5px;color:var(--sub);margin-top:2px;}
.my-row{display:flex;align-items:center;padding:15px 18px;border-bottom:1px solid var(--divider);
  font-size:14.5px;font-weight:600;cursor:pointer;}
.my-row:last-child{border-bottom:none;}
.my-row .sub2{margin-left:auto;font-size:12.5px;color:var(--meta);font-weight:500;}
.notif-cat{display:flex;align-items:center;padding:12px 18px;font-size:14px;font-weight:600;
  border-bottom:1px solid var(--divider);}
.notif-cat:last-child{border-bottom:none;}
.notif-cat .cbadge{font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;margin-right:10px;}
.toggle{margin-left:auto;width:46px;height:27px;border-radius:999px;background:#DFE3E8;
  position:relative;cursor:pointer;transition:background .15s;flex-shrink:0;}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.15);transition:left .15s;}
.toggle.on{background:var(--green);}
.toggle.on::after{left:22px;}
.toggle.sm{width:40px;height:24px;}
.toggle.sm::after{width:18px;height:18px;}
.toggle.sm.on::after{left:19px;}
/* bottom-right FAB + tabbar */
.fab{position:absolute;right:16px;bottom:92px;z-index:4;
  width:54px;height:54px;border-radius:50%;background:var(--green);
  color:#fff;font-size:21px;display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 6px 16px rgba(0,196,113,.42);}
.tabbar{display:flex;border-top:1px solid var(--divider);background:var(--card);padding:7px 2px 15px;}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:10px;font-weight:600;color:#B0B8C1;cursor:pointer;padding-top:7px;background:none;border:none;font-family:inherit;}
.tab .ic{font-size:20px;line-height:1;filter:grayscale(1) opacity(.45);}
.tab.on{color:var(--green-deep);}
.tab.on .ic{filter:none;}
.toast{position:absolute;left:50%;bottom:100px;transform:translateX(-50%) translateY(8px);
  background:rgba(25,31,40,.94);color:#fff;font-size:13px;font-weight:600;padding:12px 18px;
  border-radius:14px;opacity:0;pointer-events:none;transition:all .25s;white-space:nowrap;z-index:5;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
/* ---------- ADMIN CONSOLE ---------- */

/* ================= 홈 화면 추가 안내 (8단계) ================= */
.install-tip{display:flex;align-items:center;gap:10px;background:var(--green-tint);
  border-radius:16px;padding:13px 15px;margin-top:12px;cursor:pointer;}
.install-tip .ic{font-size:22px;line-height:1;}
.install-tip .tx{flex:1;}
.install-tip .tx b{display:block;font-size:13.5px;font-weight:800;letter-spacing:-.01em;color:var(--green-dark);}
.install-tip .tx span{font-size:12px;color:var(--green-deep);font-weight:600;}
.install-tip .x{font-size:18px;color:var(--green-deep);opacity:.5;padding:0 2px;}

.sheet{position:fixed;inset:0;background:rgba(25,31,40,.45);display:none;z-index:50;
  align-items:flex-end;justify-content:center;}
.sheet.on{display:flex;}
.sheet .panel{background:var(--card);width:100%;max-width:520px;border-radius:22px 22px 0 0;
  padding:22px 20px calc(24px + env(safe-area-inset-bottom));max-height:86vh;overflow-y:auto;
  animation:rise .22s ease;}
@keyframes rise{from{transform:translateY(14px);opacity:.6;}to{transform:none;opacity:1;}}
@media (prefers-reduced-motion:reduce){.sheet .panel{animation:none;}}
.sheet h3{font-size:17px;font-weight:800;letter-spacing:-.02em;}
.sheet .lead{font-size:13px;color:var(--sub);line-height:1.6;margin-top:7px;}
.sheet ol{margin:16px 0 0;padding-left:0;list-style:none;counter-reset:s;}
.sheet ol li{counter-increment:s;position:relative;padding:0 0 14px 34px;font-size:13.5px;
  font-weight:600;line-height:1.55;}
.sheet ol li::before{content:counter(s);position:absolute;left:0;top:0;width:23px;height:23px;
  border-radius:50%;background:var(--green);color:#fff;font-size:12px;font-weight:800;
  display:flex;align-items:center;justify-content:center;}
.sheet ol li b{color:var(--green-deep);}
.sheet .note{background:var(--page);border-radius:12px;padding:12px 14px;font-size:12.5px;
  color:var(--sub);line-height:1.6;margin-top:6px;}
.sheet .note b{color:var(--ink);}