/* 장선생수학 소식 — 인증(3) + 목록 렌더(5) 스타일
   docs/jm-feed-preview.html 의 jm- 토큰·카드·그리드를 이식. */

:root{
  --jm-primary:#45a2cb;
  --jm-primary-weak:#eaf5fa;
  --jm-primary-deep:#2f7fa3;
  --jm-text:#1a1c1e;
  --jm-sub:#8b95a1;
  --jm-line:#eceef1;
  --jm-bg:#f4f6f8;
  --jm-card:#ffffff;
  --jm-radius:16px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:'Pretendard Variable',Pretendard,-apple-system,sans-serif;
  background:var(--jm-bg);color:var(--jm-text);
  font-size:15px;line-height:1.5;letter-spacing:-0.02em;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;border:0;background:none;cursor:pointer;color:inherit;letter-spacing:-0.02em;}
input{font-family:inherit;letter-spacing:-0.02em;}
:focus-visible{outline:2px solid var(--jm-primary);outline-offset:2px;border-radius:6px;}
[hidden]{display:none !important;}

.jm-app{max-width:520px;margin:0 auto;min-height:100vh;background:var(--jm-bg);position:relative;padding-bottom:40px;}

@keyframes jmspin{to{transform:rotate(360deg);}}
.jm-spin{width:22px;height:22px;border:2.5px solid var(--jm-line);border-top-color:var(--jm-primary);border-radius:50%;animation:jmspin .7s linear infinite;}

/* ---------- 헤더 + 탭 ---------- */
.jm-header{
  position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--jm-line);
}
.jm-header__bar{display:flex;align-items:center;gap:10px;padding:14px 18px 10px;}
.jm-header__logo{width:32px;height:32px;border-radius:10px;background:var(--jm-primary);display:grid;place-items:center;color:#fff;font-weight:800;font-size:14px;flex:0 0 auto;}
.jm-header__title{font-size:18px;font-weight:700;flex:1;}
.jm-header__title span{display:block;font-size:12px;font-weight:500;color:var(--jm-sub);margin-top:1px;}
.jm-logout{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#6b7684;flex:0 0 auto;transition:background .15s;}
.jm-logout:hover{background:#f2f4f6;}
.jm-tabs{display:flex;gap:6px;padding:2px 14px 10px;overflow-x:auto;scrollbar-width:none;}
.jm-tabs::-webkit-scrollbar{display:none;}
.jm-tab{flex:0 0 auto;padding:7px 14px;border-radius:999px;font-size:13.5px;font-weight:600;color:#6b7684;background:#f2f4f6;transition:.15s;}
.jm-tab.is-on{background:var(--jm-primary);color:#fff;}

/* ---------- 초기 로딩 화면 ---------- */
.jm-loading{min-height:100vh;display:grid;place-items:center;}
.jm-loading .jm-spin{width:30px;height:30px;}

/* ---------- 비로그인 게이트 ---------- */
.jm-gate{padding:76px 32px;text-align:center;}
.jm-gate__logo{width:60px;height:60px;border-radius:18px;background:var(--jm-primary);color:#fff;display:grid;place-items:center;font-size:26px;font-weight:800;margin:0 auto 20px;}
.jm-gate h2{margin:0 0 10px;font-size:19px;}
.jm-gate p{margin:0 0 24px;font-size:14px;color:var(--jm-sub);line-height:1.6;}
.jm-gate__btn{width:100%;max-width:260px;padding:14px;border-radius:12px;background:var(--jm-primary);color:#fff;font-size:15.5px;font-weight:700;}
.jm-gate small{display:block;margin-top:18px;font-size:12.5px;color:#b0b8c1;}

/* ---------- 로그인 ---------- */
.jm-login{padding:56px 24px;}
.jm-login__box{max-width:340px;margin:0 auto;text-align:center;}
.jm-login h2{margin:0 0 8px;font-size:20px;}
.jm-login__sub{margin:0 0 22px;font-size:13.5px;color:var(--jm-sub);}
.jm-btn{width:100%;padding:14px;border-radius:12px;font-size:15px;font-weight:700;margin-bottom:10px;}
.jm-btn--primary{background:var(--jm-primary);color:#fff;}
.jm-btn--primary:disabled{opacity:.6;}
.jm-btn--google{background:#fff;color:var(--jm-text);border:1.5px solid var(--jm-line);}
.jm-login__or{display:flex;align-items:center;gap:10px;margin:14px 0;color:#b0b8c1;font-size:12px;}
.jm-login__or::before,.jm-login__or::after{content:'';flex:1;height:1px;background:var(--jm-line);}
.jm-input{width:100%;padding:13px 14px;border:1.5px solid var(--jm-line);border-radius:12px;font-size:15px;background:#fff;margin-bottom:10px;}
.jm-input:focus{outline:none;border-color:var(--jm-primary);}
.jm-login__msg{min-height:18px;font-size:13px;font-weight:600;color:var(--jm-sub);margin:6px 0 4px;}
.jm-login__msg.is-err{color:#f5535b;}
.jm-login__aux{display:flex;justify-content:space-between;margin-top:6px;}
.jm-login__aux button{font-size:12.5px;color:var(--jm-sub);font-weight:600;}

/* ---------- 게시글 카드 ---------- */
.jm-post{
  background:var(--jm-card);margin:0 14px 12px;border-radius:var(--jm-radius);
  box-shadow:0 1px 2px rgba(0,0,0,.04);overflow:hidden;
  opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .45s ease;
}
.jm-post.is-in{opacity:1;transform:none;}
.jm-post__head{display:flex;align-items:center;gap:10px;padding:14px 16px 10px;}
.jm-post__ava{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:14px;font-weight:700;flex:0 0 auto;}
.jm-post__who{flex:1;min-width:0;}
.jm-post__name{font-size:14.5px;font-weight:700;display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
.jm-badge{font-size:10.5px;font-weight:700;padding:2px 6px;border-radius:5px;background:var(--jm-primary-weak);color:var(--jm-primary-deep);}
.jm-badge--notice{background:#fff1f0;color:#e0574f;}
.jm-post__meta{font-size:12px;color:var(--jm-sub);margin-top:1px;}
.jm-post__body{padding:2px 16px 12px;font-size:15px;line-height:1.62;white-space:pre-wrap;word-break:break-word;}
.jm-post__body.is-clamp{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;}
.jm-post__expand{padding:0 16px 12px;margin-top:-8px;font-size:14px;font-weight:600;color:var(--jm-sub);}

/* ---------- 사진 그리드 ---------- */
.jm-photos{display:grid;gap:2px;background:#fff;}
.jm-photos--1{grid-template-columns:1fr;}
.jm-photos--2{grid-template-columns:1fr 1fr;}
.jm-photos--3{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;height:280px;}
.jm-photos--3 .jm-ph:nth-child(1){grid-row:span 2;}
.jm-photos--4{grid-template-columns:1fr 1fr;}
.jm-ph{position:relative;overflow:hidden;background:#eef1f4;display:block;padding:0;border:0;width:100%;}
.jm-photos--1 .jm-ph{aspect-ratio:4/3;}
.jm-photos--2 .jm-ph,.jm-photos--4 .jm-ph{aspect-ratio:1/1;}
.jm-ph img{width:100%;height:100%;object-fit:cover;display:block;}
.jm-ph__rest{position:absolute;inset:0;background:rgba(0,0,0,.5);color:#fff;display:grid;place-items:center;font-size:26px;font-weight:700;letter-spacing:-0.03em;}

/* ---------- 강의 카드 (5단계=기본 표시) ---------- */
.jm-video{position:relative;display:block;width:100%;padding:0;border:0;background:#0e1114;cursor:pointer;overflow:hidden;}
.jm-video__thumb{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;transition:transform .4s ease;}
.jm-video:hover .jm-video__thumb{transform:scale(1.03);}
.jm-video__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 40%,rgba(0,0,0,.62) 100%);}
.jm-video__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.94);display:grid;place-items:center;box-shadow:0 4px 16px rgba(0,0,0,.3);transition:transform .2s;}
.jm-video:hover .jm-video__play{transform:translate(-50%,-50%) scale(1.08);}
.jm-video__play svg{margin-left:3px;color:var(--jm-primary-deep);}
.jm-video__dur{position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.78);color:#fff;font-size:11.5px;font-weight:600;padding:3px 7px;border-radius:5px;letter-spacing:0;}
.jm-video__meta{position:absolute;left:14px;right:80px;bottom:10px;color:#fff;text-align:left;}
.jm-video__t{font-size:14.5px;font-weight:700;line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.jm-video__s{font-size:11.5px;opacity:.82;margin-top:3px;}
.jm-vtag{display:inline-flex;align-items:center;gap:3px;background:#f3eefe;color:#6b4fc4;}

/* ---------- 좋아요 수(표시만 · 토글은 7단계) ---------- */
.jm-stat{display:flex;align-items:center;gap:5px;padding:11px 16px 14px;font-size:12.5px;color:var(--jm-sub);}
.jm-stat__heart{color:#f5535b;}

/* ---------- 하단 로더 / 끝 / 빈 상태 / 에러 ---------- */
.jm-loader{display:none;justify-content:center;padding:24px 0 8px;}
.jm-end{display:none;text-align:center;color:#b0b8c1;font-size:13px;padding:22px 0;}
.jm-empty{display:none;text-align:center;color:var(--jm-sub);font-size:14px;padding:70px 24px;}

/* ⚠ 개발용 에러 표시 — 규칙·인덱스 완료 후 이 블록 지워도 됨 */
.jm-error{display:none;margin:14px;padding:16px 18px;border-radius:14px;background:#fff1f0;border:1px solid #ffd7d3;color:#b3261e;font-size:13.5px;line-height:1.6;}
.jm-error b{display:block;font-size:14.5px;margin-bottom:4px;}
.jm-error span{display:block;color:#8a4b46;}
.jm-error a{display:inline-block;margin-top:8px;color:var(--jm-primary-deep);font-weight:700;text-decoration:underline;}

/* ---------- 토스트 ---------- */
.jm-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(12px);background:#1a1c1e;color:#fff;font-size:13.5px;font-weight:600;padding:11px 18px;border-radius:12px;opacity:0;pointer-events:none;transition:.22s;z-index:120;max-width:88%;text-align:center;}
.jm-toast.is-on{opacity:1;transform:translateX(-50%) translateY(0);}