/* 시니어히어로 — 여행 잡지(Travel Journal) · Deep Ocean
   ────────────────────────────────────────────────────────────────
   이어봄에서 검증된 6080 규칙을 그대로 지킨다:
     · 본문 20px · 버튼 19px · 메타 17px · 최소 15px (미만 금지)
     · 터치 영역 56px 이상 · 읽는 글자는 전부 먹빛 — 대비 7:1(AAA)
     · 색은 장식 전용, 위계는 크기와 굵기가 만든다
     · 외부 요청 0 · 이모지 아이콘 금지 (라인 SVG 만)
   AI티 금지: 그라데이션 배너·동일 카드 그리드·이모지 대신
   실사 사진 · 세리프 제목 · 비대칭 리듬 · 종이 질감으로 간다.
   ──────────────────────────────────────────────────────────────── */

@import url("/static/fonts/fonts.css");
@font-face{
  font-family:"Pretendard"; font-style:normal; font-weight:400; font-display:swap;
  src:url("/static/fonts/Pretendard-Regular.woff2") format("woff2");
}
@font-face{
  font-family:"Pretendard"; font-style:normal; font-weight:700; font-display:swap;
  src:url("/static/fonts/Pretendard-Bold.woff2") format("woff2");
}

:root{
  /* 읽는 글자 — 종이(#F7F6F2) 위에서 전부 AAA */
  --ink:#232B36;        /* 12.9:1 */
  --ink-2:#3A4450;      /*  8.9:1 */
  --ink-3:#46505D;      /*  7.3:1 */
  /* 눌리는 것 — 흰 글자를 얹어도 AAA */
  --navy:#1B3A5C;       /* 주 버튼·링크  흰글자 10.6:1 */
  --navy-d:#14293F;
  --sea:#2E5A80;        /* 보조 액션 */
  /* 장식 전용 — 글자에 쓰지 않는다 */
  --blue-l:#7FA3C4; --gold:#C8A96A;
  --gold-d:#6E5323;     /* 글자용 금박 — 종이 7.0:1 · gold-bg 7.1:1 (AAA, 디자인 P0-2) */
  --danger:#8A2F23;     /* 파괴적 액션 (탈퇴 등) */
  /* 종이·바닥 */
  --paper:#F8F6F1; --mist:#E3E7EB; --sky:#EAF1F7;
  --line:#DCD8CE; --line-2:#E8E5DD; --navy-bg:#E7EEF5; --gold-bg:#F4EDDF;

  --t-title:25px; --t-name:21px; --t-body:20px; --t-ui:19px; --t-meta:17px; --t-min:15px;
  --r-s:10px; --r:14px; --r-l:20px;
  --shadow:0 1px 2px rgba(20,41,63,.05), 0 4px 14px rgba(20,41,63,.07);
  --shadow-lift:0 2px 6px rgba(20,41,63,.08), 0 14px 34px rgba(20,41,63,.12);
  --serif:"GowunBatang","Nanum Myeongjo",serif;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .36 0 0 0 0 .42 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--mist); color:var(--ink);
  font-family:"Pretendard","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;
  font-size:var(--t-body); line-height:1.72; letter-spacing:-.015em;
  padding-bottom:env(safe-area-inset-bottom);
  -webkit-font-smoothing:antialiased;
  word-break:keep-all; overflow-wrap:anywhere;
}
b,strong{font-weight:700}
img{max-width:100%; display:block}
a{color:var(--navy)}
.serif{font-family:var(--serif); letter-spacing:-.02em}
.i{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8;
   stroke-linecap:round; stroke-linejoin:round; flex:none}

.wrap{max-width:560px; margin:0 auto; min-height:100vh; background:var(--paper);
      background-image:var(--grain); box-shadow:0 0 40px rgba(20,41,63,.08);
      padding-bottom:96px}
.pad{padding:20px}

a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:3px solid var(--navy); outline-offset:2px; border-radius:6px}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

/* ── 매스트헤드 — 잡지 표지처럼 ── */
.masthead{padding:22px 20px 14px; text-align:center; border-bottom:3px double var(--line);
          background:var(--paper); position:relative}
.masthead .kicker{font-size:var(--t-min); font-weight:700; letter-spacing:.42em;
                  color:var(--gold-d); text-indent:.42em; margin:0 0 4px}
.masthead h1{font-family:var(--serif); font-size:31px; font-weight:700; margin:0;
             letter-spacing:.06em; color:var(--ink)}
.masthead .issue{font-size:var(--t-min); color:var(--ink-3); margin:4px 0 0}
.masthead .who{position:absolute; right:14px; top:16px; min-height:48px;
               display:flex; align-items:center; padding:0 14px; border-radius:999px;
               background:var(--navy-bg); color:var(--navy); font-size:var(--t-min);
               font-weight:700; text-decoration:none; max-width:34%;
               overflow:hidden; white-space:nowrap; text-overflow:ellipsis}

/* 페이지 상단 (내부 화면) */
.topbar{position:sticky; top:0; z-index:20; background:var(--paper);
        border-bottom:1px solid var(--line); padding:10px 12px;
        display:flex; align-items:center; gap:6px}
.topbar .back{display:flex; align-items:center; gap:2px; min-height:56px; padding:0 10px;
              color:var(--ink-2); text-decoration:none; font-size:var(--t-meta); font-weight:700}
.topbar h1{font-size:var(--t-name); font-weight:700; margin:0; flex:1; letter-spacing:-.02em;
           white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ── 홈 3단 — 정보 성격이 다르면 시각 문법도 다르다 ──
   1단 속보(종이+네이비 리본) · 2단 피처(하늘 밴드+세리프) · 3단 광고(네이비 다크 밴드) */
.sec{padding:6px 0 30px}
.sec-news{padding-top:0}
.ribbon{display:flex; align-items:center; gap:9px; background:var(--navy); color:#fff;
        margin:0 0 18px; padding:13px 20px}
.ribbon .i{width:20px; height:20px}
.ribbon h2{font-size:var(--t-meta); font-weight:700; letter-spacing:.14em; margin:0; flex:1}
.ribbon .more{color:#C9D8E6; font-size:var(--t-min); font-weight:700; text-decoration:none;
              min-height:48px; display:flex; align-items:center}
.ecard .bd .rn{margin:0 0 2px; font-size:13px; font-weight:700; letter-spacing:.06em;
               color:var(--gold-d)}

.band-sky{background:var(--sky); border-top:1px solid #D6E2EC; border-bottom:1px solid #D6E2EC;
          padding:26px 0 30px; margin-top:8px}
.band-navy{background:linear-gradient(180deg, #17334F, #1B3A5C); padding:26px 0 34px;
           margin-top:8px}
.band-navy .feature-head h2{color:#fff}
.band-navy .feature-head p{color:#AFC4D8}
.feature-head{padding:0 20px 16px}
.feature-head h2{font-size:26px; font-weight:700; margin:0; color:var(--ink);
                 display:flex; align-items:center; gap:10px}
.feature-head p{margin:3px 0 0; font-size:var(--t-min); color:var(--ink-3)}
.adlabel-dark{background:rgba(255,255,255,.16); color:#E7D9BC}

/* 모임 카드 (홈 내 모임 · 모임찾기 공용) */
.rcard{display:flex; margin:0 20px 14px; background:#fff; border:1px solid var(--line-2);
       border-radius:var(--r); overflow:hidden; text-decoration:none; color:inherit;
       box-shadow:var(--shadow)}
.rcard .ph{position:relative; flex:none; width:128px; min-height:118px}
.rcard .ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.rcard .bd{flex:1; min-width:0; padding:13px 16px 11px; display:flex; flex-direction:column}
.rcard .bd h3{font-size:var(--t-name); font-weight:700; margin:0; line-height:1.3}
.rcard .bd p{font-size:var(--t-min); color:var(--ink-3); margin:3px 0 0; line-height:1.5;
             display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.rcard .foot{display:flex; align-items:center; flex-wrap:wrap; gap:4px 12px; margin-top:auto;
             padding-top:9px; font-size:var(--t-min); color:var(--ink-3); font-weight:600}
.cat{position:absolute; left:8px; top:8px; z-index:2; font-size:13px; font-weight:700;
     padding:2px 9px; border-radius:6px; letter-spacing:.04em}
.cat-tam{background:#1B3A5C; color:#fff}
.cat-nol{background:#8A5A2E; color:#fff}
.rhero .cat{position:static; display:inline-block; margin-bottom:6px}
.joined{font-size:13px; font-weight:700; color:var(--sea); background:var(--sky);
        border-radius:4px; padding:1px 8px}

/* 필터 칩 (모임찾기) */
.chips{display:flex; gap:8px; padding:14px 20px 8px; position:sticky; top:0; z-index:15;
       background:var(--paper); border-bottom:1px solid var(--line-2)}
.chips a{min-height:48px; display:flex; align-items:center; padding:0 20px; border-radius:999px;
         border:1.5px solid var(--line); background:#fff; color:var(--ink-2);
         font-size:var(--t-meta); font-weight:700; text-decoration:none}
.chips a.on{background:var(--navy); border-color:var(--navy); color:#fff}

/* ── 라이트박스 — 탭하면 전체화면, 좌우 넘김 ── */
.lightbox{position:fixed; inset:0; z-index:80; background:rgba(10,17,26,.94);
          display:flex; align-items:center; justify-content:center}
.lightbox[hidden]{display:none}   /* hidden 속성은 명시 display 에 진다 — 반드시 눌러준다 */
.lightbox img{max-width:100vw; max-height:86vh; object-fit:contain}
.lb-close{position:absolute; top:10px; right:10px; width:56px; height:56px; border:0;
          border-radius:50%; background:rgba(255,255,255,.14); color:#fff; font-size:30px;
          cursor:pointer; z-index:2}
.lb-nav{position:absolute; top:50%; transform:translateY(-50%); width:56px; height:88px;
        border:0; background:rgba(255,255,255,.1); color:#fff; font-size:38px; cursor:pointer;
        border-radius:12px}
.lb-prev{left:6px} .lb-next{right:6px}
.lb-count{position:absolute; bottom:calc(18px + env(safe-area-inset-bottom)); left:0; right:0;
          text-align:center; color:#C9D8E6; font-size:var(--t-meta); font-weight:700}
.zoomable{cursor:zoom-in}

/* ── 섹션 라벨 — 금박 괘선 ── */
.slabel{display:flex; align-items:center; gap:10px; margin:26px 20px 12px}
.slabel .rule{width:26px; height:3px; background:var(--gold); border-radius:2px; flex:none}
.slabel h2{font-size:var(--t-meta); font-weight:700; letter-spacing:.18em; text-indent:.09em;
           color:var(--ink-2); margin:0; text-transform:uppercase}
.slabel .more{margin-left:auto; font-size:var(--t-min); font-weight:700; color:var(--navy);
              text-decoration:none; min-height:48px; display:flex; align-items:center; padding:0 6px}

/* ── 모임 입구 — 비대칭 2카드 ── */
.gcards{padding:0 20px; display:flex; flex-direction:column; gap:18px}
.gcard{position:relative; display:block; text-decoration:none; color:inherit;
       border-radius:var(--r-l); overflow:hidden; background:#fff;
       border:1px solid var(--line-2); box-shadow:var(--shadow)}
.gcard .ph{position:relative; overflow:hidden}
.gcard .ph img{width:100%; height:100%; object-fit:cover}
.gcard .scrim{position:absolute; inset:0;
              background:linear-gradient(178deg, rgba(16,30,46,0) 42%, rgba(16,30,46,.72) 96%)}
.gcard .on{position:absolute; left:18px; right:18px; bottom:14px; color:#fff}
.gcard .on .nm{font-family:var(--serif); font-size:27px; font-weight:700; line-height:1.25;
               margin:0; text-shadow:0 1px 10px rgba(10,20,32,.45)}
.gcard .on .tg{font-size:var(--t-min); margin:2px 0 0; opacity:.92;
               text-shadow:0 1px 8px rgba(10,20,32,.5)}
.gcard .foot{display:flex; align-items:center; gap:14px; padding:13px 18px;
             font-size:var(--t-min); color:var(--ink-3); font-weight:600}
.gcard .foot .sp{margin-left:auto; display:flex; align-items:center; gap:4px;
                 color:var(--navy); font-weight:700}
/* 카드 A: 전면 사진 16:10 / 카드 B: 오른쪽으로 5% 어긋난 가로형 — 리듬 */
.gcard-a .ph{aspect-ratio:16/10}
.gcard-b{margin-left:26px; display:flex; flex-direction:row-reverse}
.gcard-b .ph{width:44%; aspect-ratio:4/5}
.gcard-b .bd{flex:1; padding:16px 16px 12px; display:flex; flex-direction:column; min-width:0}
.gcard-b .bd .nm{font-family:var(--serif); font-size:22px; font-weight:700; margin:0;
                 line-height:1.3; color:var(--ink)}
.gcard-b .bd .tg{font-size:var(--t-min); color:var(--ink-3); margin:4px 0 0; line-height:1.5}
.gcard-b .bd .foot{padding:10px 0 0; margin-top:auto}
.dday{display:inline-flex; align-items:center; gap:4px; background:var(--gold-bg);
      color:var(--gold-d); border:1px solid #E3D3AE; font-size:var(--t-min); font-weight:700;
      padding:3px 10px; border-radius:999px}

/* ── 행사 카드 — 달력 낱장 ── */
.ecard{display:flex; gap:0; margin:0 20px 14px; background:#fff; border:1px solid var(--line-2);
       border-radius:var(--r); overflow:hidden; text-decoration:none; color:inherit;
       box-shadow:var(--shadow)}
.ecard .leaf{flex:none; width:86px; background:var(--navy); color:#fff; text-align:center;
             display:flex; flex-direction:column; justify-content:center; padding:14px 6px}
.ecard .leaf .m{font-size:var(--t-min); font-weight:700; letter-spacing:.1em; opacity:.85}
.ecard .leaf .d{font-family:var(--serif); font-size:34px; font-weight:700; line-height:1.1}
.ecard .leaf .w{font-size:var(--t-min); opacity:.85}
.ecard.done .leaf{background:#6B7482}
.ecard .bd{padding:14px 16px; min-width:0; flex:1}
.ecard .bd h3{font-size:var(--t-ui); font-weight:700; margin:0 0 4px; line-height:1.4}
.ecard .bd .meta{font-size:var(--t-min); color:var(--ink-3); display:flex; flex-wrap:wrap;
                 gap:2px 14px}
.ecard .bd .meta span{display:inline-flex; align-items:center; gap:5px}
.ecard .bd .meta .i{width:17px; height:17px}

/* ── 후원사 ── */
.adlabel{font-size:13px; font-weight:700; letter-spacing:.14em; color:var(--ink-3);
         background:var(--line-2); border-radius:4px; padding:1px 7px}
.strip-wrap{position:relative}
.strip-nav{position:absolute; top:calc(50% - 44px); z-index:5; width:52px; height:52px;
           border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,.94);
           color:var(--navy); cursor:pointer; display:flex; align-items:center;
           justify-content:center; box-shadow:var(--shadow-lift)}
.strip-nav.prev{left:8px} .strip-nav.next{right:8px}
.strip-nav .i{width:26px; height:26px; stroke-width:2.2}
.sponsor-strip{margin:0 20px; display:flex; gap:12px; overflow-x:auto;
               scroll-snap-type:x proximity; padding-bottom:6px; scrollbar-width:none}
.sponsor-strip::-webkit-scrollbar{display:none}
.scard{flex:none; width:86%; scroll-snap-align:start; border-radius:var(--r);
       overflow:hidden; border:1px solid var(--line-2); background:#fff;
       text-decoration:none; color:inherit; box-shadow:var(--shadow)}
.scard img{aspect-ratio:2/1; object-fit:cover; width:100%}
.scard .bd{padding:12px 16px 13px; display:flex; align-items:center; gap:10px}
.scard .bd .t{min-width:0; flex:1}
.scard .bd h3{font-size:var(--t-meta); font-weight:700; margin:0; line-height:1.35}
.scard .bd p{font-size:var(--t-min); color:var(--ink-3); margin:1px 0 0;
             white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ── 모임방 ── */
.rhero{position:relative}
.rhero img{width:100%; aspect-ratio:16/9; object-fit:cover}
.rhero .scrim{position:absolute; inset:0;
              background:linear-gradient(178deg, rgba(16,30,46,.1) 30%, rgba(16,30,46,.78) 97%)}
.rhero .on{position:absolute; left:20px; right:20px; bottom:16px; color:#fff}
.rhero .on h1{font-family:var(--serif); font-size:29px; margin:0; line-height:1.3;
              text-shadow:0 1px 10px rgba(10,20,32,.5)}
.rhero .on p{margin:3px 0 0; font-size:var(--t-min); opacity:.94}
.rtabs{display:flex; border-bottom:1px solid var(--line); background:var(--paper);
       position:sticky; top:0; z-index:15}
.rtabs a{flex:1; text-align:center; min-height:58px; display:flex; align-items:center;
         justify-content:center; text-decoration:none; color:var(--ink-3);
         font-size:var(--t-ui); font-weight:700; border-bottom:3px solid transparent}
.rtabs a.on{color:var(--navy); border-bottom-color:var(--gold)}

/* 게시글 */
.post{margin:18px 20px; background:#fff; border:1px solid var(--line-2);
      border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow)}
.post .hd{padding:14px 18px 0}
.post .hd .who{font-size:var(--t-min); color:var(--ink-3)}
.post .hd h3{font-size:var(--t-ui); margin:2px 0 8px; line-height:1.45}
.post .bd{padding:0 18px 14px; font-size:var(--t-meta); color:var(--ink-2); line-height:1.7;
          white-space:pre-line}
.post .strip{display:flex; gap:6px; overflow-x:auto; padding:0 18px 16px; scrollbar-width:none}
.post .strip::-webkit-scrollbar{display:none}
.post .strip img{height:150px; border-radius:var(--r-s); flex:none}
.post .strip img:only-child{height:auto; max-height:340px; width:100%; object-fit:cover}

/* 사진첩 — 2열, 필름 느낌의 어긋남 */
.album{columns:2; column-gap:10px; padding:16px 20px}
.album img{width:100%; border-radius:var(--r-s); margin-bottom:10px; border:1px solid var(--line-2)}

/* ── 행사 상세 ── */
.einfo{margin:18px 20px; background:var(--sky); border:1px solid #D6E2EC;
       border-radius:var(--r); padding:16px 18px}
.einfo dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:6px 14px}
.einfo dt{display:flex; align-items:center; gap:7px; font-size:var(--t-meta); font-weight:700;
          color:var(--ink-2); white-space:nowrap}
.einfo dd{margin:0; font-size:var(--t-meta); color:var(--ink)}
.attend-bar{margin:0 20px 6px; display:flex; align-items:center; gap:10px;
            font-size:var(--t-meta); color:var(--ink-2)}
.attend-bar b{color:var(--navy)}
.chip{display:inline-block; background:var(--navy-bg); color:var(--navy); font-weight:700;
      font-size:var(--t-min); border-radius:999px; padding:3px 12px; margin:0 6px 6px 0}

.cmt{margin:0 20px; padding:14px 2px; border-bottom:1px solid var(--line-2)}
.cmt .who{display:flex; align-items:baseline; gap:8px}
.cmt .who b{font-size:var(--t-meta)}
.cmt .who time{font-size:var(--t-min); color:var(--ink-3)}
.cmt p{margin:3px 0 0; font-size:var(--t-meta); color:var(--ink-2)}
.cmt .badge{font-size:13px; font-weight:700; color:var(--gold-d); background:var(--gold-bg);
            border-radius:4px; padding:1px 7px}

.cform{margin:16px 20px 8px}
.cform textarea{width:100%; min-height:96px; border:1.5px solid var(--line);
                border-radius:var(--r-s); padding:13px 14px; font:inherit;
                font-size:var(--t-meta); background:#fff; color:var(--ink); resize:vertical}
.cform .row{display:flex; gap:10px; margin-top:10px}
label.check{display:flex; align-items:center; gap:9px; font-size:var(--t-meta); font-weight:700;
            color:var(--ink-2); min-height:56px}
label.check input{flex:none; width:24px; height:24px; accent-color:var(--navy)}
/* 라벨 텍스트는 한 덩어리로 흐르게 — flex 아이템이 단어별로 쪼개지지 않도록 (디자인 P0) */
label.check .check-txt{flex:1; line-height:1.5}
label.check .hint{font-weight:400; color:var(--ink-3)}

/* ── 버튼 ── */
.btn{display:flex; align-items:center; justify-content:center; gap:8px; min-height:58px;
     border-radius:var(--r-s); font-size:var(--t-ui); font-weight:700; text-decoration:none;
     border:0; cursor:pointer; font-family:inherit; letter-spacing:-.01em; padding:0 22px}
.btn-navy{background:var(--navy); color:#fff}
.btn-navy:active{background:var(--navy-d)}
.btn-line{background:#fff; color:var(--navy); border:1.5px solid var(--navy)}
.btn-wide{width:100%}

/* ── 소식 피드 ── */
.fitem{display:flex; gap:14px; margin:0 20px; padding:16px 0; border-bottom:1px solid var(--line-2);
       text-decoration:none; color:inherit}
.fitem .th{flex:none; width:92px; height:92px; border-radius:var(--r-s); overflow:hidden;
           background:var(--sky)}
.fitem .th img{width:100%; height:100%; object-fit:cover}
.fitem .bd{min-width:0; flex:1}
.fitem .tag{font-size:13px; font-weight:700; letter-spacing:.08em; color:var(--gold-d)}
.fitem h3{font-size:var(--t-meta); font-weight:700; margin:2px 0 3px; line-height:1.45}
.fitem p{font-size:var(--t-min); color:var(--ink-3); margin:0; display:-webkit-box;
         -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}

/* ── 내정보 ── */
.mycard{margin:18px 20px; background:#fff; border:1px solid var(--line-2); border-radius:var(--r);
        padding:18px; box-shadow:var(--shadow)}
.mycard .nm{font-family:var(--serif); font-size:var(--t-title); font-weight:700; margin:0}
.mycard .sub{font-size:var(--t-min); color:var(--ink-3); margin:2px 0 0}
.svc-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:0 20px}
.svc{display:flex; flex-direction:column; align-items:flex-start; gap:8px; background:#fff;
     border:1px solid var(--line-2); border-radius:var(--r); padding:16px;
     text-decoration:none; color:inherit; box-shadow:var(--shadow); min-height:112px}
.svc:first-child{grid-column:1 / -1; flex-direction:row; align-items:center; gap:14px;
                 background:var(--navy); color:#fff; border-color:var(--navy)}
.svc:first-child .ic{background:rgba(255,255,255,.14); color:#fff}
.svc:first-child p{color:#DCE7F2}
.svc .ic{width:46px; height:46px; border-radius:12px; background:var(--navy-bg); color:var(--navy);
         display:flex; align-items:center; justify-content:center; flex:none}
.svc h3{font-size:var(--t-meta); font-weight:700; margin:0; line-height:1.3}
.svc p{font-size:var(--t-min); color:var(--ink-3); margin:0; line-height:1.45}

/* ── 서비스/광고 상세 (시놀 병원동행 3단 역설계) ── */
.dhero{padding:26px 20px 4px; text-align:center}
.dhero .kicker{font-size:var(--t-min); font-weight:700; letter-spacing:.3em; text-indent:.3em;
               color:var(--gold-d); margin:0 0 6px}
.dhero h1{font-family:var(--serif); font-size:29px; margin:0; line-height:1.35}
.dimg{margin:18px 20px; border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-lift)}
.price-pill{margin:0 auto; width:fit-content; background:var(--navy); color:#fff;
            border-radius:999px; padding:10px 26px; font-size:var(--t-name); font-weight:700}
.price-pill small{font-size:var(--t-min); font-weight:400; opacity:.85}
.dbody{padding:18px 24px; font-size:var(--t-meta); color:var(--ink-2); line-height:1.8;
       white-space:pre-line}
.trust{margin:6px 20px 18px; background:#fff; border:1px solid var(--line-2);
       border-radius:var(--r); padding:18px}
.trust .tl{display:inline-block; background:var(--sky); color:var(--sea); font-weight:700;
           font-size:var(--t-min); border-radius:999px; padding:3px 14px; margin:0 0 8px}
.trust p{margin:0; font-size:var(--t-min); color:var(--ink-2); line-height:1.7}
.cta-fix{padding:8px 20px 0}

/* ── 가입 ── */
.join-hero{text-align:center; padding:34px 20px 6px}
.join-hero .kicker{font-size:var(--t-min); font-weight:700; letter-spacing:.4em; text-indent:.4em;
                   color:var(--gold-d); margin:0 0 6px}
.join-hero h1{font-family:var(--serif); font-size:30px; margin:0}
.join-hero p{color:var(--ink-2); font-size:var(--t-meta); margin:8px 0 0}
.jform{padding:10px 24px}
.jform label.fld{display:block; font-size:var(--t-meta); font-weight:700; color:var(--ink-2);
                 margin:16px 0 6px}
.jform input[type=text], .jform input[type=tel]{
  width:100%; min-height:58px; border:1.5px solid var(--line); border-radius:var(--r-s);
  padding:0 16px; font:inherit; font-size:var(--t-ui); background:#fff; color:var(--ink)}
.jstep{margin:30px 0 4px; font-size:var(--t-meta); font-weight:700; color:var(--gold-d);
       letter-spacing:.06em; border-top:1px solid var(--line-2); padding-top:22px}
.jstep span{font-weight:400; color:var(--ink-3); font-size:var(--t-min)}
.fld-help{font-size:var(--t-min); color:var(--ink-3); margin:6px 0 0}
.row2{display:grid; grid-template-columns:130px 1fr; gap:14px; align-items:start}
.seg{display:flex; gap:8px}
.seg label{flex:1; position:relative}
.seg input{position:absolute; opacity:0; inset:0}
.seg span{display:flex; align-items:center; justify-content:center; min-height:58px;
          border:1.5px solid var(--line); border-radius:var(--r-s); background:#fff;
          font-size:var(--t-meta); font-weight:700; color:var(--ink-2); padding:0 6px;
          white-space:nowrap}
.seg input:checked + span{background:var(--navy); border-color:var(--navy); color:#fff}
.seg input:focus-visible + span{outline:3px solid var(--navy); outline-offset:2px}
.jform select{width:100%; min-height:58px; border:1.5px solid var(--line);
              border-radius:var(--r-s); padding:0 14px; font:inherit; font-size:var(--t-ui);
              background:#fff; color:var(--ink)}
.consent{background:#fff; border:1.5px solid var(--line); border-radius:var(--r-s);
         padding:6px 16px; margin-top:6px}
.consent label{display:flex; align-items:center; gap:12px; min-height:56px;
               font-size:var(--t-meta); color:var(--ink-2)}
.consent label.all{border-bottom:1px solid var(--line-2); font-size:var(--t-ui);
                   color:var(--ink)}
.consent input{width:26px; height:26px; accent-color:var(--navy); flex:none}
.consent a{font-weight:700; margin-left:6px}
.gpick{display:flex; flex-direction:column; gap:10px; margin-top:6px}
.gpick label{display:flex; align-items:center; gap:12px; border:1.5px solid var(--line);
             border-radius:var(--r-s); padding:14px 16px; background:#fff; min-height:64px;
             font-size:var(--t-ui); font-weight:700}
.gpick input{width:26px; height:26px; accent-color:var(--navy)}
.gpick small{display:block; font-weight:400; font-size:var(--t-min); color:var(--ink-3)}

/* ── 하단 탭바 ── */
.tabbar{position:fixed; bottom:0; left:0; right:0; z-index:30;
        background:rgba(248,246,241,.96); backdrop-filter:blur(8px);
        border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom)}
.tabbar .in{max-width:560px; margin:0 auto; display:flex}
.tabbar a{flex:1; min-height:64px; display:flex; flex-direction:column; align-items:center;
          justify-content:center; gap:2px; text-decoration:none; color:var(--ink-3);
          font-size:var(--t-min); font-weight:700}
.tabbar a.on{color:var(--navy)}
.tabbar a.on .i{stroke-width:2.2}

/* ── 전면 후원사 캐러셀 — 앱과 확실히 분리된 "떠 있는 카드" ── */
.sheet-bg{position:fixed; inset:0; background:rgba(7,12,19,.74); z-index:60; display:none;
          backdrop-filter:blur(2.5px); -webkit-backdrop-filter:blur(2.5px)}
.sheet{position:fixed; left:10px; right:10px; z-index:61; display:none;
       bottom:calc(12px + env(safe-area-inset-bottom))}
.sheet .in{max-width:540px; margin:0 auto; background:var(--paper); border-radius:22px;
           overflow:hidden; border:1.5px solid var(--gold);
           box-shadow:0 10px 30px rgba(0,0,0,.35), 0 30px 80px rgba(0,0,0,.55)}
.sheet .grab{width:44px; height:5px; border-radius:99px; background:var(--line);
             margin:10px auto 8px}
.sheet .viewport{overflow:hidden}
body.sheet-open .sheet-bg, body.sheet-open .sheet{display:block}
body.sheet-open{overflow:hidden}
.sheet .rail{display:flex; transition:transform .5s cubic-bezier(.3,.7,.3,1)}
.sheet .slide{flex:none; width:100%; text-decoration:none; color:inherit}
.sheet .slide img{width:100%; aspect-ratio:2/1; object-fit:cover}
.sheet .slide .bd{padding:14px 20px 6px}
.sheet .slide h3{margin:0; font-size:var(--t-ui)}
.sheet .slide p{margin:2px 0 0; font-size:var(--t-min); color:var(--ink-3)}
.sheet .dots{display:flex; gap:4px; justify-content:center; padding:6px 0 0}
.sheet .dots button{width:32px; height:32px; border:0; background:none; cursor:pointer;
                    display:flex; align-items:center; justify-content:center; padding:0}
.sheet .dots button i{width:9px; height:9px; border-radius:99px; background:var(--line);
                      transition:all .3s; display:block}
.sheet .dots button.on i{background:var(--gold); width:22px}
.sheet .foot{display:flex; align-items:center; justify-content:space-between; padding:6px 10px 12px}
.sheet .foot button{background:none; border:0; font:inherit; font-size:var(--t-meta);
                    font-weight:700; color:var(--ink-3); min-height:56px; padding:0 14px;
                    cursor:pointer}
.sheet .foot .close{color:var(--navy)}

/* ── PC 운영 콘솔 — /manage 계열 전용 (모바일 shell 을 쓰지 않는다) ── */
body.admin{background:#EEF1F4}
.abar{background:var(--navy); color:#fff; position:sticky; top:0; z-index:40}
.abar .in{max-width:1140px; margin:0 auto; display:flex; align-items:center; gap:26px;
          padding:0 24px; min-height:60px; flex-wrap:wrap}
.abar .brand{color:#fff; text-decoration:none; font-size:19px; font-weight:700}
.abar .brand span{color:var(--gold); font-size:15px; font-weight:400; margin-left:4px}
.abar nav{display:flex; gap:4px; flex:1}
.abar nav a{color:#B9CBDC; text-decoration:none; font-size:16px; font-weight:700;
            padding:8px 14px; border-radius:8px; min-height:44px; display:flex; align-items:center}
.abar nav a.on, .abar nav a:hover{background:rgba(255,255,255,.12); color:#fff}
.abar .toapp{color:#E3D3AE; text-decoration:none; font-size:15px; font-weight:700}
.awrap{max-width:1140px; margin:0 auto; padding:28px 24px 60px}
.awrap h1{font-family:var(--serif); font-size:27px; margin:0 0 18px}
.stats{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:14px;
       margin-bottom:26px}
.stat{background:#fff; border:1px solid #E1E5EA; border-radius:12px; padding:18px 20px}
.stat .n{font-family:var(--serif); font-size:34px; font-weight:700; color:var(--navy);
         line-height:1.2}
.stat .l{font-size:15px; color:var(--ink-3); font-weight:600}
.acard{background:#fff; border:1px solid #E1E5EA; border-radius:12px; padding:20px 22px;
       margin-bottom:22px; overflow-x:auto}
.acard h2{font-size:18px; margin:0 0 14px; display:flex; align-items:center; gap:12px}
.acard h2 .sp{margin-left:auto; display:flex; gap:10px}
.atable{width:100%; border-collapse:collapse; font-size:15.5px; line-height:1.5;
        min-width:640px}
.atable th{text-align:left; font-size:13.5px; letter-spacing:.06em; color:var(--ink-3);
           border-bottom:2px solid #E1E5EA; padding:8px 10px; white-space:nowrap}
.atable td{border-bottom:1px solid #EDF0F3; padding:9px 10px; vertical-align:middle}
.atable tr:hover td{background:#F7F9FB}
.pill{display:inline-block; font-size:13px; font-weight:700; border-radius:999px;
      padding:2px 10px; white-space:nowrap}
.pill-on{background:#E2F0E6; color:#1E6B3A}
.pill-off{background:#F0F1F3; color:#7A828C}
.pill-navy{background:var(--navy-bg); color:var(--navy)}
.abtn{display:inline-flex; align-items:center; gap:6px; min-height:38px; padding:0 14px;
      border-radius:8px; border:1.5px solid var(--navy); background:#fff; color:var(--navy);
      font:inherit; font-size:14.5px; font-weight:700; text-decoration:none; cursor:pointer}
.abtn-solid{background:var(--navy); color:#fff}
.abtn-ghost{border-color:#D6DBE1; color:var(--ink-3)}
.aselect{font:inherit; font-size:14.5px; border:1.5px solid #D6DBE1; border-radius:8px;
         min-height:38px; padding:0 8px; background:#fff}

/* 홈 스마트 설치 배너 (설치 안 한 폰에서만 JS 가 켠다) */
.install-banner[hidden]{display:none}
.install-banner{display:flex; align-items:center; gap:12px; margin:14px 20px 0;
                background:var(--navy-bg); border:1px solid #C7D8E8; border-radius:var(--r);
                padding:12px 14px 12px 16px}
.install-banner .ib-txt{flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.4}
.install-banner .ib-txt b{font-size:var(--t-meta); color:var(--navy)}
.install-banner .ib-txt span{font-size:var(--t-min); color:var(--ink-3)}
.install-banner .ib-btn{flex:none; background:var(--navy); color:#fff; text-decoration:none;
                        border:0; border-radius:8px; min-height:48px; padding:0 18px; display:flex;
                        align-items:center; justify-content:center; font-family:inherit;
                        font-size:var(--t-min); font-weight:700; cursor:pointer}
.install-banner .ib-btn[hidden]{display:none}
.install-banner .ib-x{flex:none; background:none; border:0; color:var(--ink-3); font-size:24px;
                      width:44px; height:44px; cursor:pointer; line-height:1}

/* 카톡 인앱 브라우저 인계 배너 */
.escbar[hidden]{display:none}   /* hidden 은 명시 display 에 진다 (라이트박스와 동일 함정) */
.escbar{position:sticky; top:0; z-index:50; background:var(--gold-bg);
        border-bottom:1.5px solid var(--gold); display:flex; align-items:center;
        gap:10px; padding:10px 16px; font-size:var(--t-min); font-weight:700;
        color:var(--gold-d)}
.escbar span{flex:1; min-width:0}
.escbar a{flex:none; background:var(--navy); color:#fff; text-decoration:none;
          border-radius:8px; padding:0 16px; min-height:44px; display:flex;
          align-items:center; font-size:var(--t-min); font-weight:700}

/* 이미 앱으로 실행 중이면 설치 안내는 숨긴다 */
@media (display-mode: standalone){ #installLink{display:none} }

/* 알림줄 — 먹빛 본문 + 왼쪽 금박 바 (색으로 강조하지 않는다, 디자인 P0-2) */
.notice{margin:14px 20px 0; background:var(--gold-bg); border:1px solid #E3D3AE;
        border-left:4px solid var(--gold); color:var(--ink); border-radius:var(--r-s);
        padding:12px 16px; font-size:var(--t-meta); font-weight:700; line-height:1.6}
.jform .notice{margin:14px 0 0}

/* 빈 상태 — display:block 없으면 margin:auto 가 안 먹어 아이콘이 왼쪽에 붙는다 (디자인 P1-2) */
.empty{padding:44px 20px; text-align:center; color:var(--ink-3); font-size:var(--t-meta)}
.empty .i{display:block; width:40px; height:40px; margin:0 auto 8px; stroke-width:1.4;
          color:var(--sea)}   /* blue-l 은 2.65:1 로 미달 → sea (디자인 P2-4) */

/* 잠금 카드·설치 카드 상단 아이콘도 동일 함정 */
.lock-ic{display:block; width:38px; height:38px; margin:0 auto 8px; stroke-width:1.4; color:var(--sea)}

/* 인라인 텍스트 링크 — 56px 터치 (디자인 P1-7) */
.textlink{display:inline-flex; align-items:center; min-height:56px; padding:0 6px;
          font-size:var(--t-meta); font-weight:700; color:var(--navy); text-decoration:none}

/* 모임 안내 배너 (가입 시 어느 모임인지) */
.banner-info{margin:10px 0 0; background:var(--navy-bg); border:1px solid #C7D8E8;
             color:var(--navy); border-radius:var(--r-s); padding:12px 16px;
             font-size:var(--t-meta); font-weight:700}

/* 동의 항목 위계 (디자인 P2-10) */
.consent .req{font-weight:700; color:var(--ink)}
.consent .opt{color:var(--ink-3)}

.btn-danger{background:var(--danger); color:#fff}

/* 게시글 작성자 도구 (수정·삭제 — 모임장·관리자). 삭제를 오른쪽으로 밀어 오터치 방지 */
.owner-tools{display:flex; gap:8px; margin-top:10px}
.owner-tools a, .owner-tools button{display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; padding:0 18px; border:1.5px solid var(--line); border-radius:8px;
  background:#fff; color:var(--ink-2); font:inherit; font-size:var(--t-min); font-weight:700;
  text-decoration:none; cursor:pointer}
.owner-tools .del{margin-left:auto}
.owner-tools .del button{color:var(--danger); border-color:#DDB7B0}
.owner-tools form{margin:0}

/* 글 수정 화면 — 기존 사진 목록. 삭제는 썸네일 하단 전폭 바 (터치·15px 규칙) */
.edit-photos{display:flex; flex-wrap:wrap; gap:12px; margin-top:6px}
.edit-photos .ep{width:104px; border:1px solid var(--line-2); border-radius:var(--r-s); overflow:hidden}
.edit-photos .ep img{display:block; width:104px; height:104px; object-fit:cover}
.edit-photos .ep form{margin:0}
.edit-photos .ep button{width:100%; min-height:44px; background:#fff; color:var(--danger);
                        border:0; border-top:1px solid var(--line-2); font:inherit;
                        font-size:var(--t-min); font-weight:700; cursor:pointer}