/* 정회원 앱 화면. 글꼴은 Pretendard.
   모양새(2026-10-06 정리): 회원이 보는 화면은 모두 흰 바닥이고(운영 화면만 회색 바닥에 흰 묶음), 내용은 묶음 없이 선으로 나뉜 줄로 놓는다.
   따로 묶어 보여 줄 것만 옅은 파란 기의 칸(--tint, 가는 가장자리)에 넣는다. 강조색은 네이비 한 가지.
   글자 굵기: 제목과 줄의 이름은 700, 단추와 표시는 700·600, 본문과 설명은 500·400.
   글자 크기: 구역 제목 19, 묶음·서랍 제목 18, 줄의 이름 16~17, 본문 15, 설명 14, 표시·날짜 12.5~13.
   주 버튼은 네이비로 채우고 보조 버튼은 흰 바탕에 네이비 테두리. 고르는 막대는 밑줄. 누르는 것은 눌림 표시. */
:root {
  --ink: #191f28;
  --text: #191f28;
  --text-2: #4e5968;
  --mute: #6b7684;
  --brand: #1e3a8a;        /* 네이비. 처음 넣은 #15305f 는 검정과 구별이 안 돼 밝혔다(사용자 지적, 2026-10-02) */
  --brand-alt: #172e6e;
  --brand-soft: #e8edf9;
  --bg: #eeeef0;          /* 바닥. 흰 묶음이 테두리 없이도 구분되게 #f6f6f7 에서 조금 진하게(사용자 결정, 2026-10-06). 파란 기는 넣지 않는다 */
  --card: #ffffff;
  --line: #e7e8ec;
  --fill: #f1f2f5;
  --tint: #f0f4fb;         /* 흰 바닥 위의 옅은 칸(더보기의 시작 안내, 함께 쓰는 사이트) */
  --warn: #fff5e0;
  --ok: #128a4d;
  --err: #e03e2f;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --top-h: 44px;
  --nav-h: 60px;
  --nav-side: 12px;   /* 아래 메뉴 좌우 여백 */
  --nav-sp: 8px;      /* 메뉴 알약과 검색 버튼 사이 */
  /* 아래 메뉴와 화면 바닥 사이. 아이폰은 홈 막대 자리(34px)를 다 띄우면 너무 높이 떠서 12px 줄인다 */
  --nav-gap: max(12px, calc(env(safe-area-inset-bottom, 0px) - 12px));
  /* 모서리 둥글기는 세 가지만 쓴다: 묶음·옅은 칸 14, 그 안의 사진·아이콘 칸·눌림 표시 10, 입력란·버튼 8. 알약은 999px */
  --r: 14px;
  --r-in: 10px;
  --r-ctl: 8px;
  --chev: #c4cad3;         /* 옅은 꺾쇠(줄 끝의 '열림' 표시) */
  --tint-line: #dfe6f4;    /* 옅은 칸의 가는 가장자리 */
  --tint-deep: #e3eaf8;    /* 옅은 칸 위에 놓는 알약의 바탕 */
}
/* 자판이 올라와 있을 때(아이폰): 자판 바로 위에 붙인다 */
html.kb { --nav-gap: 8px; }
* { box-sizing: border-box; }
/* hidden 속성이 display 지정보다 항상 이기게 한다 */
[hidden] { display: none !important; }
html {
  -webkit-tap-highlight-color: transparent;   /* 누를 때 회색으로 번쩍이는 것 없애기(대신 :active 로 눌림 표시) */
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
  color-scheme: light;
}
/* 글이 짧은 화면에서도 문서 높이가 화면을 채우게 한다(화면마다 아래 메뉴 위치가 달라 보이던 것 방지) */
/* 아래 메뉴가 화면마다 좌우로 밀리지 않게: 스크롤 막대 자리를 항상 비워 두고(PC), 가로로 넘치는 내용이 화면 폭을 넓히지 못하게 한다(폰) */
html { height: 100%; scrollbar-gutter: stable; overflow-x: clip; }
body { overflow-x: clip; }
body { min-height: 100vh; min-height: 100dvh; }
body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--text); font-size: 16px; line-height: 1.5; letter-spacing: -.012em; -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: anywhere; }
::selection { background: #cdd7f1; }
button, a, summary { touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
button { font-family: inherit; letter-spacing: inherit; cursor: pointer; }
a { color: var(--brand); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ===== 위쪽 띠 ===== */
.top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 10px;
  height: calc(env(safe-area-inset-top, 0px) + var(--top-h)); padding: env(safe-area-inset-top, 0px) 20px 0; background: var(--bg); }
.top-logo { height: 27px; width: auto; display: block; }
.top .link-btn { margin-left: auto; }

main { padding: 4px 16px 28px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; max-width: 520px; margin: 0 auto; }
body.has-nav main { padding-bottom: calc(var(--nav-gap) + var(--nav-h) + 24px + var(--kb, 0px)); }
.view { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }

/* ===== 묶음 ===== */
.card { background: var(--card); border-radius: var(--r); padding: 20px; }
.card h2 { margin: 0 0 8px; font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.card p { margin: 0 0 12px; color: var(--text-2); }
.card p:last-child { margin-bottom: 0; }
.card p b, .steps b { color: var(--ink); }
.card.warn { background: var(--warn); }
.card.warn p { color: #6b4a12; }
.card.mute { background: transparent; padding: 8px 6px; box-shadow: none; }
.note { font-size: 14px; color: var(--text-2); }
.empty { margin: 0; padding: 18px 0; text-align: center; font-size: 14.5px; color: var(--mute); }

/* 구역 제목: 묶음 밖에 */
.sec-title { margin: 16px 0 2px; font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 12px; }
.sec-head .sec-title { margin-bottom: 0; }
.more-btn { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; padding: 6px 2px 6px 6px; font-size: 14px; font-weight: 700; color: var(--mute); }
.more-btn::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.more-btn:active { color: var(--ink); }
a.more-btn { text-decoration: none; }

/* ===== 버튼 ===== */
.btn { display: block; width: 100%; min-height: 50px; padding: 13px 16px; border: 0; border-radius: var(--r-ctl); background: var(--brand); color: #fff; font-size: 16px; font-weight: 700; letter-spacing: .02em;
  transition: transform 140ms var(--ease-out), background-color 140ms ease; }
.btn:active { transform: scale(.97); background: var(--brand-alt); }
.btn.ghost { background: #fff; color: var(--brand); box-shadow: inset 0 0 0 1.5px var(--brand); }
.btn.ghost:active { background: var(--brand-soft); }
.btn:disabled { opacity: .5; }
.card > .btn { margin-top: 14px; }
.btn.small { width: auto; min-height: 38px; padding: 8px 14px; font-size: 14px; border-radius: var(--r-ctl); }
.link-btn { background: none; border: 0; color: var(--mute); font-size: 14px; font-weight: 600; padding: 8px 4px; }
.link-btn.dark { display: block; margin: 6px auto 0; }
.msg { margin: 10px 0 0; font-size: 14.5px; color: var(--text-2); }
.msg:empty { display: none; }
.msg.ok { color: var(--ok); }
.msg.err { color: var(--err); }

/* ===== 로그인 전 첫머리, 설치 안내 ===== */
/* 첫 화면(사용자가 준 참고 화면대로, 2026-10-02): 가운데에 심볼, 한 줄 제목, 설명, 버튼 두 개(로그인은 채운 버튼, 처음 가입은 테두리 버튼).
   버튼을 누르면 이 첫머리가 물러나고 그 입력 화면만 보인다. */
.hero { padding: 18px 8px 8px; text-align: center; }
.hero img { display: block; width: 58px; height: auto; margin: 0 auto; }
.hero h1 { margin: 22px 0 8px; font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; color: var(--ink); text-wrap: balance; }
.hero p { margin: 0 auto; max-width: 300px; color: var(--text-2); font-size: 15px; line-height: 1.55; }
.welcome-acts { display: grid; gap: 12px; margin-top: 30px; }
body.welcome main { min-height: calc(100dvh - env(safe-area-inset-top, 0px) - var(--top-h)); align-content: center; padding-bottom: 72px; }
/* 입력 화면 위쪽: 처음으로 돌아가기, 제목 */
.auth-head { margin-bottom: 18px; }
.auth-head h2 { margin: 6px 0 0; font-size: 21px; font-weight: 700; }
.back-btn { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; margin: -8px 0 0 -6px; padding: 0 8px 0 2px; border: 0; background: none; font-size: 14px; font-weight: 700; color: var(--brand); }
.back-btn svg { width: 18px; height: 18px; }
.steps { list-style: none; padding: 0; margin: 14px 0 0; display: grid; counter-reset: s; }
.steps li { counter-increment: s; display: flex; align-items: center; gap: 12px; padding: 12px 0; font-size: 15px; color: var(--text-2); }
.steps li::before { content: counter(s); flex: none; width: 26px; height: 26px; border-radius: var(--r-ctl); background: var(--brand-soft); color: var(--brand); font-size: 13.5px; font-weight: 800; display: grid; place-items: center; }
.steps .ico { flex: none; width: 34px; height: 34px; border-radius: var(--r-in); background: var(--fill); display: grid; place-items: center; color: var(--brand); }
.steps .ico svg { width: 20px; height: 20px; }
.steps .txt { flex: 1; }
/* 아이폰 설치 안내: 공유 창에 가려지지 않게 위쪽에 촘촘히 */
#ios-install { padding: 16px 18px; }
#ios-install h2 { font-size: 18px; margin-bottom: 0; }
#ios-install .steps { margin-top: 6px; }
#ios-install .steps li { padding: 7px 0; font-size: 15px; gap: 10px; }
#ios-install .steps .ico { width: 30px; height: 30px; }
#ios-install .note { margin: 10px 0 0; font-size: 13px; }

/* ===== 선택 막대(로그인·소식) ===== */
.tabs { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.tabs.three, .tabs.two { margin: 2px 0 0; }
.tabs.three { grid-template-columns: 1fr 1fr 1fr; }
/* 소식 탭이 네 개 이상이면(그룹에 든 회원) 옆으로 밀어서 본다 */
.tabs.scroll { display: flex; margin: 2px 0 0; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.tabs.scroll::-webkit-scrollbar { display: none; }
.tabs.scroll .tab { flex: 1 0 auto; padding: 8px 16px; white-space: nowrap; }
/* 소식·채널 화면(사용자가 준 참고 화면대로, 2026-10-06): 바닥 전체가 흰색이고 흰 묶음 없이 줄만 있다.
   고르는 막대는 화면 폭을 칸 수대로 똑같이 나눠 꽉 채우고(글자 폭만큼만 놓았다가 사용자가 바로잡음, 2026-10-06), 화면 양끝까지 닿는 선 아래에 옅은 그림자가 진다. */
body.flat { --bg: #fff; }
/* 설치 안내처럼 화면 위에 따로 뜨는 묶음은 흰 바닥에서 묻히지 않게 옅은 회색으로 */
body.flat main > section.card:not(.warn) { background: var(--tint); box-shadow: inset 0 0 0 1px var(--tint-line); }
/* 로그인 전 화면(로그인, 처음 가입, 비밀번호 다시 정하기)과 검색 결과도 흰 바닥에 묶음 없이 */
body.flat main > #auth { padding: 4px 2px 0; border-radius: 0; background: none; box-shadow: none; }
body.flat #sr-out .card { padding: 0; border-radius: 0; background: none; }
body.flat #v-news > .card { padding: 6px 0 0; border-radius: 0; background: none; }
body.flat .chs { gap: 0; }
body.flat .ch.card { padding: 20px 0 22px; border-radius: 0; background: none; }
body.flat .ch.card + .ch.card { border-top: 1px solid var(--line); }
#news-tabs, #ch-tabs, #ad-tabs { position: relative; z-index: 1; display: flex; gap: 0; margin: 2px -16px 0; padding: 0 16px; box-shadow: 0 9px 10px -9px rgba(20, 32, 54, .16); }
#news-tabs .tab, #ch-tabs .tab, #ad-tabs .tab { flex: 1 1 0; min-width: 0; padding: 8px 6px; white-space: nowrap; }
/* 자판으로 옮겨 왔을 때의 표시는 테두리 선 대신 옅은 바탕으로(선이 위쪽 띠와 화면 끝에 잘려 이상한 선으로 보였다) */
.tab:focus-visible { outline: none; background-color: var(--brand-soft); }
/* 소식 > 채용 공고의 거르기 줄: 왼쪽 "모집 중만 보기"(켜면 네이비), 오른쪽 지역 고르기 */
.nfilter { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }
.nfilter select { -webkit-appearance: none; appearance: none; min-height: 36px; max-width: 50%; padding: 0 32px 0 14px; border: 0; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 600; color: var(--text-2);
  background-color: var(--fill); background-image: linear-gradient(45deg, transparent 50%, #8b95a1 50%), linear-gradient(135deg, #8b95a1 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.tab { border: 0; background: none; min-height: 46px; padding: 8px; font-size: 16px; color: var(--text-2); font-weight: 500; transition: color 140ms ease; }
.tab:active { color: var(--ink); }
/* 고른 칸의 밑줄은 바탕 그림으로 긋는다. 안쪽 그림자로 긋던 때에는 칸 폭이 소수점으로 나뉘는 화면에서 칸 옆에 가는 세로선이 생겼다(사용자가 본 "이상한 선", 2026-10-06) */
.tab.on { color: var(--brand); font-weight: 700; background: linear-gradient(var(--brand), var(--brand)) 0 100% / 100% 2.5px no-repeat; --slop-allow: gradient-fill; }

/* ===== 입력 ===== */
.form { display: grid; gap: 16px; }
.form label { display: grid; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text-2); }
/* 입력 칸 글자는 16px 이상이어야 아이폰이 화면을 확대하지 않는다 */
.form input:not([type=checkbox]):not([type=radio]), .form select, .form textarea { font: inherit; font-size: 17px; font-weight: 500; padding: 14px 14px; border: 0; border-radius: var(--r-ctl); background: #fff; box-shadow: inset 0 0 0 1px #cfd3da; width: 100%; color: var(--ink); caret-color: var(--brand); -webkit-appearance: none; appearance: none; transition: box-shadow 140ms ease, background-color 140ms ease; }
.form input:not([type=checkbox]):not([type=radio]):focus, .form select:focus, .form textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--brand); }
/* 입력란 옆에 붙는 버튼(가입의 쿠폰 번호 옆 "인증하기") */
.with-btn { display: flex; gap: 8px; }
.with-btn input { flex: 1; min-width: 0; }
.with-btn .btn { flex: none; min-height: 0; padding: 0 16px; font-size: 14px; white-space: nowrap; }
.with-btn .btn.done { background: var(--brand-soft); color: var(--brand); opacity: 1; }
#verify-msg { margin: -6px 0 0; }
.form textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.form select { background-image: linear-gradient(45deg, transparent 50%, #8b95a1 50%), linear-gradient(135deg, #8b95a1 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; --slop-allow: gradient-fill; }
.form label.check { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; color: var(--ink); cursor: pointer; }
.form label.check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--brand); }
.form label.check small { display: block; margin-top: 2px; }
.form input::placeholder { color: #8b95a1; font-weight: 400; }
.form small { font-weight: 400; color: var(--mute); font-size: 13px; }
.help { margin-top: 20px !important; text-align: center; font-size: 13.5px; }

/* ===== 회원 카드 =====
   한국AI속기사협회 멤버십 카드(2026-10-07 어두운 톤으로, 사용자 결정). 기본 카드는 짙은 네이비 금속(미드나이트 티타늄), 한글속기 자격을 취득한 회원(.mcard.cert)은 진한 그래파이트.
   겹(아래→위): 소재 배경 .mc-surface → MEMBERSHIP·심볼 .mc-brand → 회원 정보 .mc-info.
   수치는 카드 폭 350px 기준이고 폭에 따라 달라진다(1cqw = 카드 폭의 1%). 이 구역의 규칙은 .mcard 안에만 적용된다. */
.mcard { container-type: inline-size; perspective: 1600px; cursor: pointer; touch-action: manipulation; }
.mc-inner { display: grid; transform-style: preserve-3d; transition: transform 520ms cubic-bezier(0.32, 0.72, 0, 1); }
.mcard.flipped .mc-inner { transform: rotateY(180deg); }
.member-card {
  --fg: #f3f5fa; --fg-2: rgba(236, 240, 250, .62);   /* 어두운 금속 위의 밝은 글자 */
  grid-area: 1 / 1; position: relative; overflow: hidden; isolation: isolate;   /* 앞뒤가 같은 칸에 겹쳐 있어 높이가 항상 같다 */
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: clamp(18px, 6cqw, 28px);
  min-height: calc(100cqw / 1.62);   /* 비율 1.62:1. 내용이 길면(긴 이름·긴 기종) 아래로 늘어나고, 앞뒤가 같이 늘어난다 */
  padding: clamp(18px, 5.9cqw, 26px) clamp(20px, 6.5cqw, 28px);
  border-radius: clamp(14px, 4.6cqw, 18px);
  color: var(--fg); background-color: #0f2244;   /* 배경 사진이 뜨기 전에도 같은 밝기 */
  /* 가는 가장자리 선(금속 판의 모서리)과 아래 그림자 */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13), 0 14px 28px -14px rgba(10, 16, 32, .6);
}
.mc-back { transform: rotateY(180deg); }
.mc-surface { position: absolute; inset: 0; z-index: -2; pointer-events: none; background: url("/img/card-titanium.webp") center / cover no-repeat; }
.mcard.cert .member-card { background-color: #191d24; }
.mcard.cert .mc-surface { background-image: url("/img/card-graphite.webp"); }
/* 은빛 글자(MEMBERSHIP, 회원 구분): 은빛이 한 번만 밝아졌다 돌아온다. 기본 카드는 은은하게(실버 1), 자격 취득 카드는 금속 느낌을 조금 더(실버 2). 사용자 결정, 2026-10-07.
   그림자·발광·입체 효과 없음. background-clip 을 못 쓰는 환경에서는 한 색으로 보인다. */
.mc-silver { --slop-allow: gradient-text; color: #cfd6e2; }
.mcard.cert .mc-silver { color: #c3ccd9; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .mcard.cert .mc-silver { background-image: linear-gradient(105deg, #8f9bae 0%, #c9d2df 28%, #ffffff 50%, #b9c3d2 70%, #8893a6 100%); }
  .mc-silver { background: linear-gradient(105deg, #b9c2d1 0%, #dfe5ee 34%, #f4f6fa 52%, #d3dae6 74%, #b4bdcc 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
}
/* 위쪽: 왼쪽 MEMBERSHIP, 오른쪽 협회 심볼의 음각(색을 칠하지 않고 그늘과 빛만으로 눌린 자국. 어두운 바탕용 그림은 assets/card_dark/symbol-deboss-dark.png).
   그림 둘레에 여백(로고 높이의 2/36)이 들어 있어 그만큼 키우고 음수 여백으로 되돌린다. --lh = 로고가 보이는 높이 */
.mc-brand { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.mc-brand span { font-size: clamp(11.5px, 3.4cqw, 13px); font-weight: 500; letter-spacing: .2em; line-height: 1.4; }
.mc-brand img { --lh: clamp(38px, 12.4cqw, 46px); flex: none; display: block; width: auto; height: calc(var(--lh) * 40 / 36); margin: calc(var(--lh) * -2 / 36); }
/* 회원 정보: 이름·회원 구분·가입일·기종이 한 덩어리로 읽힌다 */
.mc-who { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: clamp(10px, 3.2cqw, 12px); row-gap: 2px; }
.mc-name { font-size: clamp(24px, 7.4cqw, 29px); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; overflow-wrap: anywhere; }
.mc-badge { font-size: clamp(11.5px, 3.4cqw, 12.5px); font-weight: 500; white-space: nowrap; }
.mc-badge.off { background: none; -webkit-text-fill-color: currentColor; color: var(--fg-2); }
dl.mc-meta { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(20px, 7cqw, 30px); margin: clamp(15px, 4.8cqw, 18px) 0 0; font-size: inherit; color: inherit; }
/* 자격 취득 회원: 가입일·기종 옆에 한글속기 급수 칸이 하나 더 있다 */
dl.mc-meta.three { grid-template-columns: auto auto minmax(0, 1fr); column-gap: clamp(18px, 6cqw, 26px); }
dl.mc-cp { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
.mc-meta dt { font-size: clamp(10.5px, 3.1cqw, 11.5px); font-weight: 500; color: var(--fg-2); }
.mc-meta dd { margin: 5px 0 0; font-size: clamp(13px, 3.9cqw, 14.5px); font-weight: 500; line-height: 1.35; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#mc-coupon { letter-spacing: .04em; white-space: nowrap; -webkit-user-select: text; user-select: text; }
/* 뒤집기 버튼: 카드 밖 오른쪽 아래. 글자는 작게, 누르는 자리는 44px */
.mc-flip { justify-self: end; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: -12px 0 -10px; padding: 0 6px; border: 0; background: none; font-size: 12.5px; font-weight: 600; color: var(--mute); }
.mc-flip svg { width: 15px; height: 15px; }
.mc-flip:active { color: var(--ink); }

/* ===== 홈: 안 읽은 알림, 옆으로 넘기는 카드(모집 중 공고, 협회 행사) ===== */
.halert { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 12px; border: 0; border-radius: var(--r); background: var(--tint); box-shadow: inset 0 0 0 1px var(--tint-line); color: inherit; font: inherit; letter-spacing: inherit; text-align: left; transition: transform 140ms var(--ease-out); }
.halert:active { transform: scale(.98); }
.halert-ico { position: relative; flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; }
.halert-ico svg { width: 22px; height: 22px; }
.halert-ico::after { content: ""; position: absolute; top: 2px; right: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--err); box-shadow: 0 0 0 2px var(--card); }
.halert .tx { flex: 1; min-width: 0; }
.halert .tx b { display: block; font-size: 16px; font-weight: 700; color: var(--ink); }
.halert .tx small { display: block; margin-top: 1px; font-size: 14px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.halert .chev { flex: none; width: 18px; height: 18px; color: var(--chev); }
.hnote { margin: 0; font-size: 14px; color: var(--mute); }
/* 모집 중 공고: 옆으로 넘기는 줄(사용자 요청, 2026-10-06. 그 전에는 카드 더미). 한 장이 거의 다 보이고 다음 장이 오른쪽에 살짝 보인다.
   줄은 화면 양끝까지 닿게 하고(음수 여백) 안쪽 여백으로 첫 장을 다른 묶음과 나란히 맞춘다. 손을 떼면 장의 왼쪽 끝에 맞춰 선다. */
.jrow { display: flex; gap: 10px; margin: 0 -16px; padding: 0 16px 2px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 16px; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.jrow::-webkit-scrollbar { display: none; }
.jcard { flex: 0 0 calc(100% - 24px); min-width: 0; min-height: 172px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border-radius: var(--r); background: var(--tint); box-shadow: inset 0 0 0 1px var(--tint-line); color: inherit; text-decoration: none; -webkit-user-drag: none; transition: transform 140ms var(--ease-out); }
.jcard:only-child { flex-basis: 100%; }
.jcard:active { transform: scale(.985); }
.jc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 27px; font-size: 12.5px; color: var(--mute); font-variant-numeric: tabular-nums; }
.jc-tags { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.jc-top > :last-child { flex: none; }
.jc-reg { padding: 5px 11px; border-radius: 999px; background: var(--tint-deep); color: var(--brand); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.jcard .pill { background: var(--tint-deep); }
.jcard b { margin-top: 2px; font-size: 18px; font-weight: 700; line-height: 1.4; letter-spacing: -.02em; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jc-sub { margin-top: auto; font-size: 14px; color: var(--mute); }
.jcard small { font-size: 14px; line-height: 1.45; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.jcard b + small { margin-top: auto; }
/* 상태 알약(접수 예정, 마감) */
.pill { flex: none; padding: 5px 11px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: 12.5px; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.pill.off { background: var(--fill); color: var(--mute); }
/* 몇 번째 장인지(사용자가 준 목업대로, 2026-10-06): 가운데 점들(지금 장은 길쭉한 네이비 점), 오른쪽 끝에 "1 / 8". 점을 누르면 그 장으로 간다 */
.jdots { position: relative; display: flex; align-items: center; justify-content: center; min-height: 32px; margin-top: 6px; }
#deck-dots { display: flex; align-items: center; gap: 2px; }
#deck-dots button { width: 18px; height: 28px; padding: 0; border: 0; background: none; display: grid; place-items: center; transition: width 220ms var(--ease-out); }
#deck-dots button::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: #cfd5df; transition: width 220ms var(--ease-out), background-color 220ms ease; }
#deck-dots button.on { width: 30px; }
#deck-dots button.on::before { width: 18px; background: var(--ink); }
#deck-n { position: absolute; right: 4px; font-size: 13px; color: var(--mute); font-variant-numeric: tabular-nums; }

/* ===== 홈의 핸디(마스코트): 아래 메뉴 위에 서 있다 =====
   화면에 고정이라 스크롤과 상관없이 보인다. --hx(왼쪽에서 얼마나), --hy(들어 올린 높이, 0이면 메뉴 위)를 JS가 넣는다.
   집어서 옮기는 동안(.held)에는 손가락을 그대로 따라오고, 놓으면(.drop) 메뉴 위로 떨어져 내려앉는다. */
.handy { position: fixed; z-index: 11; left: 0; bottom: calc(var(--nav-gap) + var(--nav-h) - 5px); width: 117px; pointer-events: none;
  transform: translate3d(var(--hx, 0px), var(--hy, 0px), 0); }
.handy.drop { transition: transform 420ms cubic-bezier(0.34, 1.3, 0.64, 1); }
#handy-btn { position: relative; display: block; width: 100%; border: 0; padding: 0; background: none; line-height: 0; pointer-events: auto; touch-action: none; cursor: grab;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; transform-origin: 50% 100%; transition: transform 180ms var(--ease-out); }
.handy.held #handy-btn { cursor: grabbing; transform: scale(1.08) rotate(-4deg); }
.handy.pop #handy-btn { animation: handy-pop 260ms var(--ease-out); }
@keyframes handy-pop { 35% { transform: scale(1.06, .92); } 70% { transform: scale(.97, 1.05); } }
#handy-img, #handy-anim { display: block; width: 100%; height: auto; -webkit-user-drag: none; pointer-events: none; }
/* 끝날 때: 서 있는 그림은 밑에서 바로 다시 나타나고, 위의 움직이는 그림만 서서히 사라진다.
   둘을 같이 흐리게 바꾸면 그 사이에 핸디가 잠깐 비쳐 보인다(2026-10-02 확인). */
#handy-anim { position: absolute; left: 0; top: 0; transition: opacity 140ms ease; }
.handy.playing #handy-img { opacity: 0; }
.handy.ending #handy-anim { opacity: 0; }
/* 말풍선: 핸디 머리 위. 핸디가 화면 오른쪽에 있으면 오른쪽 끝을, 왼쪽에 있으면 왼쪽 끝을 맞춘다 */
.handy-say { position: absolute; bottom: calc(100% - 20px); right: 4px; margin: 0; padding: 10px 14px; border-radius: 18px 18px 4px 18px; background: var(--card); box-shadow: 0 6px 18px -8px rgba(20, 32, 54, .4); font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--ink); white-space: nowrap;
  transform-origin: 100% 100%; animation: say-in 360ms var(--ease-out) both; }
.handy.left .handy-say { right: auto; left: 4px; border-radius: 18px 18px 18px 4px; transform-origin: 0 100%; }
.handy-say.out { animation: say-out 240ms ease-in both; }
@keyframes say-in { from { opacity: 0; transform: translateY(6px) scale(.9); } }
@keyframes say-out { to { opacity: 0; transform: translateY(4px) scale(.96); } }

/* ===== 알림 받기: 얇은 한 줄 ===== */

/* ===== 아래 메뉴 ===== */
/* 화면 아래에 떠 있는 알약(메뉴)과 오른쪽 둥근 검색 버튼. 검색 버튼을 누르면 메뉴가 물러나고 검색란이 버튼 옆에서 왼쪽으로 펼쳐진다.
   자판이 올라오면 --kb(자판 높이, app.js가 넣는다)만큼 위로 올라가 자판 바로 위에 붙는다. */
.nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; max-width: 520px; margin: 0 auto; display: flex; gap: var(--nav-sp);
  padding: 0 var(--nav-side) var(--nav-gap); pointer-events: none;
  transform: translateY(calc(-1 * var(--kb, 0px))); transition: transform 200ms var(--ease-out); }
.nav-tabs, .nav-search, .nav-fab { pointer-events: auto; background: rgba(255, 255, 255, .84); -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px);
  box-shadow: 0 0 0 1px rgba(20, 32, 54, .05), 0 10px 26px -10px rgba(20, 32, 54, .28); }
.nav-tabs { flex: 1; min-width: 0; height: var(--nav-h); display: flex; padding: 4px; border-radius: 999px; transform-origin: 0 50%;
  transition: opacity 160ms ease, transform 300ms var(--ease-out); }
.nav-tabs button { position: relative; flex: 1; min-width: 0; border: 0; border-radius: 999px; background: none; display: grid; place-content: center; justify-items: center; gap: 1px;
  font-size: 11px; font-weight: 500; color: #191f28; transition: transform 140ms var(--ease-out), color 120ms ease, background-color 160ms ease; }
.nav-tabs button svg { width: 23px; height: 23px; }
.nav-tabs button.on { font-weight: 700; }
.nav-tabs button:active { transform: scale(.94); }
/* 지금 화면(사용자가 준 참고 화면대로, 2026-10-02): 아이콘을 강조색으로 꽉 채우고 글자도 강조색, 바탕은 옅은 회색 알약.
   나머지는 검정 선 아이콘. 채운 아이콘 안의 글줄·세모는 흰색으로 남긴다(.f = 채울 모양, .d/.dp = 안쪽 그림). */
.nav-tabs button.on { color: var(--brand); background: rgba(25, 31, 40, .07); }
.nav-tabs button.on svg .f { fill: currentColor; }
.nav-tabs button.on svg .d { stroke: #fff; }
.nav-tabs button.on svg .dp { fill: #fff; }
/* 새 소식 점 */
.nav-tabs button.dot::after { content: ""; position: absolute; top: 7px; left: 50%; margin-left: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--err); box-shadow: 0 0 0 2px #fff; }
/* 검색 버튼: 돋보기와 닫기(X)가 같은 자리에서 바뀐다 */
.nav-fab { flex: none; width: var(--nav-h); height: var(--nav-h); border: 0; border-radius: 50%; padding: 0; display: grid; place-items: center; color: var(--ink);
  transition: transform 140ms var(--ease-out); }
.nav-fab:active { transform: scale(.92); }
.nav-fab svg { grid-area: 1 / 1; width: 24px; height: 24px; transition: opacity 160ms ease, transform 300ms var(--ease-out); }
.nav-fab .i-close { opacity: 0; transform: rotate(-60deg) scale(.6); }
.nav.searching .i-find { opacity: 0; transform: scale(.6); }
.nav.searching .i-close { opacity: 1; transform: none; }
/* 검색란: 접혀 있을 때는 검색 버튼 바로 왼쪽에 폭 0으로 있다가 왼쪽으로 펼쳐진다 */
.nav-search { position: absolute; right: calc(var(--nav-side) + var(--nav-h) + var(--nav-sp)); bottom: var(--nav-gap); height: var(--nav-h); width: 0; margin: 0;
  display: flex; align-items: center; gap: 10px; border-radius: 999px; overflow: hidden; opacity: 0; pointer-events: none; color: var(--mute);
  transition: width 340ms cubic-bezier(0.32, 0.72, 0, 1), opacity 140ms ease; }
.nav-search svg { flex: none; width: 21px; height: 21px; margin-left: 18px; }
/* 글자는 16px 이상(아이폰이 화면을 확대하지 않게) */
.nav-search input { flex: 1; min-width: 0; height: 100%; padding: 0 18px 0 0; border: 0; border-radius: 0; background: none; outline: none; font: inherit; font-size: 17px; font-weight: 500; color: var(--ink); caret-color: var(--brand); -webkit-appearance: none; appearance: none; }
.nav-search input::placeholder { color: #8b95a1; font-weight: 400; }
.nav.searching .nav-search { width: calc(100% - var(--nav-side) * 2 - var(--nav-h) - var(--nav-sp)); opacity: 1; pointer-events: auto; }
.nav.searching .nav-tabs { opacity: 0; transform: scale(.96); pointer-events: none; }

/* ===== 검색 결과 ===== */
#v-search .sec-title { margin-top: 16px; }
#v-search .sec-title:first-child { margin-top: 2px; }
#sr-hint { padding: 36px 12px; }

/* ===== 당겨서 새로 고침 ===== */
.ptr { position: fixed; z-index: 9; left: 50%; top: calc(env(safe-area-inset-top, 0px) + var(--top-h) - 44px); width: 36px; height: 36px; border-radius: 50%; background: #fff; box-shadow: 0 4px 14px -4px rgba(0, 0, 0, .25); display: grid; place-items: center; opacity: 0; transform: translate(-50%, 0); pointer-events: none; }
.ptr i { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid #d5dbe2; border-top-color: var(--mute); transition: border-top-color 120ms ease; }
.ptr.ready i { border-top-color: var(--brand); }
.ptr.spin i { border-top-color: var(--brand); animation: ptr-spin 600ms linear infinite; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }

/* ===== 글 목록(소식, 운영) ===== */
.posts { list-style: none; padding: 0; margin: -8px 0; }
.posts li { padding: 16px 0; }
.posts li + li { border-top: 1px solid var(--line); }
.posts .ph, .posts .pb, .posts .pf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.posts .pb { margin: 6px 0 5px; }
.posts .pb .chev { flex: none; width: 18px; height: 18px; color: var(--chev); }
.posts .pf { min-height: 20px; }
.posts .tag { font-size: 13px; font-weight: 700; color: var(--brand); margin-right: 8px; }
.posts .tag.closed { color: var(--mute); }
.posts .date { flex: none; font-size: 13px; color: var(--mute); font-variant-numeric: tabular-nums; }
.posts .title { flex: 1; min-width: 0; font-size: 17px; font-weight: 700; line-height: 1.4; letter-spacing: -.02em; color: var(--ink); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.posts .sum { flex: 1; min-width: 0; font-size: 14px; line-height: 1.45; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
/* 회원 화면의 소식: 줄 전체가 눌린다 */
.posts a.post { display: block; margin: -16px -12px; padding: 16px 12px; border-radius: var(--r-in); color: inherit; text-decoration: none; transition: background-color 120ms ease, transform 140ms var(--ease-out); }
.posts a.post:active { background: var(--fill); transform: scale(.985); }
.posts li.hit a.post { background: var(--brand-soft); }
.posts .acts { display: flex; gap: 8px; margin-top: 14px; }
.posts .acts button { flex: 1; min-height: 44px; padding: 8px; border-radius: var(--r-ctl); font-size: 15px; font-weight: 700; border: 0; background: var(--fill); color: var(--text-2); transition: transform 140ms var(--ease-out); }
.posts .acts button:active { transform: scale(.97); }
.posts .acts button.go { background: var(--brand); color: #fff; }
.posts .acts button:disabled { opacity: .5; }

/* ===== 알림함: 위쪽 종 버튼 → 오른쪽에서 열리는 서랍, 말풍선 ===== */
.bell { position: relative; margin-left: auto; margin-right: -10px; width: 44px; height: 44px; border: 0; background: none; color: var(--ink); display: grid; place-items: center; transition: transform 140ms var(--ease-out); }
.bell svg { width: 27px; height: 27px; }
.bell:active { transform: scale(.92); }
.bell-n { position: absolute; top: 1px; left: 30px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--err); color: #fff; font-size: 11.5px; font-style: normal; font-weight: 700; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px #fff; }
.top .bell + .link-btn { margin-left: 0; }
body.locked { overflow: hidden; }
.inbox-wrap { position: fixed; inset: 0; z-index: 30; }
.inbox-dim { position: absolute; inset: 0; background: rgba(20, 28, 40, .38); opacity: 0; transition: opacity 240ms ease; }
/* 화면을 다 덮지 않고 왼쪽에 보던 화면이 조금 남는다(사용자가 준 참고 화면대로, 2026-10-02) */
.inbox-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(82%, 440px); display: flex; flex-direction: column; /* 대화방 바탕: 아래쪽에 협회 로고의 세 색(하늘 #1481bf, 보라 기 도는 파랑 #445ca9, 남보라 #353996)이 아주 연하게 번지고 위로 갈수록 밝아진다(사용자가 준 참고 화면 방식을 위아래로 뒤집음, 2026-10-06).
     바탕은 서랍에 붙어 있고 말풍선만 그 위로 지나간다. 가장 밝은 맨 위는 흰색(사용자 결정, 2026-10-06. 그 전의 #f3f5fa 에서 바꿈). 그 자리의 흰 말풍선은 옅은 그림자로만 구분된다. */
  background:
    radial-gradient(95% 42% at 0% 96%, rgba(20, 129, 191, .26), rgba(20, 129, 191, 0) 72%),
    radial-gradient(90% 40% at 100% 100%, rgba(53, 57, 150, .22), rgba(53, 57, 150, 0) 70%),
    radial-gradient(80% 34% at 62% 70%, rgba(68, 92, 169, .16), rgba(68, 92, 169, 0) 72%),
    linear-gradient(0deg, #eaf0fa 0%, #f6f8fc 58%, #fff 100%);
  transform: translate3d(100%, 0, 0); transition: transform 340ms cubic-bezier(0.32, 0.72, 0, 1); box-shadow: -12px 0 40px -18px rgba(20, 32, 54, .35); }
.inbox-wrap.open .inbox-dim { opacity: 1; }
.inbox-wrap.open .inbox-panel { transform: none; }
.inbox-head { flex: none; display: flex; align-items: center; justify-content: space-between; height: calc(env(safe-area-inset-top, 0px) + 52px); padding: env(safe-area-inset-top, 0px) 8px 0 20px; }
/* 알림함 위쪽(제목 줄과 분류 단추 줄)은 살짝 비쳐서, 그 밑으로 말풍선이 지나가는 것이 보인다(사용자 요청, 2026-10-02).
   말풍선 칸을 위쪽 줄 밑까지 끌어올리고(음수 여백), 그만큼 안쪽 여백을 줘서 처음에는 가려지지 않는다. */
.inbox-head, #inbox-chips { position: relative; z-index: 1; background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); }
.inbox-panel { --inbox-top: calc(env(safe-area-inset-top, 0px) + 52px + 54px); }
.inbox-panel:has(#inbox-chips:empty) { --inbox-top: calc(env(safe-area-inset-top, 0px) + 52px); }
.inbox-head b { font-size: 18px; font-weight: 700; color: var(--ink); }
.inbox-head button { width: 44px; height: 44px; border: 0; background: none; color: var(--ink); display: grid; place-items: center; }
.inbox-head button svg { width: 24px; height: 24px; }
#inbox-chips { flex: none; flex-wrap: nowrap; overflow-x: auto; height: 54px; padding: 9px 16px; scrollbar-width: none; }
#inbox-chips:empty { display: none; }
#inbox-chips::-webkit-scrollbar { display: none; }
#inbox-chips .chip { flex: none; }
/* 저장 단추는 줄이 길어 옆으로 밀려도 오른쪽 끝에 붙어 항상 보인다(서랍이 좁아 다섯 개가 한 줄에 다 안 들어간다) */
#inbox-chips .chip[data-from="saved"] { position: sticky; right: 0; margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 0 12px 0 10px; box-shadow: 16px 0 0 0 #fff, -8px 0 10px 4px rgba(255, 255, 255, .95); }   /* 오른쪽 여백과 왼쪽을 흰색으로 가려 밑으로 지나가는 단추가 비치지 않게 */
#inbox-chips .chip[data-from="saved"] svg { width: 15px; height: 15px; fill: #ffcc3e; stroke: #ffcc3e; stroke-width: 1.9; stroke-linejoin: round; }
.bubbles { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; margin-top: calc(-1 * var(--inbox-top)); padding: calc(var(--inbox-top) + 14px) 12px calc(env(safe-area-inset-bottom, 0px) + 20px); scroll-padding-top: calc(var(--inbox-top) + 8px); display: flex; flex-direction: column; gap: 14px; }
.bubbles .empty { margin: auto; }
.bub-day { align-self: center; padding: 5px 12px; border-radius: 999px; background: rgba(21, 80, 170, .08); font-size: 12.5px; color: #5a6b82; }
.bub { display: flex; align-items: flex-start; gap: 8px; max-width: 100%; }
.bub .av { width: 40px; height: 40px; background: #fff; }
.bub .av svg { width: 22px; height: 22px; }
.bub .av img { width: 23px; }
/* 얼굴 표시(핸디, 핑키): 동그라미 없이 머리 그림만(사용자 결정, 2026-10-02) */
.bub .av.av-face { background: none; border-radius: 0; overflow: visible; }
.bub .av.av-face img { width: 100%; height: 100%; object-fit: contain; }
.bub-main { min-width: 0; display: grid; justify-items: start; gap: 4px; }
.bub-from { font-size: 12.5px; font-weight: 600; color: #3f5676; margin-left: 2px; }
/* 서랍이 좁아서 시각은 말풍선 옆이 아니라 아래에 둔다 */
.bub-row { display: grid; justify-items: start; gap: 4px; max-width: 100%; }
.bub-box { min-width: 0; max-width: 100%; padding: 12px 14px; border-radius: 4px 18px 18px 18px; background: #fff; box-shadow: 0 1px 2px rgba(20, 32, 54, .06); overflow-wrap: anywhere; -webkit-user-select: text; user-select: text; }
/* 말풍선과 그 오른쪽 위 모서리에 걸친 별(저장) */
/* 폭 제한은 말풍선이 아니라 이 틀에 건다. 말풍선에 걸면 글이 길 때 틀만 줄 끝까지 넓어져 별이 말풍선에서 떨어진다(2026-10-06 사용자 지적) */
.bub-wrap { position: relative; min-width: 0; max-width: min(300px, 100%); }
.bub-wrap:has(.bub-box.open) { max-width: 100%; }
.bub-star { position: absolute; top: -17px; right: -14px; width: 40px; height: 40px; padding: 0; border: 0; background: none; display: grid; place-items: center; color: #c3cad6; }
.bub-star svg { width: 21px; height: 21px; fill: #fff; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; stroke-linecap: round; transition: transform 160ms var(--ease-out), fill 160ms ease, stroke 160ms ease; }
.bub-star:active svg { transform: scale(.82); }
/* 저장한 말풍선: 테두리 없는 노란 별에 그림자를 넉넉히. 살짝 기울어 숨 쉬듯 커졌다 작아진다(옆의 작은 반짝이 점은 뺐다. 사용자 결정, 2026-10-06).
   선 색을 채움과 같게 둬서 테두리는 안 보이고 모서리만 둥글어진다. */
.bub-star.on svg { fill: #ffcc3e; stroke: #ffcc3e; filter: drop-shadow(0 1px 1px rgba(150, 95, 0, .38)) drop-shadow(0 2.5px 5px rgba(255, 168, 0, .62)); animation: star-glow 2.6s ease-in-out infinite; }
.bub-star.on.pop svg { animation: star-pop 460ms var(--ease-out), star-glow 2.6s ease-in-out 460ms infinite; }
@keyframes star-glow { 0%, 100% { transform: rotate(-8deg) scale(1); } 50% { transform: rotate(-8deg) scale(1.12); } }
@keyframes star-pop { 0% { transform: rotate(-40deg) scale(.4); } 60% { transform: rotate(4deg) scale(1.35); } 100% { transform: rotate(-8deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { .bub-star.on svg { animation: none; } .bub-star.on svg { transform: rotate(-8deg); } }
.bub-box b { display: block; font-size: 15px; font-weight: 700; line-height: 1.45; color: var(--ink); }
.bub-box small { display: block; margin-bottom: 3px; font-size: 13px; font-weight: 700; color: var(--brand); }
.bub-box p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--text); white-space: pre-line; }
.bub-box p a { -webkit-user-select: text; user-select: text; }
/* 접힌 말풍선은 내용 앞의 네 줄만. 누르면(.open) 커져서 전체가 보인다 */
.bub-box .fold { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.bub-box.open { max-width: 100%; }
.bub-box.open .fold { display: block; }
.bub-box[data-fold] { cursor: pointer; transition: transform 140ms var(--ease-out); }
.bub-box[data-fold]:not(.short):not(.open):active { transform: scale(.985); }
.bub-box.short { cursor: default; }
.bub-go { display: block; margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--brand); }
.bub-box.short .bub-go.more, .bub-box.open .bub-go.more { display: none; }
/* 채용 공고·협회 소식 말풍선은 전체가 원문으로 가는 링크 */
a.bub-box { display: block; color: inherit; text-decoration: none; -webkit-user-select: none; user-select: none; transition: transform 140ms var(--ease-out); }
a.bub-box:active { transform: scale(.985); }
a.bub-box .fold { -webkit-line-clamp: 2; color: var(--text-2); }
.bub-row time { font-size: 12.5px; color: var(--mute); white-space: nowrap; margin-left: 4px; }
.bub.hit .bub-box { box-shadow: 0 0 0 2px var(--brand); }
/* 동그란 표시(보낸 곳) */
.av { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--fill); color: var(--text-2); overflow: hidden; }
.av svg { width: 23px; height: 23px; }
.av img { width: 24px; height: auto; display: block; }
.av-academy { color: #12925a; }
.av-media { color: #3d5a80; }

/* ===== 줄 목록(더보기) ===== */
/* 더보기의 줄 목록(사용자가 준 목업대로, 2026-10-06): 묶음 없이 선으로 나뉜 줄. 왼쪽 아이콘(바탕 칸 없음), 이름, 오른쪽 끝에 바깥으로 나가는 화살표.
   .inline(홈페이지) = 이름 옆에 설명이 한 줄로, 그 밖(문의하기) = 이름 아래에 설명. */
.rows { margin-top: -4px; }
.rows a { display: flex; align-items: center; gap: 16px; min-height: 58px; padding: 10px 0; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); transition: background-color 120ms ease; }
.rows a:active { background: var(--fill); }
.rows a::after { content: ""; flex: none; margin-left: auto; margin-right: -1px; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat; }
.ri { flex: none; width: 30px; height: 30px; display: grid; place-items: center; color: var(--ink); }
.ri svg { width: 26px; height: 26px; }
.ri.kk { width: 30px; height: 30px; border-radius: var(--r-in); background: #fee500; color: #191600; }   /* 카카오톡만 노랑 그대로(사용자 결정, 2026-10-02) */
.ri.kk svg { width: 18px; height: 18px; }
.rt { min-width: 0; }
.rt b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.rt small { display: block; font-size: 14px; color: var(--mute); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rows.inline .rt { flex: 1; display: grid; grid-template-columns: 6.6em minmax(0, 1fr); align-items: center; column-gap: 12px; }
.rows.inline .rt small { margin-top: 0; }
/* 함께 쓰는 사이트: 로고 세 개를 한 줄에 */
.sites { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sites a { display: grid; justify-items: center; align-content: center; gap: 9px; min-height: 88px; padding: 14px 10px 12px; border-radius: var(--r); background: var(--tint); box-shadow: inset 0 0 0 1px var(--tint-line); text-decoration: none; transition: transform 140ms var(--ease-out); }
.sites a:active { transform: scale(.96); }
.sites img { display: block; max-width: 100%; max-height: 22px; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; }   /* 로고 그림의 흰 바탕이 옅은 칸 위에서 네모로 보이지 않게 */
.sites small { font-size: 12.5px; color: var(--mute); }

/* ===== 시작 안내 ===== */
/* 시작 안내는 한 칸으로 접혀 있고, 누르면 그 아래로 일곱 단계가 펼쳐진다(사용자가 준 목업대로, 2026-10-06) */
.gbox { border-radius: var(--r); background: var(--tint); box-shadow: inset 0 0 0 1px var(--tint-line); scroll-margin-top: calc(env(safe-area-inset-top, 0px) + var(--top-h) + 8px); }
.gbox > summary { display: flex; align-items: center; gap: 16px; min-height: 72px; padding: 12px 18px; list-style: none; cursor: pointer; }
.gbox > summary::-webkit-details-marker { display: none; }
.gbox > summary::after { content: ""; flex: none; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg) translate(-2px, -2px); transition: transform 180ms var(--ease-out); }
.gbox[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.gb-ico { flex: none; width: 34px; height: 34px; display: grid; place-items: center; color: var(--ink); }
.gb-ico svg { width: 30px; height: 30px; }
.gb-tx b { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.gb-tx small { display: block; margin-top: 2px; font-size: 14px; color: var(--mute); }
.gbox .tips { background: #fff; }
.guide { padding: 0 8px 8px; }
.guide > details > summary { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: var(--r-in); font-size: 16px; font-weight: 700; color: var(--ink); cursor: pointer; list-style: none; transition: background-color 120ms ease; }
.guide > details > summary::-webkit-details-marker { display: none; }
.guide > details > summary:active { background: rgba(30, 58, 138, .06); }
.guide summary i { flex: none; width: 30px; height: 30px; border-radius: var(--r-ctl); display: grid; place-items: center; font-style: normal; font-size: 14.5px; font-weight: 800; color: var(--brand); background: #fff; transition: background-color 160ms ease, color 160ms ease; }
.guide details[open] > summary i { background: var(--brand); color: #fff; }
.guide > details > summary::after { content: ""; flex: none; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--chev); border-bottom: 2px solid var(--chev); transform: rotate(45deg) translate(-2px, -2px); transition: transform 180ms var(--ease-out); }
.guide > details[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.guide > details > :not(summary) { margin-left: 56px; margin-right: 12px; }
/* 검색 결과에서 넘어올 때 위쪽 띠에 가리지 않게 */
.guide > details, details.pw { scroll-margin-top: calc(env(safe-area-inset-top, 0px) + var(--top-h) + 8px); }
/* 펼칠 때 내용이 위에서 살짝 내려오며 나타난다 */
.guide > details[open] > :not(summary) { animation: g-in 260ms var(--ease-out) both; }
@keyframes g-in { from { opacity: 0; transform: translateY(-6px); } }
.guide .figs { display: flex; gap: 8px; margin-top: 4px; margin-bottom: 12px; }
.guide .figs img { flex: 1 1 0; width: 0; min-width: 0; max-height: 120px; object-fit: cover; border-radius: var(--r-in); }
.guide ol, .guide ul { margin-top: 2px; margin-bottom: 12px; padding-left: 18px; color: var(--text-2); font-size: 15px; line-height: 1.55; }
.guide li { margin-bottom: 7px; }
.guide li::marker { color: var(--mute); font-weight: 600; }
.guide li b, .guide p b { color: var(--ink); }
.guide details p { font-size: 15px; margin-top: 2px; margin-bottom: 8px; color: var(--text-2); }
.guide .tips { background: var(--fill); border-radius: var(--r-in); padding: 14px 14px 8px 30px; font-size: 14px; }
.guide .go { display: block; margin-bottom: 12px; padding: 13px 14px; border-radius: var(--r-ctl); background: #fff; box-shadow: inset 0 0 0 1.5px var(--brand); color: var(--brand); font-size: 15px; font-weight: 700; text-decoration: none; text-align: center; transition: transform 140ms var(--ease-out); }
.guide .go:active { transform: scale(.97); }
.guide > details:last-child[open] { padding-bottom: 6px; }

/* ===== 채널 ===== */
.chs { display: grid; gap: 12px; }
.ch { padding: 16px 18px 18px; }
.ch-head { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.ch-head::after { content: "열기"; flex: none; margin-left: auto; font-size: 14px; font-weight: 700; color: var(--brand); background: var(--brand-soft); padding: 6px 13px; border-radius: 999px; }
.ch-head:active::after { background: #d5dcea; }
.ch-ico { flex: none; width: 38px; height: 38px; border-radius: var(--r-in); background: var(--fill); display: grid; place-items: center; }
.ch-ico img { width: 22px; height: 22px; object-fit: contain; display: block; }
.ch-head b { display: block; font-size: 16px; font-weight: 700; }
.ch-head small { display: block; font-size: 14px; color: var(--mute); margin-top: 1px; }
.ch-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.ch-item { display: block; min-width: 0; color: var(--ink); text-decoration: none; transition: transform 140ms var(--ease-out); }
.ch-item:active { transform: scale(.97); }
.ch-item img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-in); background: var(--fill); margin-bottom: 9px; }
.ch-ph { display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; margin-bottom: 9px; border-radius: var(--r-in); background: var(--tint); box-shadow: inset 0 0 0 1px var(--tint-line); }
.ch-ph img { width: 34px; height: 34px; margin: 0; aspect-ratio: auto; border-radius: 0; background: none; object-fit: contain; opacity: .9; }
.ch-item b { font-size: 14.5px; font-weight: 700; line-height: 1.42; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ch-item small { display: block; font-size: 12.5px; color: var(--mute); margin-top: 3px; font-variant-numeric: tabular-nums; }

/* 더보기 > 내 계정: 아이콘이 붙은 줄(알림 설정, 비밀번호 변경). 누르면 그 아래로 펼쳐진다 */
.accts { margin-top: -4px; }
details.pw { border-bottom: 1px solid var(--line); }
details.pw summary { display: flex; align-items: center; gap: 16px; min-height: 58px; padding: 10px 0; list-style: none; font-size: 16px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); cursor: pointer; }
details.pw summary::-webkit-details-marker { display: none; }
details.pw summary::after { content: ""; flex: none; margin-left: auto; margin-right: 3px; width: 8px; height: 8px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg) translate(-2px, -2px); transition: transform 180ms var(--ease-out); }
details.pw[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
details.pw > :not(summary) { margin: 2px 0 18px; }

/* 알림 설정: 켜고 끄는 줄, 지역 고르기 */
.prefs { margin-top: 10px; }
.sw { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; font-size: 16px; font-weight: 500; color: var(--ink); cursor: pointer; }
.sw + .sw { border-top: 1px solid var(--line); }
.sw input { flex: none; -webkit-appearance: none; appearance: none; position: relative; width: 50px; height: 30px; margin: 0; border-radius: 999px; background: #d5dbe2; cursor: pointer; transition: background-color 180ms ease; }
.sw input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform 180ms var(--ease-out); }
.sw input:checked { background: var(--brand); }
.sw input:checked::after { transform: translateX(20px); }
#pf-region-box { border-top: 1px solid var(--line); padding-top: 14px; }
#pf-region-box .note { margin: 0 0 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--fill); color: var(--text-2); font-size: 14px; font-weight: 600; transition: transform 140ms var(--ease-out), background-color 140ms ease, color 140ms ease; }
.chip:active { transform: scale(.95); }
.chip.on { background: var(--brand); color: #fff; }
#pf-groups:empty { display: none; }
#pf-groups { margin-top: 14px; }
#pf-groups .sw { border-top: 1px solid var(--line); }
/* 앱 안에서 쓴 글(소식에 섞여 보인다): 누르면 내용이 펼쳐진다 */
.posts .msg-post { display: block; margin: -16px -12px; padding: 16px 12px; border-radius: var(--r-in); cursor: pointer; transition: background-color 120ms ease; }
.posts .msg-post:active { background: var(--fill); }
.posts .mbody { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-2); white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.posts li.open .mbody { display: block; }
.posts .mlink { display: none; margin-top: 12px; padding: 12px 14px; border-radius: var(--r-ctl); background: #fff; box-shadow: inset 0 0 0 1.5px var(--brand); color: var(--brand); font-size: 15px; font-weight: 700; text-decoration: none; text-align: center; }
.posts li.open .mlink { display: block; }
.posts li.hit .msg-post { background: var(--brand-soft); }
.posts li > .chips { margin-top: 12px; }
/* 소식에서 운영자에게만 보이는 줄: 이 글의 알림을 보낼지 */
/* 소식의 글마다 붙는 운영자용 알림 줄(회원에게는 안 보인다). 2026-10-06에 흰 바닥 분위기에 맞춰 다시 짬:
   옅은 칸 한 줄에 왼쪽 = 보낼 지역과 바꾸기, 오른쪽 = 작은 단추 둘(보내지 않음, 알림 보내기). 좁으면 단추가 아랫줄 오른쪽으로 내려간다. */
.opbar { margin-top: 12px; padding: 8px 8px 8px 12px; border-radius: var(--r); background: var(--tint); box-shadow: inset 0 0 0 1px var(--tint-line); font-size: 13.5px; color: var(--text-2); }
.op-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; min-height: 36px; }
.opbar .rg-now { justify-content: flex-start; gap: 2px; min-width: 0; }
.opbar .rg-now button { padding: 8px 6px; }
.opbar .chips { margin: 10px 0 6px; }
.posts .opbar .acts { display: flex; gap: 6px; margin: 0 0 0 auto; }
.posts .opbar .acts button { flex: none; min-height: 36px; padding: 0 11px; border-radius: var(--r-ctl); font-size: 14px; font-weight: 700; background: #fff; color: var(--text-2); }
.posts .opbar .acts button.go { background: var(--brand); color: #fff; }
/* 보내지 않은 글: 테두리 없는 한 줄(왼쪽 회색 글자, 오른쪽 되돌리는 단추) */
.opbar.quiet { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 2px; border-radius: 0; background: none; box-shadow: none; color: var(--mute); font-weight: 600; }
.opbar.quiet button { flex: none; border: 0; background: none; margin-right: -8px; padding: 8px; font-size: 14px; font-weight: 700; color: var(--brand); }
/* "알림 보냄" 한 줄은 글의 눌림 상자 안에 들어간다(상자가 이 줄을 반쯤 걸치던 것 고침, 2026-10-02).
   글 상자의 아래 여백을 한 줄만큼 늘리고, 이 줄을 그 위로 끌어올려 겹친다. 눌러도 글이 열리도록 누름은 통과시킨다. */
.posts li:has(> .opbar.done) > a.post { padding-bottom: 44px; }
.opbar.done { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: none; box-shadow: none; padding: 0 2px; margin-top: -36px; line-height: 20px; color: var(--ok); font-weight: 600; pointer-events: none; }
/* 같은 글의 알림을 한 번 더 보내는 단추(이것만 누름을 받는다) */
.opbar.done button { flex: none; margin: -10px -8px -10px 0; padding: 10px 8px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 700; color: var(--brand); pointer-events: auto; }
.opbar.done button:disabled { opacity: .5; }
/* 누르는 단추가 있는 칸은 상자 밖에 둔다: 글 상자가 칸 위에서 끝난다 */
.posts li:has(> .opbar:not(.done)) > a.post { margin-bottom: 0; padding-bottom: 12px; }
.posts li > .opbar:not(.done) { margin-top: 6px; }
.opbar .rg { margin: 0 0 2px; padding: 0; background: none; }
#news-msg { margin: 0; }
/* 운영: 채용 공고를 보낼 지역 */
.rg { margin-top: 12px; padding: 12px 14px; border-radius: var(--r-in); background: var(--tint); box-shadow: inset 0 0 0 1px var(--tint-line); font-size: 14px; color: var(--text-2); }
.rg-now { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rg-now b { color: var(--ink); }
.rg-now button { flex: none; border: 0; background: none; padding: 6px 2px; font-size: 14px; font-weight: 700; color: var(--brand); }
.rg .chips { margin-top: 10px; }
.rg .chip { background: #fff; }

/* ===== 더보기 맨 아래: 내 계정 ===== */
.acct { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 2px; padding: 0; font-size: 14px; color: var(--mute); }
.acct button { flex: none; border: 0; background: none; margin-right: -8px; padding: 12px 8px; font: inherit; font-weight: 700; color: var(--ink); }
.acct button:active { opacity: .6; }


/* ===== 접는 칸, 기기 상태 ===== */
details.card summary { font-size: 16px; color: var(--ink); font-weight: 700; cursor: pointer; }
details.card.mute summary { font-size: 13.5px; color: var(--mute); font-weight: 600; }
details.card > .posts { margin-top: 6px; }
/* 접어 두는 칸(운영 화면): 오른쪽에 펼침 표시 */
details.fold > summary { position: relative; list-style: none; padding-right: 24px; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--chev); border-bottom: 2px solid var(--chev); transform: rotate(45deg); transition: transform 180ms var(--ease-out); }
details.fold[open] > summary::after { transform: rotate(-135deg); margin-top: -1px; }
details.fold > .note { margin: 10px 0 14px; }
details.card > .form, details.card > dl { margin-top: 16px; }
details.card > .note { margin: 12px 0 0; }
dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13px; color: var(--mute); }
dt { font-weight: 600; }
dd { margin: 0; word-break: break-all; }

/* 마우스가 있는 기기에서만 올렸을 때 표시(손가락으로 누르면 올린 상태가 남는 것을 막는다) */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--brand-alt); }
  .btn.ghost:hover { background: var(--brand-soft); }
  .rows a:hover, .posts a.post:hover, .guide > details > summary:hover { background: var(--fill); }
  .nav-tabs button:hover { color: var(--ink); }
  .nav-tabs button.on:hover { color: var(--brand); }
}
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0ms !important; }
  .inbox-panel { transition: none; }
  .mc-inner { transition: none; }
  .handy-say, .handy-say.out { animation: none; }
  .handy.drop { transition: none; }
  .handy.pop #handy-btn { animation: none; }
  .guide > details[open] > :not(summary) { animation: none; }
}

/* ===== 운영 화면: 알림 발송 / 계정 관리 =====
   다른 화면과 같은 모양(2026-10-06 밤): 흰 바닥, 묶음 없이 구역 제목과 줄, 따로 묶을 것만 옅은 칸.
   PC 에서 쓰는 화면이라 넓은 화면(900px 이상)을 기준으로 짠다: 작성 | 미리 보기, 보낸 알림 | 보낸 기록, 계정 칸 둘을 나란히 두고 입력란과 버튼은 PC 크기로 줄인다.
   폰에서는 한 줄로 쌓인다. 저장된 템플릿은 오른쪽에서 열리는 서랍이다(알림함의 서랍 틀을 같이 쓴다). */
#v-admin .card { padding: 0; border-radius: 0; background: none; }
#ad-send, #ad-acct { gap: 30px; padding-top: 8px; }
#v-admin .card > h2, #v-admin .cmp-head h2, #v-admin details.card > summary { margin: 0 0 10px; font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
#v-admin details.card > summary { margin-bottom: 0; }
#v-admin .posts { margin: 0; }
#v-admin .posts li { padding: 14px 0; }
#v-admin .posts li:first-child { padding-top: 6px; }
#v-admin .posts .acts { justify-content: flex-start; margin-top: 10px; }
#v-admin .posts .acts button { flex: none; min-height: 36px; padding: 0 14px; font-size: 14px; }
#ad-stats { font-size: 15px; }
.cmp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.cmp-head h2 { margin: 0; }
.cmp-head .btn { flex: none; }
.inbox-panel.tpl-panel { background: var(--bg); }
.tpl-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 14px 16px calc(env(safe-area-inset-bottom, 0px) + 20px); }
#tpl-count { font-size: 13.5px; color: var(--mute); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.drawer-head b { font-size: 15px; color: var(--ink); }
.drawer-head button { border: 0; background: none; padding: 6px 2px; font-size: 14px; font-weight: 700; color: var(--brand); }
#tpl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
#tpl-list li { display: flex; align-items: stretch; border-radius: var(--r-in); background: var(--card); }
#tpl-list li.on { background: var(--brand-soft); }
#tpl-list .tpl { flex: 1; min-width: 0; border: 0; background: none; padding: 13px 6px 13px 14px; text-align: left; }
#tpl-list .tpl b { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tpl-list .tpl small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--mute); }
#tpl-list .tpl-del { flex: none; width: 40px; border: 0; background: none; font-size: 18px; color: var(--mute); }
#tpl-list .tpl-del:active { color: var(--err); }
.cmp { display: grid; gap: 24px; }
.vars { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: -6px; font-size: 13px; color: var(--mute); }
.vars span { font-weight: 600; margin-right: 2px; }
.vars button { border: 0; border-radius: var(--r-ctl); background: var(--brand-soft); color: var(--brand); padding: 6px 10px; font-size: 13.5px; font-weight: 700; }
.vars small { flex-basis: 100%; }
.tplsave { display: flex; gap: 8px; }
.tplsave input { flex: 1; min-width: 0; }
.tplsave .btn { flex: none; min-height: 0; }
.to { display: grid; gap: 12px; padding: 16px; border-radius: var(--r); background: var(--tint); box-shadow: inset 0 0 0 1px var(--tint-line); }
.to > b { font-size: 14px; color: var(--text-2); }
#to-list { display: grid; gap: 8px; margin-left: 34px; }
#to-list .row { display: flex; flex-wrap: wrap; gap: 8px; }
#to-list .btn.ghost { background: #fff; }
#to-list .note { margin: 0; white-space: pre-line; }
#to-list .link-btn { justify-self: start; padding: 4px 0; color: var(--brand); }
.pv > b { display: block; font-size: 14px; color: var(--text-2); margin-bottom: 8px; }
.pv-card { padding: 16px; border-radius: var(--r); background: var(--tint); box-shadow: inset 0 0 0 1px var(--tint-line); }
.pv-card .tag { font-size: 13px; font-weight: 700; color: var(--brand); }
.pv-card .title { display: block; margin: 5px 0 6px; font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
.pv-card .mbody { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-2); white-space: pre-line; overflow-wrap: anywhere; }
.pv small { display: block; margin-top: 8px; font-size: 12.5px; color: var(--mute); }
#v-admin section.card > .form { margin-top: 14px; }
@media (min-width: 900px) {
  body.admin-wide main { max-width: 1180px; padding-left: 28px; padding-right: 28px; }
  body.admin-wide .top { padding-left: 28px; padding-right: 28px; max-width: 1180px; margin: 0 auto; }
  /* 고르는 막대는 화면 폭을 다 쓰지 않고 왼쪽부터 놓는다 */
  #ad-tabs { margin: 2px -28px 0; padding: 0 28px; }
  #ad-tabs .tab { flex: none; padding: 8px 22px; }
  /* 알림 발송: 현황과 작성은 폭 전체, 그 아래 보낸 알림과 보낸 기록을 나란히 */
  #ad-send { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; }
  #ad-send > section:nth-of-type(1), #ad-send > section:nth-of-type(2) { grid-column: 1 / -1; }
  #ad-send:has(> #ad-sends-box[hidden]) > section:nth-of-type(3) { grid-column: 1 / -1; }
  .cmp { grid-template-columns: minmax(0, 1fr) 340px; column-gap: 48px; align-items: start; }
  .pv { position: sticky; top: calc(var(--top-h) + 16px); }
  /* 계정 관리: 운영자 계정과 체험 계정을 나란히, 입력란은 두 줄로 */
  #ad-acct { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; align-items: start; }
  #ad-acct .form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; }
  #ad-acct .form > :not(label) { grid-column: 1 / -1; }
  /* PC 크기의 입력란과 버튼 */
  #v-admin .form { gap: 14px; }
  #v-admin .form input:not([type=checkbox]):not([type=radio]), #v-admin .form select, #v-admin .form textarea { font-size: 15px; padding: 11px 12px; }
  #v-admin .form textarea { min-height: 220px; }
  #v-admin .form .btn:not(.small), #v-admin .card > .btn { width: auto; min-height: 44px; padding: 0 26px; justify-self: start; font-size: 15px; }
  #v-admin .btn.small { min-height: 36px; }
  #v-admin .tplsave { max-width: 460px; }
}
@media (hover: hover) and (pointer: fine) {
  #tpl-list .tpl:hover b { color: var(--brand); }
}

/* ===== 운영 화면 2026-10-06 추가: 채용 공고·협회 소식, 회원 관리, PC 배치 =====
   표 모양의 줄(.olist): PC 에서는 한 줄에 칸을 나란히 놓고 맨 위에 칸 이름(.ohead)을 둔다. 폰에서는 칸 이름 없이 줄마다 쌓인다. */
#ad-posts, #ad-mem { gap: 30px; padding-top: 8px; }
#ad-tabs .tab-n { display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 5px; border-radius: 999px; background: var(--err); color: #fff; font-size: 12px; font-style: normal; font-weight: 700; line-height: 18px; text-align: center; vertical-align: 2px; }
#ad-stats { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; color: var(--text-2); }
#ad-stats .stat { display: flex; align-items: baseline; gap: 6px; font-size: 14px; }
#ad-stats .stat small { font-size: 14px; color: var(--mute); }
#ad-stats .stat b { font-size: 22px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.otool { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.otool select, #mem-q { min-height: 36px; padding: 0 12px; border: 0; border-radius: var(--r-ctl); background: #fff; box-shadow: inset 0 0 0 1px #cfd3da; font: inherit; font-size: 14px; color: var(--ink); }
#mem-q { flex: 0 1 260px; min-width: 0; }
.otool select:focus, #mem-q:focus { outline: none; box-shadow: inset 0 0 0 2px var(--brand); }
.ohead { display: none; }
.olist { list-style: none; margin: 0; padding: 0; }
.olist > li { display: grid; gap: 8px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--text-2); }
.olist > li:first-child { border-top: 0; }
.olist > li.more { color: var(--mute); }
.olist b { font-weight: 700; color: var(--ink); }
.olist b i { margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: 12px; font-style: normal; font-weight: 700; }
.olist small { display: block; font-size: 12.5px; color: var(--mute); }
.olist .wrap { overflow-wrap: anywhere; }
.o-main { min-width: 0; }
.o-main .o-meta { display: block; font-size: 13px; color: var(--mute); }
.o-main .o-meta em { font-style: normal; font-weight: 700; }
.o-main a { display: block; margin: 3px 0 2px; font-size: 16px; font-weight: 700; line-height: 1.4; letter-spacing: -.02em; color: var(--ink); text-decoration: none; }
.o-reg { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.o-reg b { font-weight: 600; color: var(--text-2); }
.o-reg b:empty { display: none; }
.o-reg button { border: 0; background: none; padding: 6px 0; font-size: 14px; font-weight: 700; color: var(--brand); }
.o-state .ok { font-weight: 700; color: var(--ok); }
.o-state .off { font-weight: 600; color: var(--mute); }
.o-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.o-acts button { min-height: 36px; padding: 0 12px; border: 0; border-radius: var(--r-ctl); background: var(--fill); color: var(--text-2); font-size: 14px; font-weight: 700; white-space: nowrap; }
.o-acts button.go { background: var(--brand); color: #fff; }
.o-acts button:disabled { opacity: .5; }
.olist .chips { padding: 4px 0 2px; }
@media (min-width: 900px) {
  body.admin-wide main, body.admin-wide .top { max-width: 1320px; }
  /* 위쪽 고르는 막대는 스크롤해도 붙어 있다 */
  #ad-tabs { position: sticky; top: var(--top-h); z-index: 5; background: #fff; }
  .ohead { display: grid; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--mute); }
  .olist > li, .ohead { column-gap: 24px; align-items: center; }
  .orow { grid-template-columns: minmax(0, 1fr) 210px 150px 210px; }
  .rrow { grid-template-columns: 110px 130px 130px 140px minmax(0, 1fr) 140px; }
  .mrow { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 190px 100px 80px 210px; }
  .olist > li { padding: 10px 0; }
  .olist .chips { grid-column: 1 / -1; }
  .o-acts { justify-content: flex-end; }
  .o-main a { font-size: 15px; }
  .olist > li:hover { background: #fafbfc; }
  /* 알림 발송: 보낸 알림은 폭 전체 */
  #ad-send > section:nth-of-type(3) { grid-column: 1 / -1; }
  .cmp { grid-template-columns: minmax(0, 1fr) 400px; }
}
@media (hover: hover) and (pointer: fine) {
  .o-acts button:hover { filter: brightness(.96); }
  .o-main a:hover { color: var(--brand); }
}
/* 표 모양의 줄에서는 지역 고르기(.rg)의 옅은 칸 모양을 쓰지 않는다 */
.olist > li.rg { margin-top: 0; border-radius: 0; background: none; box-shadow: none; }
.olist .rg .chip { background: var(--fill); }
.olist .rg .chip.on { background: var(--brand); }
.olist .rg .chips { margin-top: 0; }
.olist .rg-now { justify-content: flex-start; }
/* 종이 숨겨져 있을 때(회원이 아닌 운영자)는 로그아웃을 오른쪽 끝으로 */
.top .bell[hidden] + .link-btn { margin-left: auto; }
/* 폰에서 운영 화면의 고르는 막대: 네 칸이 글자 폭대로 놓이고 넘치면 옆으로 민다 */
@media (max-width: 899px) {
  #ad-tabs .tab { flex: 1 0 auto; padding: 8px 12px; }
}
/* 페이지 넘기기(회원 목록, 보낸 기록) */
.pager-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.pager-row select { min-height: 36px; padding: 0 12px; border: 0; border-radius: var(--r-ctl); background: #fff; box-shadow: inset 0 0 0 1px #cfd3da; font: inherit; font-size: 14px; color: var(--ink); }
.pager { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pager:empty { display: none; }
#sends-pager { justify-content: flex-end; margin-top: 12px; }
.pager button { min-height: 36px; padding: 0 14px; border: 0; border-radius: var(--r-ctl); background: var(--fill); color: var(--text-2); font-size: 14px; font-weight: 700; }
.pager button:disabled { opacity: .4; }
/* 위쪽 띠: 운영 전용 계정이 어디 계정인지(로그아웃 앞) */
.top-who { margin-left: auto; font-size: 14px; font-weight: 600; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.top .top-who + .link-btn { margin-left: 0; flex: none; }
/* 홈의 알림 켜기 칸(알림을 안 켠 기기에서만). 회원 카드 바로 아래, 옅은 네이비 칸에 큰 버튼 */
.pushbox { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; min-height: 72px; margin: 0 0 12px; padding: 12px 14px 12px 18px; border-radius: var(--r); background: var(--tint); box-shadow: inset 0 0 0 1px var(--tint-line); }
.pushbox-ico { display: grid; place-items: center; width: 34px; height: 34px; color: var(--ink); }
.pushbox-ico svg { width: 30px; height: 30px; }
.pushbox-tx b { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.pushbox-tx small { display: block; margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.pushbox .btn { width: auto; min-height: 40px; padding: 8px 16px; font-size: 14.5px; }
.pushbox .msg { grid-column: 1 / -1; }
.pushbox .msg:empty { display: none; }
.pushbox .msg { margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  /* 종이 흔들리던 움직임은 뺐다(2026-10-07: 더보기로 옮기며 다른 칸과 같은 모양으로. 사용자: "디자인이 혼자 튀어") */
  @keyframes bell-ring { 0%, 30%, 100% { transform: rotate(0); } 5% { transform: rotate(14deg); } 10% { transform: rotate(-12deg); } 15% { transform: rotate(9deg); } 20% { transform: rotate(-6deg); } 25% { transform: rotate(3deg); } }
}
/* 핸디 말풍선: 두 줄(인사 + 새 알림)을 쓸 수 있고, 새 알림을 알리는 말풍선은 누르면 알림함이 열린다 */
.handy-say { white-space: pre; }
.handy-say.link { pointer-events: auto; cursor: pointer; }

/* ===== 겹쳐 뜨는 화면(2026-10-07) =====
   .page  : 화면 전체를 덮는 화면(내 정보). 오른쪽에서 들어온다.
   .sheet : 아래에서 올라오는 판(글 화면, 정보 정정 요청). 보던 화면이 위에 조금 남는다. */
.page { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; background: #fff; transform: translateX(100%); transition: transform 300ms var(--ease-out); }
.page.open { transform: none; }
.page-top { flex: none; display: flex; align-items: center; height: calc(env(safe-area-inset-top, 0px) + 48px); padding: env(safe-area-inset-top, 0px) 6px 0; border-bottom: 1px solid var(--line); }
.page-top button { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: var(--ink); }
.page-top button svg { width: 24px; height: 24px; }
.page-top b { flex: 1; margin-right: 44px; text-align: center; font-size: 16px; font-weight: 700; color: var(--ink); }
.page-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 20px calc(28px + env(safe-area-inset-bottom, 0px)); }
.page-body > .sec-title { margin-top: 26px; }
.page-body > .sec-title:first-child { margin-top: 12px; }
/* 넓은 화면(PC): 내용은 가운데 720px 폭으로 두되, 스크롤하는 칸은 화면 폭 전체다. 폭을 720px 로 좁힌 칸에 스크롤을 걸었더니
   내용이 길어질 때(알림 설정을 펼칠 때) 스크롤 막대가 화면 한가운데에 생기고 그만큼 내용 폭이 줄었다(2026-10-07 사용자 지적).
   아래 맨 끝의 좌우 여백 규칙과 짝이다 */
/* 더보기 맨 위: 내 정보로 가는 줄 */
.me-row { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; padding: 16px; border-radius: var(--r); background: var(--tint); box-shadow: inset 0 0 0 1px var(--tint-line); text-decoration: none; }
.me-row:active { background: var(--tint-deep); }
.me-row b { display: block; font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.me-row small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--mute); }
.me-row svg { flex: none; margin-left: auto; width: 20px; height: 20px; color: var(--chev); }
/* 이름표와 값이 한 줄에 놓이는 목록 */
.kv > div { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.kv span { font-size: 15px; color: var(--mute); }
.kv b { margin-left: auto; font-size: 16px; font-weight: 600; color: var(--ink); text-align: right; overflow-wrap: anywhere; }
.kv-go { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 58px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--line); background: none; font-size: 16px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); text-align: left; }
.kv-go small { margin-left: auto; font-size: 14px; font-weight: 500; color: var(--mute); }
.kv-go svg { flex: none; width: 20px; height: 20px; color: var(--chev); }
.kv-go:active { opacity: .6; }
.page-body .acct { justify-content: flex-end; margin-top: 18px; }
/* 아래에서 올라오는 판 */
.sheet-wrap { position: fixed; inset: 0; z-index: 50; }
.sheet-dim { position: absolute; inset: 0; background: rgba(20, 28, 40, .42); opacity: 0; transition: opacity 240ms ease; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; top: calc(env(safe-area-inset-top, 0px) + 54px); display: flex; flex-direction: column; border-radius: 18px 18px 0 0; background: #fff; box-shadow: 0 -8px 30px rgba(15, 23, 42, .18); transform: translateY(100%); transition: transform 320ms var(--ease-out); overflow: hidden; }
.sheet.short { top: auto; max-height: calc(100% - env(safe-area-inset-top, 0px) - 54px); }
.sheet-wrap.open .sheet-dim { opacity: 1; }
.sheet-wrap.open .sheet { transform: none; }
.sheet-head { flex: none; position: relative; display: flex; align-items: center; justify-content: space-between; height: 54px; padding: 6px 6px 0 20px; }
.sheet-head::before { content: ""; position: absolute; left: 50%; top: 7px; width: 38px; height: 4px; margin-left: -19px; border-radius: 4px; background: #d5dae3; }
.sheet-head b { font-size: 16px; font-weight: 700; color: var(--ink); }
.sheet-head button { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: var(--ink); }
.sheet-head button svg { width: 24px; height: 24px; }
.sheet-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 10px 20px 26px; }
.sheet-form { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sheet-foot { flex: none; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: #fff; }
.sheet-foot .btn { min-height: 48px; text-align: center; text-decoration: none; }
/* 글 화면 */
.pv-kind { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 24px; font-size: 13px; color: var(--mute); }
.pv-kind i { padding: 3px 9px; border-radius: 999px; background: var(--tint); box-shadow: inset 0 0 0 1px var(--tint-line); font-size: 12.5px; font-style: normal; font-weight: 600; color: var(--brand); }
.pv-kind time { margin-left: auto; }
#post-body h1 { margin: 12px 0 0; font-size: 22px; line-height: 1.38; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.pv-wait { margin: 28px 0; font-size: 15px; color: var(--mute); }
/* 채용 개요: 본문 맨 앞의 "채용 개요" 목록을 옅은 칸으로 옮겨 보여 준다(본문에서는 뺀다. 같은 내용이 두 번 나오지 않게) */
.pv-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px 16px; margin: 18px 0 0; padding: 15px 16px; border-radius: var(--r); background: var(--tint); box-shadow: inset 0 0 0 1px var(--tint-line); font-size: 14.5px; line-height: 1.5; }
.pv-facts dt { color: var(--mute); white-space: nowrap; }
.pv-facts dd { margin: 0; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.pv-text { margin-top: 22px; font-size: 16px; line-height: 1.75; color: #232a36; overflow-wrap: anywhere; }
.pv-text > :first-child { margin-top: 0; }
.pv-text p { margin: 0 0 14px; }
.pv-text h2, .pv-text h3, .pv-text h4 { margin: 22px 0 8px; font-size: 18px; line-height: 1.4; font-weight: 700; color: var(--ink); }
.pv-text strong, .pv-text b { font-weight: 700; color: var(--ink); }
.pv-text ul, .pv-text ol { margin: 0 0 14px; padding-left: 20px; }
.pv-text li { margin: 4px 0; }
.pv-text a { color: var(--brand); font-weight: 600; }
.pv-text .pv-img { display: block; margin: 6px 0 14px; }
.pv-text img { display: block; max-width: 100%; height: auto; border-radius: var(--r-in); }
.pv-text table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.pv-text th, .pv-text td { padding: 7px 10px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.pv-text blockquote { margin: 0 0 14px; padding: 2px 0 2px 14px; border-left: 3px solid var(--tint-line); color: var(--text-2); }
.pv-text hr { margin: 18px 0; border: 0; border-top: 1px solid var(--line); }
.pv-files { margin-top: 18px; }
.pv-files h2 { margin: 0 0 2px; font-size: 18px; font-weight: 700; color: var(--ink); }
.pv-files a { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 0; border-bottom: 1px solid var(--line); font-weight: 600; color: var(--ink); text-decoration: none; }
.pv-files a span { overflow-wrap: anywhere; }
.pv-files svg { flex: none; width: 22px; height: 22px; }
.pv-files small { flex: none; margin-left: auto; font-size: 13px; font-weight: 500; color: var(--mute); }
/* 정보 정정 요청 */
.fx-q { display: block; margin: 8px 0 10px; font-size: 16px; font-weight: 700; color: var(--ink); }
#fix-chips { margin-bottom: 20px; }
#fix-note { display: block; width: 100%; padding: 12px 14px; border: 1px solid #cfd5df; border-radius: var(--r-ctl); background: #fff; font: inherit; font-size: 16px; line-height: 1.6; color: var(--ink); resize: none; }
#fix-note:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
/* 알림함: 여기부터 새 알림(가는 선 가운데 글자. 사용자가 두 가지 중에 고름) */
.bub-new { align-self: stretch; display: flex; align-items: center; gap: 10px; margin: 4px 0; font-size: 12.5px; font-weight: 700; color: var(--brand); scroll-margin-top: calc(var(--inbox-top, 106px) + 8px); }
.bub-new::before, .bub-new::after { content: ""; flex: 1; height: 1px; background: rgba(30, 58, 138, .28); }
@media (min-width: 900px) { .frow { grid-template-columns: 110px 130px 150px minmax(0, 1fr) 140px 90px; } }
@media (prefers-reduced-motion: reduce) { .page, .sheet, .sheet-dim { transition: none; } }
/* 빈 화면과 기다리는 화면의 핸디(2026-10-07, 사용자 결정: 화면마다 다른 자세). 회원이 보는 화면에만 쓴다.
   기본 = 어깨를 으쓱(아무것도 없을 때), .find = 돋보기(검색), .wait = 편지를 들고 걸어옴(불러오는 중), .sorry = 두 손 모음(못 불러왔을 때). 인터넷이 끊겼을 때는 앉아 조는 모습(offline.html).
   그림은 scripts/make_mascot_poses.py 로 만든다 */
.hd::before { content: ""; display: block; width: 96px; height: 96px; margin: 8px auto 10px; background: url("/img/mascot/handy-shrug.webp") center / contain no-repeat; }
.hd.find::before { background-image: url("/img/mascot/handy-search.webp"); }
.hd.wait::before { background-image: url("/img/mascot/handy-letter.webp"); }
.hd.sorry::before { background-image: url("/img/mascot/handy-sorry.webp"); }
.hd { text-align: center; }

/* 첫 안내(처음 가입한 회원에게 핸디가 한 번). 아래에서 올라오는 칸 위로 핸디가 반쯤 올라와 손을 흔든다 */
.tour { position: fixed; inset: 0; z-index: 70; display: grid; align-items: end; }
.tour-dim { position: absolute; inset: 0; background: rgba(20, 28, 40, .45); opacity: 0; transition: opacity 240ms ease; }
.tour-card { position: relative; width: 100%; max-width: 520px; margin: 0 auto; padding: 8px 24px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 22px 22px 0 0; background: #fff; text-align: center; transform: translateY(110%); transition: transform 340ms var(--ease-out); }
.tour.open .tour-dim { opacity: 1; }
.tour.open .tour-card { transform: none; }
.tour-card img { display: block; width: 150px; height: 164px; margin: -70px auto 0; object-fit: contain; }
.tour-card h2 { margin: 6px 0 8px; font-size: 21px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.tour-card p { min-height: 3.2em; margin: 0 0 18px; font-size: 16px; line-height: 1.6; color: var(--text-2); }
.tour-dots { display: flex; justify-content: center; gap: 6px; margin-bottom: 18px; }
.tour-dots i { width: 6px; height: 6px; border-radius: 50%; background: #d5dae3; }
.tour-dots i.on { width: 18px; border-radius: 6px; background: var(--brand); }
.tour-skip { display: block; width: 100%; margin-top: 4px; padding: 12px; border: 0; background: none; font-size: 14.5px; font-weight: 600; color: var(--mute); }
@media (prefers-reduced-motion: reduce) { .tour-dim, .tour-card { transition: none; } }
/* 겹쳐 뜨는 화면의 내용 폭(위 설명 참고). 스크롤 막대 자리는 늘 비워 두어 내용이 길어져도 폭이 변하지 않는다 */
.page-body, .sheet-body { scrollbar-gutter: stable both-edges; padding-left: max(20px, calc(50% - 360px)); padding-right: max(20px, calc(50% - 360px)); }
.sheet-foot { padding-left: max(16px, calc(50% - 364px)); padding-right: max(16px, calc(50% - 364px)); }

/* ===== 일정(2026-10-07) =====
   홈: 오늘부터 일주일의 날짜 줄(.cal-week)과 고른 날의 일정(.cal-list). 모두 보기(#cal): 달력(.cal-grid)과 고르는 단추.
   점: 채용 접수 = 네이비, 교육·행사 = 하늘, 시험 = 테두리만. 색을 더 늘리지 않는다 */
.cal { margin: 6px 0 4px; }
.cal .sec-head, #cal .cal-nav { display: flex; align-items: center; justify-content: space-between; }
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 8px; }
.cal-week button { display: grid; justify-items: center; gap: 4px; padding: 8px 0 7px; border: 0; border-radius: var(--r-in); background: none; font-size: 12.5px; color: var(--mute); }
.cal-week button b { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.cal-week button.sel { background: var(--brand); color: rgba(255, 255, 255, .82); }
.cal-week button.sel b { color: #fff; }
.cal-week em, .cal-grid em { display: flex; gap: 3px; height: 5px; }
.cal-week u, .cal-grid u, .cal-key u { width: 5px; height: 5px; border-radius: 50%; }
u.k-job { background: var(--brand); }
u.k-edu { background: #1e9ad6; }
u.k-exam { background: #fff; box-shadow: inset 0 0 0 1.5px var(--brand); }
.cal-week button.sel u.k-job { background: #fff; }
.cal-week button.sel u.k-edu { background: #9bd4f2; }
.cal-week button.sel u.k-exam { background: none; box-shadow: inset 0 0 0 1.5px #fff; }
.cal-list { margin: 0; padding: 0; list-style: none; }
.cal-list li { display: flex; align-items: center; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.cal-main { flex: 1; min-width: 0; }
.cal-it { display: block; text-decoration: none; }
.cal-it small { display: block; font-size: 12.5px; font-weight: 700; }
.cal-it small.k-job { color: var(--brand); }
.cal-it small.k-edu { color: #1481bf; }
.cal-it small.k-exam { color: var(--ink); }
.cal-it b { display: block; margin: 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.cal-it p { margin: 0; font-size: 13.5px; color: var(--mute); }
.cal-list .dd { flex: none; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--brand); }
.cal-list .dd.soon { color: var(--err); }
.cal-star { flex: none; width: 40px; height: 40px; margin-right: -8px; display: grid; place-items: center; border: 0; background: none; color: #b9c0cb; }
.cal-star svg { width: 22px; height: 22px; }
.cal-star.on { color: #f5b301; }
.cal-star.on svg { fill: #f5b301; }
.cal-ics { display: inline-block; margin-top: 2px; padding: 6px 0 2px; font-size: 13px; font-weight: 700; color: var(--brand); text-decoration: none; }
.cal-rest { display: block; width: 100%; padding: 12px 0 4px; border: 0; background: none; font-size: 14px; font-weight: 700; color: var(--mute); text-align: center; }
/* 모두 보기 */
#cal-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 12px 0 4px; }
#cal-chips::-webkit-scrollbar { display: none; }
#cal-chips { gap: 6px; }
#cal-chips .chip { flex: none; padding-left: 11px; padding-right: 11px; }
#cal .cal-nav { margin-top: 10px; }
#cal .cal-nav b { font-size: 17px; font-weight: 700; color: var(--ink); }
#cal .cal-nav button { width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: none; color: var(--ink); }
#cal .cal-nav svg { width: 20px; height: 20px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); margin-top: 4px; text-align: center; }
.cal-grid > b { padding: 4px 0 6px; font-size: 12.5px; font-weight: 500; color: var(--mute); }
.cal-grid button { display: grid; justify-items: center; align-content: start; gap: 3px; height: 48px; padding: 4px 0 0; border: 0; background: none; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--ink); }
.cal-grid button i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-style: normal; }
.cal-grid button.today i { box-shadow: inset 0 0 0 1.5px var(--brand); font-weight: 700; color: var(--brand); }
.cal-grid button.sel i { background: var(--brand); box-shadow: none; font-weight: 700; color: #fff; }
.cal-key { display: flex; justify-content: flex-end; gap: 14px; margin: 2px 2px 0; font-size: 12.5px; color: var(--mute); }
.cal-key span { display: inline-flex; align-items: center; gap: 5px; }
.cal-sub { margin: 18px 0 0; font-size: 15px; font-weight: 700; color: var(--ink); }
/* 글 화면 아래: 캘린더에 추가와 홈페이지에서 보기를 나란히 */
.sheet-foot.two { display: flex; gap: 8px; }
.sheet-foot.two .btn { flex: 1; }