/* 모임 화면 — 둥근사각형 아이콘 + 카드 + 그룹 목록 (시안 v1). 색은 디자인 가이드 토큰만 쓴다. */
.cu{
  --c-ground:#FAF7F2;--c-paper:#FFFDF8;--c-rule:#DDD0BE;--c-rule-soft:#EFE7DB;
  --c-ink:#17120E;--c-ink2:#453B32;--c-ink3:#6A5E52;
  --c-seal:#9E3B32;--c-seal-soft:#F8EBE6;--c-seal-deep:#7C2B24;
  --c-leaf:#0F7A5F;--c-leaf-soft:#DDF0E8;--c-gold:#B07A2E;--c-gold-soft:#FBF2E2;--c-danger:#A6342B;
  --c-shadow:0 1px 2px rgba(69,59,50,.06),0 6px 18px rgba(69,59,50,.07);
  max-width:1080px;margin:0 auto;padding:6px 20px 80px;color:var(--c-ink);
  font:16px/1.7 Pretendard,'IBM Plex Sans KR','Noto Sans KR',-apple-system,sans-serif;
}
html.darkMode .cu{
  --c-ground:#1D2022;--c-paper:#292D2F;--c-rule:#4D5355;--c-rule-soft:#343A3C;--c-ink:#F4F1EA;--c-ink2:#CCD2D1;--c-ink3:#9AA3A1;
  --c-seal:#F0A08E;--c-seal-soft:#3A2622;--c-seal-deep:#F8C4B6;--c-leaf:#2FD39F;--c-leaf-soft:#123A30;--c-gold:#FFC866;--c-gold-soft:#3A2F1A;--c-danger:#F08878;
  --c-shadow:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.3);
}
.cu *{box-sizing:border-box}
.cu a{color:inherit;text-decoration:none}
.cu [hidden]{display:none!important}

.cu-cover{height:210px;border-radius:24px;background:var(--c-rule-soft) center/cover no-repeat;overflow:hidden}
.cu-id{display:flex;align-items:flex-start;gap:16px;margin:-40px 20px 0;position:relative;z-index:1}
.cu-ci{flex:none;display:grid;place-items:center;overflow:hidden;border-radius:22%;font-weight:700;font-family:'Gowun Batang','Noto Serif KR',serif;background:var(--c-leaf-soft);color:var(--c-leaf)}
.cu-ci img{width:100%;height:100%;object-fit:cover;display:block}
.cu-ci.l{width:84px;height:84px;font-size:38px;border:4px solid var(--c-paper);box-shadow:var(--c-shadow)}
.cu-id .txt{flex:1;min-width:0;padding-top:50px}
.cu-id h1{margin:0;font:700 26px/1.3 'Gowun Batang','Noto Serif KR',serif;color:var(--c-ink)}
.cu-id .desc{margin:2px 0 0;color:var(--c-ink2)}
.cu-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.cu-chip{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 12px;border-radius:10px;background:var(--c-rule-soft);color:var(--c-ink2);font-size:14px}
.cu-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border:0;border-radius:14px;font:700 16px Pretendard,sans-serif;cursor:pointer;background:var(--c-rule-soft);color:var(--c-ink)}
.cu-btn.primary{background:var(--c-seal);color:#fff}
.cu-btn.primary:hover{background:var(--c-seal-deep)}
.cu-btn.sm{min-height:44px;padding:0 16px;font-size:15px}
.cu-btn.danger{background:var(--c-danger);color:#fff}
.cu-btn.off{background:var(--c-rule-soft);color:var(--c-ink3);cursor:default}
.cu-id .cu-btn{margin-top:50px}

.cu-tile{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:22%;font-size:32px;background:var(--c-rule-soft);font-family:'Noto Color Emoji','Apple Color Emoji','Segoe UI Emoji',sans-serif;overflow:hidden}
.cu-tile.seal{background:var(--c-seal-soft)}.cu-tile.leaf{background:var(--c-leaf-soft)}.cu-tile.gold{background:var(--c-gold-soft)}
.cu-tile img{width:100%;height:100%;object-fit:cover}

.cu-card{margin-top:22px;border-radius:20px;background:var(--c-paper);box-shadow:var(--c-shadow);overflow:hidden}
.cu-card h2{margin:0;padding:18px 20px 6px;font-size:14px;font-weight:700;color:var(--c-ink3);letter-spacing:.02em}
.cu-row{display:flex;align-items:center;gap:14px;min-height:68px;padding:10px 20px;border-top:1px solid var(--c-rule-soft);width:100%;text-align:left;background:none;border-left:0;border-right:0;border-bottom:0;color:inherit}
a.cu-row,button.cu-row{cursor:pointer}
a.cu-row:hover,button.cu-row:hover{background:var(--c-ground)}
.cu-card h2 + .cu-row{border-top:0}
.cu-row .t{flex:1;min-width:0}
.cu-row .t b{display:block;font-size:17px;font-weight:700;color:var(--c-ink)}
.cu-row .t small{display:block;font-size:14px;color:var(--c-ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cu-row .go{color:var(--c-ink3);font-size:22px}
.cu-badge{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 8px;border-radius:9px;background:var(--c-seal);color:#fff;font-size:13px;font-weight:700}
.cu-row.danger .t b{color:var(--c-danger)}

.cu-posts{display:grid;gap:12px;padding:6px 16px 16px}
.cu-post{display:flex;gap:14px;padding:16px 18px;border-radius:16px;background:var(--c-ground);color:inherit}
.cu-post .pt{min-width:0;flex:1}
.cu-post h3{margin:0 0 4px;font-size:17px;color:var(--c-ink)}
.cu-post p{margin:0;color:var(--c-ink2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cu-post .by{margin-top:8px;font-size:14px;color:var(--c-ink3)}
.cu-post .th{flex:none;width:72px;height:72px;border-radius:16px;object-fit:cover;background:var(--c-rule-soft)}
.cu-empty{padding:6px 20px 22px;color:var(--c-ink3)}
@media (min-width:860px){.cu-posts{grid-template-columns:1fr 1fr}}

.cu-members-card details>summary{display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:0 20px;cursor:pointer;font-size:14px;font-weight:700;color:var(--c-ink3);letter-spacing:.02em;list-style:none}
.cu-members-card details>summary::-webkit-details-marker{display:none}
.cu-members-card details>summary span{font-size:20px;transition:transform .15s}
.cu-members-card details[open]>summary{border-bottom:1px solid var(--c-rule-soft)}
.cu-members-card details[open]>summary span{transform:rotate(180deg)}
.cu-members{padding:6px 20px 16px;display:grid;gap:4px}
.cu-members .m{display:flex;align-items:center;gap:12px;min-height:48px;padding:4px 8px;border-radius:12px}
.cu-members .m:hover,.cu-members .m.on{background:var(--c-ground)}
.cu-members img{width:36px;height:36px;border-radius:12px;object-fit:cover;background:var(--c-rule-soft)}
.cu-mark{display:inline-grid;place-items:center;height:22px;padding:0 8px;border-radius:8px;background:var(--c-seal-soft);color:var(--c-seal-deep);font-size:12px;font-weight:700}
.cu-member-timeline{padding:16px 20px 20px;border-top:1px solid var(--c-rule-soft)}
.cu-member-timeline-title{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cu-member-timeline-title h3{margin:0;font-size:17px;color:var(--c-ink)}
.cu-member-timeline-title a{padding:6px 10px;border-radius:8px;background:var(--c-rule-soft);font-size:13px;font-weight:700;color:var(--c-ink2)}
.cu-member-timeline ol{position:relative;margin:14px 0 0;padding:0;list-style:none}
.cu-member-timeline ol::before{content:'';position:absolute;top:8px;bottom:8px;left:74px;width:1px;background:var(--c-rule)}
.cu-member-timeline li{position:relative}
.cu-member-timeline li a{display:grid;grid-template-columns:62px 1fr;gap:20px;padding:0 0 18px}
.cu-member-timeline li a::before{content:'';position:absolute;top:6px;left:70px;width:9px;height:9px;border:2px solid var(--c-paper);border-radius:50%;background:var(--c-seal)}
.cu-member-post-date{font-size:12px;color:var(--c-ink3);line-height:1.35}
.cu-member-post-body{min-width:0}
.cu-member-post-body b,.cu-member-post-body small,.cu-member-post-body em{display:block}
.cu-member-post-body b{font-size:16px;color:var(--c-ink)}
.cu-member-post-body small{margin-top:2px;color:var(--c-ink2);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cu-member-post-body em{margin-top:3px;color:var(--c-ink3);font-size:12px;font-style:normal}

/* 관리 */
.cu-title{margin:6px 4px 0}
.cu-title h1{margin:0;font:700 26px/1.3 'Gowun Batang','Noto Serif KR',serif}
.cu-title p{margin:2px 0 0;color:var(--c-ink2)}
.cu-seg{display:inline-flex;gap:4px;margin-top:16px;padding:4px;border-radius:14px;background:var(--c-rule-soft)}
.cu-seg a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:11px;color:var(--c-ink2);font-weight:700}
.cu-seg a.on{background:var(--c-paper);box-shadow:var(--c-shadow);color:var(--c-ink)}
.cu-form{padding:4px 20px 20px}
.cu-form label.f{display:block;margin:14px 0 6px;font-size:14px;font-weight:700;color:var(--c-ink2)}
.cu-form input[type=text],.cu-form select,.cu-form textarea{width:100%;min-height:48px;padding:10px 14px;border:1px solid var(--c-rule);border-radius:12px;background:var(--c-paper);color:var(--c-ink);font:16px Pretendard,sans-serif}
.cu-form textarea{resize:vertical}
.cu-up{display:flex;align-items:center;gap:14px;padding:14px 20px;border-top:1px solid var(--c-rule-soft);flex-wrap:wrap}
.cu-card h2 + .cu-up{border-top:0}
.cu-up .t{flex:1;min-width:180px}
.cu-up .t b{display:block;font-size:17px}
.cu-up .t small{display:block;font-size:14px;color:var(--c-ink3)}
.cu-up input[type=file]{font-size:14px;max-width:100%}
.cu-sw{display:flex;align-items:center;gap:14px;min-height:68px;padding:10px 20px;border-top:1px solid var(--c-rule-soft);cursor:pointer}
.cu-sw .t{flex:1}
.cu-sw .t b{display:block;font-size:17px}
.cu-sw .t small{display:block;font-size:14px;color:var(--c-ink3)}
.cu-sw input{position:absolute;opacity:0;pointer-events:none}
.cu-sw .sw{flex:none;position:relative;width:52px;height:32px;border-radius:11px;background:var(--c-rule);transition:background .15s}
.cu-sw .sw::after{content:'';position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:8px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .15s}
.cu-sw input:checked + .sw{background:var(--c-leaf)}
.cu-sw input:checked + .sw::after{left:23px}
.cu-sw input:focus-visible + .sw{outline:3px solid var(--c-seal);outline-offset:2px}
.cu-person{display:flex;align-items:center;gap:14px;padding:14px 20px;border-top:1px solid var(--c-rule-soft)}
.cu-card h2 + .cu-person{border-top:0}
.cu-person img{width:48px;height:48px;border-radius:14px;object-fit:cover;background:var(--c-rule-soft)}
.cu-person .t{flex:1;min-width:0}
.cu-person .t b{display:block;font-size:17px}
.cu-person .t small{display:block;font-size:14px;color:var(--c-ink3)}
.cu-person .acts{display:flex;gap:8px}
.cu-person .acts form{margin:0}
@media (min-width:860px){.cu-2col{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;align-items:start}}

@media (max-width:640px){
  .cu{padding:6px 14px 80px}
  .cu-cover{height:150px;border-radius:20px}
  .cu-ci.l{width:68px;height:68px;font-size:30px}
  .cu-id{margin:-30px 4px 0;gap:12px;flex-wrap:wrap}
  .cu-id h1{font-size:22px}
  .cu-id .txt{flex-basis:calc(100% - 90px);padding-top:38px}
  .cu-id .cu-btn{width:100%;margin-top:4px}
}