/* 13000 0.2.0 — 좋아요·댓글·산꾼들. mlog.css 뒤에 불러 12000 --umt-* 변수를 쓴다.
 * 규칙(사용자 결정 2026-10-20): 배경이 어두우면 글자는 흰색. 테마 button:hover/focus(진한 회색 배경)가 끼어들지 않게 버튼마다 hover·focus 를 적는다. */
.umt { --mlog-heart: #e8344e; }

/* ---------- 크게 보기 아래 막대 ♥ · 💬 · 사진: 닉네임 ---------- */
.mlog-vbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0 0 6px; }
.mlog-vbar button { display: inline-flex; align-items: center; gap: 5px; min-height: 40px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; background: rgba(255, 255, 255, .08); color: #fff; font: inherit; font-size: 15px; cursor: pointer; }
.mlog-vbar button span { font-size: 18px; line-height: 1; }
.mlog-vbar button b { font-variant-numeric: tabular-nums; }
.mlog-vbar button:hover, .mlog-vbar button:focus { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .45); color: #fff; }
.mlog-vbar button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.mlog-vbar__lk.is-on, .mlog-vbar__lk.is-on:hover, .mlog-vbar__lk.is-on:focus { background: rgba(232, 52, 78, .22); border-color: var(--mlog-heart); color: #fff; }
.mlog-vbar__lk.is-on span { color: #ff6b7f; }
.mlog-vbar__lk.is-mine { opacity: .7; }
.mlog-vbar__by { margin-left: 4px; font-size: 13.5px; opacity: .9; }
/* grid 안의 img max-height:100% 는 높이를 못 잡아 사진이 아래 막대를 덮었다 → flex 로 바꿔 칸 안에 맞춘다 */
.mlog-viewer__fig { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.mlog-viewer__fig img { min-width: 0; min-height: 0; }
.mlog-heart { position: absolute; left: 50%; top: 50%; z-index: 2; color: var(--mlog-heart); font-size: min(30vw, 140px); line-height: 1; text-shadow: 0 4px 24px rgba(0, 0, 0, .45); transform: translate(-50%, -50%) scale(0); animation: mlog-pop .9s ease-out forwards; pointer-events: none; }
@keyframes mlog-pop {
	0% { transform: translate(-50%, -50%) scale(.2); opacity: 0; }
	18% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
	32% { transform: translate(-50%, -50%) scale(.95); }
	70% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
	100% { transform: translate(-50%, -60%) scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .mlog-heart { animation-duration: .01s; animation-delay: .6s; transform: translate(-50%, -50%); } }

/* ---------- 댓글 창: 휴대폰 아래 시트 70%, PC 오른쪽 360px ---------- */
.mlog-cmt { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; flex-direction: column; height: 70%; height: 70dvh; border-radius: 16px 16px 0 0; background: #fff; color: var(--umt-ink); box-shadow: 0 -8px 28px rgba(0, 0, 0, .35); }
.mlog-cmt a { color: var(--umt-ink); }
.mlog-cmt__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px 6px 16px; border-bottom: 1px solid var(--umt-line); }
.mlog-cmt__head h2 { margin: 0; font-size: 17px; color: var(--umt-ink); }
.mlog-cmt__head h2:focus { outline: none; }
.mlog-cmt__head small { color: var(--umt-muted); font-weight: 600; }
.mlog-cmt__list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; margin: 0; padding: 6px 16px; }
.mlog-cmt__none { padding: 28px 0; text-align: center; color: var(--umt-muted); }
.mlog-cmt__more { padding: 8px 0; text-align: center; }
.mlog-c { padding: 8px 0; border-bottom: 1px solid #eef2ef; }
.mlog-c.is-re { margin-left: 26px; padding-left: 10px; border-left: 2px solid var(--umt-line); }
.mlog-c__body { margin: 0; font-size: 15px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.mlog-c__by { font-weight: 800; text-decoration: none; }
.mlog-c__at { color: var(--umt-accent); font-weight: 700; }
.mlog-c.is-del .mlog-c__body { color: var(--umt-muted); font-style: italic; }
.mlog-c__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin: 2px 0 0; font-size: 12.5px; color: var(--umt-muted); }
.mlog-c__meta select { min-height: 32px; border: 1px solid var(--umt-line); border-radius: 8px; font: inherit; font-size: 16px; }
.mlog-c__a { min-height: 28px; padding: 0 4px; border: 0; background: none; color: var(--umt-muted); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.mlog-c__a:hover, .mlog-c__a:focus { background: none; color: var(--umt-ink); text-decoration: underline; }
.mlog-cmt__form { padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--umt-line); background: #fff; }
.mlog-cmt__form textarea { display: block; width: 100%; min-height: 48px; max-height: 30vh; padding: 10px 12px; border: 1px solid var(--umt-line); border-radius: 10px; color: var(--umt-ink); font: inherit; font-size: 16px; resize: vertical; box-sizing: border-box; }
.mlog-cmt__form textarea:focus { border-color: var(--umt-accent); outline: 2px solid rgba(31, 107, 69, .2); }
.mlog-cmt__to { margin: 0 0 6px; font-size: 13px; color: var(--umt-muted); }
.mlog-cmt__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0 0; }
.mlog-cmt__cnt { font-size: 12.5px; color: var(--umt-muted); font-variant-numeric: tabular-nums; }
.mlog-cmt__cnt.is-over { color: var(--umt-bad); font-weight: 800; }
.mlog-cmt .umt-btn--primary:disabled { opacity: .45; cursor: default; }
.mlog-cmt .mlog-x { width: 36px; height: 36px; }
@media (min-width: 900px) {
	.mlog-viewer.has-cmt { padding-right: 360px; }
	.mlog-viewer.has-cmt .mlog-viewer__x { right: 370px; }
	.mlog-viewer.has-cmt .mlog-viewer__nav.is-next { right: 368px; }
	.mlog-cmt { left: auto; top: 0; width: 360px; height: auto; border-radius: 0; box-shadow: -8px 0 28px rgba(0, 0, 0, .3); }
}

/* 로그인 안내 */
.mlog-ask .mlog-modal__panel { max-width: 420px; }
.mlog-ask__msg { margin: 4px 0 14px; color: var(--umt-ink); line-height: 1.6; }
.mlog-ask__btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.mlog-ask__btns > * { flex: 1 1 140px; }
.mlog-ask .umt-btn:not(.mlog-kakao):hover, .mlog-ask .umt-btn:not(.mlog-kakao):focus { background: var(--umt-soft); color: var(--umt-ink) !important; }

/* ---------- 썸네일 ♥ N ---------- */
.mlog-lk { position: absolute; right: 4px; bottom: 4px; padding: 0 6px; border-radius: 6px; background: rgba(0, 0, 0, .58); color: #fff; font-size: 11.5px; font-weight: 700; line-height: 1.7; pointer-events: none; }

/* ---------- 정렬 전환·탭(내 수첩 | 산꾼들) ---------- */
.mlog-seg { display: inline-flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.mlog-seg button { min-height: 36px; padding: 0 12px; border: 1px solid var(--umt-line); border-radius: 999px; background: #fff; color: var(--umt-ink); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.mlog-seg button:hover, .mlog-seg button:focus { background: #fff; border-color: var(--umt-accent); color: var(--umt-ink); }
.mlog-seg button[aria-pressed=true], .mlog-seg button[aria-pressed=true]:hover, .mlog-seg button[aria-pressed=true]:focus { background: var(--umt-accent); border-color: var(--umt-accent); color: #fff; }
.mlog-item .umt-sec__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.mlog-item .umt-sec__head .mlog-seg { margin: 0; }
.mlog-subtabs { display: grid; grid-template-columns: 1fr 1fr; max-width: 360px; margin: 0 0 14px; padding: 4px; border-radius: 999px; background: var(--umt-soft); border: 1px solid var(--umt-line); }
.mlog-subtabs a { display: grid; place-items: center; min-height: 40px; border-radius: 999px; color: var(--umt-muted) !important; font-size: 15px; font-weight: 700; text-decoration: none; }
.mlog-subtabs a:hover, .mlog-subtabs a:focus { background: #fff; color: var(--umt-ink) !important; }
.mlog-subtabs a[aria-current=page], .mlog-subtabs a[aria-current=page]:hover, .mlog-subtabs a[aria-current=page]:focus { background: var(--umt-accent); color: #fff !important; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); }
.mlog-newc { border-color: var(--mlog-heart) !important; color: var(--mlog-heart) !important; }
.mlog-newc:hover, .mlog-newc:focus { background: #fff0f2 !important; color: var(--mlog-heart) !important; }
.mlog-empty .umt-btn + .umt-btn, .mlog-empty .umt-btn + a { margin-left: 6px; }

/* ---------- 산꾼들 /mountain/people/ ---------- */
.mlog-pfind { display: flex; gap: 8px; margin: 0 0 10px; }
.mlog-pfind input { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 14px; border: 1px solid var(--umt-line); border-radius: 999px; color: var(--umt-ink); font: inherit; font-size: 16px; }
.mlog-pfind input:focus { border-color: var(--umt-accent); outline: 2px solid rgba(31, 107, 69, .2); }
.mlog-pfind button { flex: none; }
.mlog-pbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 12px; }
.mlog-pcap { margin: 0 0 10px; font-size: 13.5px; color: var(--umt-muted); }
.mlog-pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 600px) { .mlog-pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 1000px) { .mlog-pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
.mlog-pgrid > .umt-empty, .mlog-pgrid > .umt-note { grid-column: 1 / -1; }
.mlog-pcard { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--umt-line); border-radius: var(--umt-r); background: #fff; color: var(--umt-ink) !important; text-decoration: none; overflow: hidden; }
.mlog-pcard:hover, .mlog-pcard:focus { border-color: var(--umt-accent); box-shadow: 0 4px 14px rgba(23, 85, 58, .14); color: var(--umt-ink) !important; }
.mlog-pcard:focus-visible { outline: 3px solid var(--umt-accent); outline-offset: 1px; }
.mlog-pcard__img { position: relative; display: block; aspect-ratio: 4 / 3; background: linear-gradient(160deg, #e3efe7, #c9ddd0); }
.mlog-pcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mlog-pcard__none { display: grid; place-items: center; height: 100%; font-size: 30px; color: #8fae9b; }
.mlog-pcard__rank { position: absolute; left: 6px; top: 6px; padding: 0 7px; border-radius: 6px; background: rgba(0, 0, 0, .58); color: #fff; font-size: 12px; font-weight: 800; line-height: 1.7; }
.mlog-pcard__body { display: grid; gap: 2px; padding: 8px 10px 10px; min-width: 0; }
.mlog-pcard__name { font-size: 16px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mlog-pcard__sub { font-size: 13px; color: var(--umt-muted); }
.mlog-pcard__sub b { color: var(--umt-accent); }
.mlog-pcard__lk { color: var(--mlog-heart); font-weight: 700; }
/* 로그인하면 WordPress 관리자 막대(32px·휴대폰 46px, z-index 99999)가 위를 덮어 댓글 머리가 잘린다 → 그만큼 내린다 */
body.admin-bar .mlog-viewer, body.admin-bar .mlog-sheet, body.admin-bar .mlog-modal { top: 32px; }
@media (max-width: 782px) { body.admin-bar .mlog-viewer, body.admin-bar .mlog-sheet, body.admin-bar .mlog-modal { top: 46px; } }
/* 이웃 (0.3.0) */
.mlog-vbar .mlog-nb { min-height: 34px; margin-left: 4px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 999px; background: transparent; color: #fff !important; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.mlog-vbar .mlog-nb:hover, .mlog-vbar .mlog-nb:focus { background: rgba(255, 255, 255, .16); color: #fff !important; }
.mlog-vbar .mlog-nb.is-on { border-color: #b7e4c7; background: #1f6b45; color: #fff !important; }
.mlog-book__tools .mlog-nb.is-on { background: #e6f4ea; border-color: var(--umt-accent); color: var(--umt-accent) !important; }
.mlog-book__tools .mlog-nb.is-on:hover, .mlog-book__tools .mlog-nb.is-on:focus { background: #d3ecdc; color: var(--umt-accent) !important; }
.mlog-nbtag { display: inline-block; padding: 0 6px; border-radius: 999px; background: #e6f4ea; color: var(--umt-accent); font-size: 11px; font-weight: 800; line-height: 1.6; vertical-align: 1px; }
.mlog-pnb { margin: 0 0 18px; padding: 12px; border: 1px solid var(--umt-line); border-radius: var(--umt-r); background: #f1f7f2; }
.mlog-pnb h2 { margin: 0 0 10px !important; font-size: 16px !important; }
.mlog-pnb h2 small { color: var(--umt-muted); font-weight: 600; }