@charset "utf-8";

#mg_scrap, .mg-view {
    --mg-space-1: 8px;
    --mg-space-2: 16px;
    --mg-space-3: 24px;
    --mg-space-4: 32px;
    --mg-space-6: 48px;
    --mg-radius-card: 16px;
    --mg-radius-button: 999px;
    --mg-radius-modal: 32px;
    --mg-blur-sm: 5px;
    --mg-blur-md: 10px;
    --mg-blur-lg: 20px;
    --mg-shadow-near: 0 2px 8px rgba(0, 0, 0, 0.06);
    --mg-shadow-ambient: 0 16px 40px rgba(0, 0, 0, 0.08);
    --mg-duration: 280ms;
    --mg-ease: cubic-bezier(.22, .61, .36, 1);
    --mg-glass-bg: rgb(from var(--card-bg-color, #ffffff) r g b / 70%);
    --mg-glass-border: rgb(from var(--white, #ffffff) r g b / 45%);

    display: block;
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--mg-space-4) var(--mg-space-2);
    font-family: var(--content-font-family, inherit);
    color: var(--content-font-color, #222);
}

/* view.skin.php를 퍼머링크로 직접 열었을 때(모달이 아니라 독립된 페이지로 접근했을 때)도
   상세보기 모달의 패널(.mg-modal__panel--detail)과 같은 톤으로 보이게 한다 — 사이트
   테마의 밋밋한 일반 페이지 대신, 화면 가운데 뜬 둥근 유리 카드처럼 보이게 하는 것.
   모달 안에 fetch로 삽입된 사본(#mg_detail_body .mg-view)은 패널 자체가 이미 이 스타일을
   갖고 있으므로 제외한다 — 이중으로 카드 안에 카드가 생기는 걸 막는다. 안쪽 섹션들
   (.view_header/.view_content_wrap/.view_meta)이 이미 자기 여백을 갖고 있어서(모달 패널과
   동일한 구조), 바깥 padding은 0으로 둔다.
   :not()에 #mg_detail_body .mg-view처럼 자손결합자가 있는 셀렉터를 넣는 건 최신 CSS
   (Selectors Level 4) 문법으로, 이 요소 자신이 그 셀렉터와 매치되는지(=#mg_detail_body의
   자손인지)를 판단한다 — 오래된 브라우저에서는 무시되어 기본 여백 스타일로만 보이니
   완전히 깨지지는 않는다. */
.mg-view:not(#mg_detail_body .mg-view) {
    max-width: min(720px, 92vw);
    margin: var(--mg-space-4) auto;
    padding: 0;
    background: var(--mg-glass-bg);
    backdrop-filter: blur(var(--mg-blur-lg));
    -webkit-backdrop-filter: blur(var(--mg-blur-lg));
    border: 1px solid var(--mg-glass-border);
    border-radius: var(--mg-radius-modal);
    box-shadow: var(--mg-shadow-near), var(--mg-shadow-ambient);
    /* overflow:hidden은 안 쓴다 — "더보기"(⋮) 드롭다운은 모달과 달리 여기선 JS로
       재배치하지 않고 그누보드 기본 구조 그대로라, 카드에 overflow:hidden을 걸면 카드
       경계 밖으로 나가는 드롭다운 메뉴가 잘려 보일 수 있다. 카드 자체의 둥근 모서리는
       border-radius만으로 이미 정상적으로 그려진다(overflow는 자식 콘텐츠를 자르는
       용도일 뿐 카드 자신의 배경 렌더링에는 필요 없다). */
}

/* 게시판 리스트뷰 폭 70% — #mg_scrap(목록 페이지)에만 적용한다. .mg-view는 상세 페이지
   전체 폭이면서 동시에 상세보기 모달 내부(.mg-modal__panel--detail) 콘텐츠에도 같은
   클래스가 쓰이는데, 거기에 70%를 걸면 모달 패널(약 720px) 기준 70%로 다시 줄어들어
   모달 안 내용이 부자연스럽게 좁아졌다. 모바일에서 70%는 너무 좁아지므로(예: 375px
   화면이면 260px) 어느 정도 폭이 있는 화면에서만 적용한다. */
@media (min-width: 768px) {
    #mg_scrap { max-width: 70%; }
}

#mg_scrap .mg-empty { color: var(--text-muted, #888); text-align: center; padding: var(--mg-space-4) 0; }

/* z-index:10: .mg-topbar__tools가 transform으로, .mg-composer는 backdrop-filter로 각자
   새 스태킹 컨텍스트를 만든다. 그 안에 있는 태그 팝오버의 z-index:60은 자기 컨텍스트
   안에서만 유효해서, DOM에서 뒤에 오는 .mg-composer(z-index:auto)에 그냥 덮여버렸다.
   topbar 자체에 z-index를 줘서 컨텍스트 비교를 이 레벨로 끌어올린다(모달의 z-index:50보다
   낮게 둬서 모달이 열렸을 때는 여전히 모달이 위에 오도록 한다). */
.mg-topbar { position: relative; z-index: 10; display: flex; align-items: center; justify-content: center; margin-bottom: var(--mg-space-3); }
.mg-topbar__title {
    font-family: var(--title-font-family, inherit);
    color: var(--title-font-color, inherit);
    text-transform: uppercase;
    text-align: center;
    font-size: 2.6em;
    font-weight: 700;
    margin: 0;
}
.mg-topbar__tools {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: var(--mg-space-1);
}

.mg-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid var(--card-border-color, #e5e5e5);
    background: var(--mg-glass-bg);
    color: var(--content-font-color, #222);
    border-radius: var(--mg-radius-button);
    padding: 8px 16px;
    cursor: pointer;
    transition: transform var(--mg-duration) var(--mg-ease), color var(--mg-duration) var(--mg-ease);
}
.mg-button:focus,
.mg-button:focus-visible { outline: 0 none; box-shadow: none; }
.mg-button--icon {
    width: 40px;
    height: 40px;
    padding: 0;
    color: var(--text-muted, #888);
    text-decoration: none;
}
.mg-button--icon:hover { color: var(--text-primary, #222); transform: translateY(-2px); }
.mg-button--icon,
.mg-button--icon:hover,
.mg-button--icon:focus,
.mg-button--icon:active {
    border: 0 none;
    outline: 0 none;
    background: transparent;
    box-shadow: none;
}

.mg-input {
    border: 1px solid var(--card-border-color, #e5e5e5);
    background: var(--mg-glass-bg);
    border-radius: var(--mg-radius-card);
    padding: 10px 16px;
    font-family: inherit;
    font-size: 0.95em;
}
.mg-input:focus { outline: none; border-color: var(--primary-color, #7b6bff); }

/* 배경이 있는 배지 — 테두리로 구분하던 예전 방식 대신 은은한 배경색으로 칩처럼 보이게 한다. */
.mg-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgb(from var(--primary-color, #7b6bff) r g b / 10%);
    border-radius: var(--mg-radius-button);
    padding: 2px 10px;
    font-size: 0.8em;
    color: var(--text-muted, #888);
}
.mg-tag--cloud { text-decoration: none; margin: 0 6px 6px 0; }
.mg-tag--cloud:hover { background: rgb(from var(--primary-color, #7b6bff) r g b / 18%); }
/* 태그 팝오버에서 지금 선택돼 있는(필터링 중인) 태그를 채워진 배지로 표시한다 — 다시
   누르면 선택이 풀리는 걸 눈으로 알 수 있게. */
.mg-tag--cloud.is-active { background: var(--primary-color, #7b6bff); color: var(--white, #fff); }

.mg-tagcloud { display: flex; flex-wrap: wrap; gap: 8px; }

/* 태그 보기: 화면 중앙 모달 대신, 트리거 버튼 바로 아래에 뜨는 팝오버로 연다(어두운 배경
   오버레이 없이 살짝 뜨면서 나타난다). 앵커는 버튼 바로 옆이라 팝오버는 버튼 기준
   상대 위치(position:relative인 부모)로 붙인다. */
.mg-popover-anchor { position: relative; }
.mg-popover {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 60;
    width: min(320px, 88vw);
    max-height: min(420px, 70vh);
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background: var(--mg-glass-bg);
    backdrop-filter: blur(var(--mg-blur-lg));
    -webkit-backdrop-filter: blur(var(--mg-blur-lg));
    border: 1px solid var(--mg-glass-border);
    border-radius: var(--mg-radius-card);
    box-shadow: var(--mg-shadow-near), var(--mg-shadow-ambient);
    padding: var(--mg-space-3);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform-origin: top right;
    transform: translateY(-6px) scale(0.96);
    transition: opacity var(--mg-duration) var(--mg-ease), transform var(--mg-duration) var(--mg-ease), visibility 0s linear var(--mg-duration);
}
.mg-popover.is-open {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateY(0) scale(1);
    transition: opacity var(--mg-duration) var(--mg-ease), transform var(--mg-duration) var(--mg-ease), visibility 0s linear 0s;
}
.mg-popover::-webkit-scrollbar { display: none; }
.mg-popover h3 { margin: 0 0 var(--mg-space-2); font-size: 1.05em; font-weight: 700; color: var(--title-font-color, inherit); }

/* 태그 재사용 드롭다운 — 발췌 확장 프로그램의 폰트 검색 콤보박스(트리거 → 검색창 → 체크
   가능한 목록)와 같은 구성을 이 사이트의 유리(glass) 톤으로 맞춘 것. 태그는 다중 선택이라
   그쪽과 달리 항목을 눌러도 패널이 닫히지 않고 체크 표시만 토글된다. 여닫힘은 태그
   팝오버(.mg-popover)와 같은 is-open 클래스 + opacity/transform 트랜지션 방식이다 —
   hidden 속성은 트랜지션 자체를 재생 못 시키므로 아래로 스륵 내려오는 애니메이션에는
   쓸 수 없다(위쪽 .mg-popover 설명 참고). */
.mg-tag-combobox { position: relative; }
.mg-tag-combobox--inline { display: flex; align-items: center; gap: var(--mg-space-1); }
.mg-tag-combobox--inline .frm_input { flex: 1; }
.mg-tag-combobox__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 20;
    width: min(260px, 80vw);
    max-height: 280px;
    display: flex;
    flex-direction: column;
    background: var(--mg-glass-bg);
    backdrop-filter: blur(var(--mg-blur-lg));
    -webkit-backdrop-filter: blur(var(--mg-blur-lg));
    border: 1px solid var(--mg-glass-border);
    border-radius: var(--mg-radius-card);
    box-shadow: var(--mg-shadow-near), var(--mg-shadow-ambient);
    padding: var(--mg-space-1);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform-origin: top right;
    transform: translateY(-6px) scale(0.96);
    transition: opacity var(--mg-duration) var(--mg-ease), transform var(--mg-duration) var(--mg-ease), visibility 0s linear var(--mg-duration);
}
.mg-tag-combobox__panel.is-open {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateY(0) scale(1);
    transition: opacity var(--mg-duration) var(--mg-ease), transform var(--mg-duration) var(--mg-ease), visibility 0s linear 0s;
}
.mg-tag-combobox__search {
    flex-shrink: 0;
    margin: 4px 4px 6px;
    border: 1px solid var(--card-border-color, #e5e5e5);
    background: rgb(from var(--card-bg-color, #ffffff) r g b / 60%);
    border-radius: var(--mg-radius-card);
    padding: 6px 10px;
    font-family: inherit;
    font-size: 0.85em;
}
.mg-tag-combobox__search:focus { outline: none; border-color: var(--primary-color, #7b6bff); }
.mg-tag-combobox__list { overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.mg-tag-combobox__item {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 7px 10px; border-radius: 8px;
    font-size: 0.85em; color: var(--content-font-color, #222);
    cursor: pointer; user-select: none;
}
.mg-tag-combobox__item:hover { background: rgb(from var(--primary-color, #7b6bff) r g b / 8%); }
.mg-tag-combobox__item[data-checked="true"] {
    background: rgb(from var(--primary-color, #7b6bff) r g b / 12%);
    color: var(--primary-color, #7b6bff);
    font-weight: 700;
}
.mg-tag-combobox__item-check { flex-shrink: 0; display: flex; opacity: 0; }
.mg-tag-combobox__item[data-checked="true"] .mg-tag-combobox__item-check { opacity: 1; }
.mg-tag-combobox__empty { padding: var(--mg-space-2); text-align: center; font-size: 0.85em; color: var(--text-muted, #888); margin: 0; }

/* 모달은 내용 길이나 페이지 스크롤 위치와 무관하게 항상 화면 정중앙에 고정된다. 패널이
   뷰포트보다 길면 패널 자체가 내부 스크롤되지만, 스크롤바는 시각적으로 숨긴다(스크롤
   동작 자체는 그대로 유지된다). 앞으로 만드는 모든 스킨의 모달이 따르는 공통 패턴이다.

   열기/닫기는 hidden 속성이 아니라 is-open 클래스로 한다 — [hidden]은 display:none을 강제해
   CSS 트랜지션이 아예 재생되지 않는다(그리고 [hidden]과 이 규칙의 display:flex가 명시도
   동점일 때 author 규칙이 항상 이겨서, [hidden]만으로는 모달이 실제로 숨겨지지도 않는다).
   그래서 기본 상태를 opacity:0 + visibility:hidden + pointer-events:none으로 두고,
   is-open일 때만 보이며 위로 슬라이드, 닫힐 때는 아래로 슬라이드하며 사라진다. */
.mg-modal {
    position: fixed; inset: 0; z-index: 50;
    display: flex; align-items: center; justify-content: center;
    padding: var(--mg-space-4) var(--mg-space-2);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--mg-duration) var(--mg-ease), visibility 0s linear var(--mg-duration);
}
.mg-modal.is-open {
    opacity: 1; visibility: visible; pointer-events: auto;
    transition: opacity var(--mg-duration) var(--mg-ease), visibility 0s linear 0s;
}
.mg-modal__bg { position: fixed; inset: 0; background: var(--bg-overlay, rgba(0, 0, 0, 0.25)); }
/* 자세히 보기 모달 배경에 backdrop-filter 블러를 써봤지만(전체 화면을 덮는 블러라 GPU
   합성 비용이 커서) 라이브에서 실측해도 첫 렌더링 지연을 없애지 못했다. 블러 없이,
   기존처럼 어두워지는 효과로 되돌리되 페이드를 더 천천히·부드럽게 만든다 — 블러가
   없으니 단색 opacity 트랜지션만 남아 지속시간을 늘려도 전혀 무겁지 않다. */
#mg_detail_modal {
    transition: opacity 480ms var(--mg-ease), visibility 0s linear 480ms;
}
#mg_detail_modal.is-open {
    transition: opacity 480ms var(--mg-ease), visibility 0s linear 0s;
}
.mg-modal__panel {
    position: relative;
    width: min(480px, 90vw);
    max-height: 100%;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background: var(--mg-glass-bg);
    backdrop-filter: blur(var(--mg-blur-lg));
    -webkit-backdrop-filter: blur(var(--mg-blur-lg));
    border: 1px solid var(--mg-glass-border);
    border-radius: var(--mg-radius-modal);
    box-shadow: var(--mg-shadow-near), var(--mg-shadow-ambient);
    padding: var(--mg-space-3);
    transform: translateY(28px);
    transition: transform var(--mg-duration) var(--mg-ease);
}
.mg-modal.is-open .mg-modal__panel { transform: translateY(0); }
.mg-modal__panel::-webkit-scrollbar { display: none; }
.mg-modal__panel--detail { width: min(720px, 92vw); padding: 0; }
/* 수정 모달(write.skin.php를 fetch해 넣는 곳)은 상세보기(--detail)와 달리 자체 내부 여백이
   없는 그누보드 기본 폼 마크업이라, --detail처럼 padding:0으로 두면 내용이 모달 테두리에
   바짝 붙어버린다. 캘린더 스킨의 작성 모달(.mg-modal__panel--write)과 같은 너비/여백을 쓴다. */
.mg-modal__panel--write { width: min(640px, 92vw); padding: var(--mg-space-3); }
.mg-modal__close { position: absolute; top: var(--mg-space-2); right: var(--mg-space-2); z-index: 1; }

@media (prefers-reduced-motion: reduce) {
    .mg-modal, .mg-modal.is-open, .mg-modal__panel { transition: none; }
    .mg-popover, .mg-popover.is-open { transition: none; }
    .mg-tag-combobox__panel, .mg-tag-combobox__panel.is-open { transition: none; }
    #mg_detail_modal, #mg_detail_modal.is-open, .mg-embed--twitter { transition: none; }
}

.mg-view__title-row { display: flex; align-items: center; justify-content: space-between; gap: var(--mg-space-2); }
.mg-view__title-row .view_buttons_inline { flex-shrink: 0; }
.mg-view__title-row .btn_bo_user { float: none; display: flex; gap: 4px; }
.mg-view__title-row .btn_bo_user li { float: none; margin: 0; }
.mg-view .btn_b01:hover { background: transparent; transform: translateY(-2px); }
.mg-view .bo_v_tit {
    font-family: var(--title-font-family, inherit);
    color: var(--title-font-color, inherit);
    font-size: 1.6em;
    margin: 0;
}
.mg-view .author_info { display: flex; flex-direction: column; gap: 6px; }
.mg-view .author_id,
.mg-view .view_date { color: var(--text-muted, #999); font-size: 0.85em; }
.mg-view .view_header { padding: var(--mg-space-4) var(--mg-space-4) var(--mg-space-2); }
.mg-view .view_content_wrap { padding: 0 var(--mg-space-4) var(--mg-space-3); }
.mg-view .view_meta { padding: 0 var(--mg-space-4) var(--mg-space-2); }

#mg_detail_body .bo_v_nb { display: none; }
#mg_detail_body .btn_bo_user.bo_v_com li { margin-left: var(--mg-space-1); }

/* 수정 모달 안 write.skin.php 폼(그누보드 기본 write_div/frm_input 마크업)을 캘린더 스킨의
   작성 모달과 같은 유리(glass) 톤·여백으로 맞춘다. 필드 사이 간격이 전혀 없어 보이던 문제는
   블록 사이 margin이 없었기 때문 — write_div 블록마다 세로 간격을 주고, 입력창은 mg-input과
   같은 모양으로 재스타일한다. */
#mg_write_body h2.sound_only { display: none; }
/* 링크(embed_url)와 본문(write_file.common.php가 내려주는 textarea) 사이처럼, 다음
   형제가 어떤 태그·클래스로 나올지 모르는 그누보드 core 마크업까지 확실히 벌리려고
   인접 셀렉터 대신 form의 모든 직계 자식에 flex gap을 준다(숨김 input/script는
   display:none이라 레이아웃에서 아예 빠지므로 gap에 영향받지 않는다). */
#mg_write_body #bo_w > form { display: flex; flex-direction: column; gap: var(--mg-space-3); }
#mg_write_body .write_div { margin: 0; }

/* 상단 X 닫기 버튼(40x40, 우상단 16px)과 겹치지 않도록, 폼 앞에 "수정하기" 제목을 넣어
   자연스러운 상단 여백을 만든다(캘린더 스킨의 작성 모달과 같은 패턴). */
.mg-write-modal__title {
    margin: 0 0 var(--mg-space-2);
    font-size: 1.2em;
    font-weight: 700;
    color: var(--title-font-color, inherit);
}
#mg_write_body label:not(.sound_only) {
    display: block;
    margin-bottom: 6px;
    font-size: 0.85em;
    color: var(--text-muted, #888);
}
#mg_write_body .frm_input,
#mg_write_body select {
    border: 1px solid var(--card-border-color, #e5e5e5);
    background: var(--mg-glass-bg);
    border-radius: var(--mg-radius-card);
    padding: 10px 16px;
    font-family: inherit;
    font-size: 0.95em;
    width: 100%;
    box-sizing: border-box;
}
#mg_write_body .frm_input:focus,
#mg_write_body select:focus {
    outline: none;
    border-color: var(--primary-color, #7b6bff);
}
#mg_write_body textarea.frm_input { resize: vertical; min-height: 120px; }
#mg_write_body .bo_w_info { display: flex; gap: var(--mg-space-2); flex-wrap: wrap; }
#mg_write_body .bo_w_info .half_input { flex: 1; min-width: 140px; }
#mg_write_body .bo_v_option {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-1);
}
#mg_write_body .btn_confirm {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--mg-space-2);
}
#mg_write_body .btn_confirm .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--mg-radius-button);
    padding: 10px 20px;
    cursor: pointer;
    text-decoration: none;
    font-size: 0.95em;
    border: 1px solid var(--card-border-color, #e5e5e5);
    background: var(--mg-glass-bg);
    color: var(--content-font-color, #222);
}
#mg_write_body .btn_confirm .btn_submit {
    background: var(--primary-color, #7b6bff);
    border-color: var(--primary-color, #7b6bff);
    color: var(--white, #fff);
}

/* z-index:5 — .mg-composer는 backdrop-filter로 자기만의 스태킹 컨텍스트를 만드는데,
   z-index를 따로 안 주면 "auto"로 취급돼 DOM에서 뒤에 오는 .mg-grid(카드들, 역시 각자
   backdrop-filter로 컨텍스트를 만듦)에 그냥 덮여버린다 — .mg-topbar에 걸었던 것과 같은
   문제라 그보다 낮은 값으로 맞춘다. 처음엔 .mg-topbar와 똑같이 10을 줬는데, z-index가
   같으면 DOM에서 더 뒤에 오는 쪽(.mg-composer)이 이겨서 이번엔 반대로 태그 팝오버
   (.mg-topbar 안)가 .mg-composer한테 가려지는 문제가 생겼다 — .mg-topbar보다 반드시
   낮아야 한다(모달의 z-index:50보다도 낮게 둬서 모달이 열리면 여전히 모달이 위).
   이 안에 있는 태그 재사용 드롭다운 패널도 같이 끌어올려져서 스크랩 카드에는
   안 가리면서, 태그 팝오버보다는 아래에 있다. */
.mg-composer {
    position: relative;
    z-index: 5;
    background: var(--mg-glass-bg);
    backdrop-filter: blur(var(--mg-blur-sm));
    border: 1px solid var(--mg-glass-border);
    border-radius: var(--mg-radius-card);
    box-shadow: var(--mg-shadow-near), var(--mg-shadow-ambient);
    padding: var(--mg-space-3);
    margin-bottom: var(--mg-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-2);
}
.mg-composer__row { display: flex; align-items: center; gap: var(--mg-space-2); }
.mg-composer__input { flex: 1; resize: vertical; min-height: 44px; }
.mg-file-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.mg-composer__tag-input { flex: 1; }
.mg-composer__title-input { flex: 1; font-size: 1.1em; font-weight: inherit; }
.mg-composer__submit,
.mg-composer__submit:hover { margin-left: auto; color: var(--primary-color, #7b6bff); font-size: 1.1em; }
.mg-composer .mg-input,
.mg-composer .mg-input:hover,
.mg-composer .mg-input:focus,
.mg-composer .mg-input:focus-visible,
.mg-composer .mg-input:active {
    border: 0 none !important;
    outline: 0 none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: var(--mg-radius-card);
    -webkit-tap-highlight-color: transparent;
}
.mg-composer__preview { display: flex; align-items: center; gap: var(--mg-space-2); border: 1px solid var(--card-border-color, #e5e5e5); border-radius: var(--mg-radius-card); padding: var(--mg-space-1); }
.mg-composer__preview img { width: 48px; height: 48px; object-fit: cover; border-radius: 12px; }
.mg-composer__thumbs { flex: 1; display: flex; flex-wrap: wrap; gap: var(--mg-space-1); }
.mg-composer__preview span { flex: 1; font-size: 0.85em; color: var(--text-muted, #888); }
#mg_scrap [hidden], .mg-view [hidden] { display: none !important; }

.mg-grid {
    columns: 3 280px;
    column-gap: var(--mg-space-3);
}
/* 고정된 게시글은 3단 매이슨리 대신 1단으로 가로 폭을 꽉 채워서 눈에 띄게 한다. */
.mg-pin-section .mg-grid { columns: 1; }
.mg-card {
    position: relative;
    display: inline-block;
    width: 100%;
    break-inside: avoid;
    margin-bottom: var(--mg-space-3);
    background: var(--mg-glass-bg);
    backdrop-filter: blur(var(--mg-blur-sm));
    border: 1px solid var(--mg-glass-border);
    border-radius: var(--mg-radius-card);
    box-shadow: var(--mg-shadow-near), var(--mg-shadow-ambient);
    transition: transform var(--mg-duration) var(--mg-ease), box-shadow var(--mg-duration) var(--mg-ease);
    overflow: hidden;
}
.mg-card:hover { transform: translateY(-4px); box-shadow: var(--mg-shadow-ambient), 0 0 0 1px rgb(from var(--primary-color, #7b6bff) r g b / 20%); }

/* 고정(Pin) 버튼 — Watermelon UI의 Pin Item 참고: 평소엔 숨어 있다가 카드에 호버하거나
   이미 고정된 카드에서만 보인다. 실제 상태는 JS가 localStorage에 저장한다(서버 스키마
   변경 없음). */
.mg-card__pin {
    position: absolute; top: var(--mg-space-2); right: var(--mg-space-2); z-index: 2;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 999px;
    background: rgb(from var(--card-bg-color, #ffffff) r g b / 70%);
    backdrop-filter: blur(var(--mg-blur-sm));
    border: 1px solid var(--mg-glass-border);
    color: var(--text-muted, #888);
    opacity: 0;
    transition: opacity var(--mg-duration) var(--mg-ease), color var(--mg-duration) var(--mg-ease), background var(--mg-duration) var(--mg-ease);
    cursor: pointer;
}
.mg-card:hover .mg-card__pin,
.mg-card.is-pinned .mg-card__pin { opacity: 1; }
.mg-card.is-pinned .mg-card__pin {
    color: var(--primary-color, #7b6bff);
    background: rgb(from var(--primary-color, #7b6bff) r g b / 15%);
}
.mg-pin-section { margin-bottom: var(--mg-space-4); }
.mg-pin-section__title {
    font-size: 0.85em; font-weight: 700; letter-spacing: 0.04em;
    color: var(--text-muted, #888); text-transform: uppercase;
    margin: 0 0 var(--mg-space-2) var(--mg-space-1);
}
.mg-card__permalink { display: block; padding: var(--mg-space-3); text-decoration: none; color: inherit; }
.mg-card a:hover,
.mg-card a:hover * { color: inherit; text-decoration: none; }
.mg-card__permalink:has(+ .mg-embed) { padding-bottom: var(--mg-space-1); }
.mg-card__head { display: flex; align-items: center; gap: var(--mg-space-1); margin-bottom: var(--mg-space-2); }
.mg-card__avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: rgb(from var(--primary-color, #7b6bff) r g b / 15%);
    color: var(--primary-color, #7b6bff);
    font-weight: 700; font-size: 0.85em;
    overflow: hidden;
    flex-shrink: 0;
}
/* 실제 프로필 사진(mb_signature)이 있으면 원형 칸을 꽉 채운다. 없으면 이름 첫 글자가
   그대로 남아 지금까지의 이니셜 배지 모습을 유지한다. */
.mg-card__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mg-card__who { display: flex; flex-direction: column; flex: 1; }
.mg-card__who strong { font-size: 0.9em; }
.mg-card__who time { font-size: 0.75em; color: var(--text-muted, #888); }
.mg-card__title {
    font-family: var(--title-font-family, inherit);
    color: var(--title-font-color, inherit);
    font-size: 1.05em;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 var(--mg-space-1);
    word-break: break-word;
}
.mg-card__text { line-height: 1.6; word-break: break-word; margin-bottom: var(--mg-space-1); }
.mg-card__text h1, .mg-view #bo_v_con h1 { font-size: 1.6em; font-weight: 700; margin: 0.4em 0 0.3em; line-height: 1.3; }
.mg-card__text h2, .mg-view #bo_v_con h2 { font-size: 1.35em; font-weight: 700; margin: 0.4em 0 0.3em; line-height: 1.3; }
.mg-card__text h3, .mg-view #bo_v_con h3 { font-size: 1.15em; font-weight: 600; margin: 0.4em 0 0.3em; line-height: 1.3; }
.mg-card__media { width: 100%; display: block; border-radius: 16px; margin-top: var(--mg-space-1); }
.mg-slideshow {
    overflow: hidden;
    border-radius: 16px;
    margin-top: var(--mg-space-1);
    aspect-ratio: 4 / 3;
}
.mg-slideshow__track {
    display: flex;
    height: 100%;
    transition: transform 700ms var(--mg-ease);
}
.mg-slideshow__slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mg-view__media { width: 100%; display: block; border-radius: 16px; margin-top: var(--mg-space-2); }
.mg-card__locked { display: flex; align-items: center; gap: 6px; color: var(--text-muted, #888); padding: var(--mg-space-2) 0; }
/* 목록 카드는 permalink 자체의 하단 padding(--mg-space-3)이 이미 본문과의 간격을 만들어줘서
   태그 쪽에 위쪽 padding을 더 얹으면 오히려 과했다(상세보기와 달리 별도 구분선도 필요 없다 —
   상세보기 전용 여백/구분선은 아래 .mg-view .mg-card__tags가 따로 담당한다). */
.mg-card__tags { padding: 0 var(--mg-space-3) var(--mg-space-2); display: flex; flex-wrap: wrap; gap: 6px; }
/* 상세보기 본문(.mg-view)에서는 .view_content_wrap 자체가 이미 좌우 여백(--mg-space-4)을
   갖고 있는데, 카드용 좌우 padding(--mg-space-3)이 그 위에 또 붙어서 태그가 본문 텍스트보다
   더 오른쪽으로 밀려 보였다(왼쪽 정렬이 안 맞는 것처럼 보임) — 좌우 padding을 0으로 지워
   본문과 같은 줄에서 시작하게 한다. 구분선은 없애고 본문과 이어지는 여백만 준다. */
.mg-view .mg-card__tags {
    padding: 0;
    margin-top: var(--mg-space-2);
}
/* 상세보기에서는 태그를 배지가 아니라 본문의 일반 텍스트처럼 보이게 한다. */
.mg-view .mg-card__tags .mg-tag {
    background: none;
    border-radius: 0;
    padding: 0;
    color: var(--text-muted, #888);
}

.mg-embed { display: block; text-decoration: none; color: inherit; margin: 0 var(--mg-space-3) var(--mg-space-2); border: 1px solid var(--card-border-color, #e5e5e5); border-radius: 16px; overflow: hidden; }
/* 일반 링크/OG 임베드 카드는 배경이 없어서 카드·본문과 잘 구분되지 않았다. 유튜브/트위터는
   자체 콘텐츠(iframe/위젯)가 카드를 꽉 채우므로 배경이 보일 일이 없어 대상에서 뺀다. */
.mg-embed--link, .mg-embed--og { background: var(--mg-glass-bg); }
.mg-embed img { width: 100%; display: block; }
.mg-embed--youtube { border: 0; line-height: 0; }
.mg-embed--youtube iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 16px; display: block; }
.mg-embed__meta { display: block; padding: var(--mg-space-2); }
.mg-embed__title { display: block; font-size: 0.9em; }
.mg-embed__site { display: block; font-size: 0.75em; color: var(--text-muted, #888); margin-top: 2px; }
.mg-view .mg-embed { margin: var(--mg-space-3) 0 0; }
/* 트위터 위젯(widgets.js)은 blockquote를 iframe으로 비동기로 바꿔치기하는데, 그 사이
   빈 링크 텍스트가 잠깐 보였다가 갑자기 카드로 바뀌면서 모달이 열리는 느낌 자체가
   더 끊겨 보였다. 렌더링이 끝나기 전까지는 투명하게 숨겨두고(빈 텍스트 flash 방지),
   scrap.js가 트위터의 'rendered' 이벤트를 받으면 is-loaded를 붙여 부드럽게 페이드인한다.
   위젯 스크립트가 막히거나 실패해도 링크 자체는 볼 수 있도록 scrap.js에 타임아웃 폴백이 있다. */
.mg-embed--twitter { border: 0; border-radius: 0; opacity: 0; transition: opacity 420ms var(--mg-ease); }
.mg-embed--twitter.is-loaded { opacity: 1; }
.mg-embed--twitter blockquote { margin: 0; }
/* 트위터 위젯(widgets.js)이 blockquote를 대체해 넣는 iframe은 폭이 고정(~500px)이라
   본문보다 넓은 상세보기/모달 안에서는 왼쪽으로 붙어 보인다. 목록 카드는 폭이 좁아
   차이가 거의 없으니 상세보기(.mg-view)에서만 가운데로 맞춘다. 위젯이 iframe을
   block으로 꽂아 넣는 경우가 있어 text-align만으로는 안 먹혀서 flex로 확실히 중앙에 둔다. */
.mg-view .mg-embed--twitter { display: flex; justify-content: center; }

.mg-pagination { display: flex; justify-content: center; gap: 6px; margin: var(--mg-space-3) 0; }
.mg-pagination__item {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    text-decoration: none; color: var(--content-font-color, #222);
    border: 1px solid var(--card-border-color, #e5e5e5);
}
.mg-pagination__item.is-active { background: var(--primary-color, #7b6bff); border-color: var(--primary-color, #7b6bff); color: var(--white, #fff); }

.mg-search-inline { display: flex; align-items: center; overflow: hidden; }
.mg-search-inline__input,
.mg-search-inline__input:hover,
.mg-search-inline__input:focus,
.mg-search-inline__input:focus-visible,
.mg-search-inline__input:active {
    width: 0;
    min-width: 0;
    padding: 0;
    margin-right: 0;
    border: 1px solid transparent !important;
    outline: 0 none !important;
    box-shadow: none !important;
    background: var(--mg-glass-bg);
    border-radius: var(--mg-radius-card);
    font-family: inherit;
    font-size: 0.95em;
    opacity: 0;
    transition: width var(--mg-duration) var(--mg-ease), padding var(--mg-duration) var(--mg-ease),
        opacity var(--mg-duration) var(--mg-ease), margin var(--mg-duration) var(--mg-ease);
}
.mg-search-inline.is-open .mg-search-inline__input,
.mg-search-inline.is-open .mg-search-inline__input:focus {
    width: 220px;
    padding: 8px 16px;
    margin-right: var(--mg-space-1);
    border-color: var(--card-border-color, #e5e5e5) !important;
    opacity: 1;
}

@media (max-width: 900px) {
    .mg-grid { columns: 2 220px; }
}

@media (max-width: 600px) {
    .mg-grid { columns: 1; }
}