@charset "utf-8";

/* milim_profile — 라공 에디션/그누보드 사용자 프로필 게시판 스킨
   milim-glass-core 토큰(카드/모션)을 default.css.php의 실제 변수에 매핑해 로컬로 정의한다.
   (skin/board/milim_scrap/style.css 의 방식과 동일한 컨벤션)

   스킨 자체에는 배경면이 없다 — 레이아웃·본문은 투명하고 사이트 배경(색이든 이미지든) 위에
   그대로 놓인다. 우측 카드만 서로 겹쳐 쌓이므로 각자 불투명한 종이 면을 가진다.

   --mgu-* 는 관리자가 스킨 설정에서 직접 지정한 색이다(profile_render_color_style()이
   루트에 인라인으로 꽂아준다). 지정하지 않으면 전부 사이트 테마 색으로 폴백된다. */
.mg-profile, .mg-profile-view {
    --mg-space-1: 8px;
    --mg-space-2: 16px;
    --mg-space-3: 24px;
    --mg-space-4: 32px;
    --mg-space-6: 48px;
    --mg-radius-card: var(--card-border-radius, 16px);
    --mg-radius-button: 999px;
    --mg-radius-modal: 32px;
    --mg-shadow-ambient: var(--shadow-lg, 0 16px 40px rgba(0, 0, 0, 0.08));
    --mg-duration: 280ms;
    --mg-ease: cubic-bezier(.22, .61, .36, 1);

    /* 관리자 지정색 → 없으면 테마색 */
    --pf-accent: var(--mgu-accent, var(--accent-color));
    --pf-profile-bg: var(--mgu-profile-bg, var(--accent-color));
    --pf-profile-text: var(--mgu-profile-text, var(--btn-accent-text, #fff));
    --pf-card-border: var(--mgu-card-border, var(--card-border-color, rgba(0, 0, 0, .08)));
    /* 페이지 바탕 위에 바로 놓이는 보조 글자. --text-muted(#767676)는 밝은 바탕에서
       4:1로 AA에 못 미쳐 한 단계 진한 --text-secondary를 쓴다 */
    --pf-muted: var(--text-secondary, #575757);

    /* 카드 종이 면: 테마 카드색에서 투명도만 뺀다(겹친 카드 뒤 글자가 비치지 않게) */
    --pf-paper: rgb(from var(--card-bg-color, #ffffff) r g b / 1);
    --pf-ink: rgb(from var(--content-font-color, #1f1f1f) r g b / 1);
    --pf-paper-shadow: 0 10px 30px -5px rgba(0, 0, 0, .12), 0 4px 12px -4px rgba(0, 0, 0, .06);

    background: transparent;
    font-family: var(--content-font-family, inherit);
    color: var(--content-font-color, #222);
}

/* 스킨이 쓰는 Solar 아이콘은 글자 크기에 맞춰 따라오게 한다 */
.mg-profile .solar-icon,
.mg-profile-view .solar-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.mg-profile .solar-icon svg,
.mg-profile-view .solar-icon svg { width: 1em; height: 1em; }

/* 화면에는 숨기고 화면 낭독기에는 읽히게 */
.mg-profile__sr {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ===================================================================
   레이아웃 루트 — 화면 높이에 맞춘 3열 고정 레이아웃.
   좌측(게시판 이름·프로필 카드·탭) | 가운데 본문 | 우측 카드. 좌우 열 폭이 같아서
   본문이 화면 정중앙에 온다. 본문과 카드 열만 각자 스크롤된다.
   --pf-app-top: 스킨 위쪽의 사이트 헤더 등 높이 (list.skin.php가 넣어 줌)
   =================================================================== */
.mg-profile {
    --pf-col: clamp(250px, 21vw, 320px);
    position: relative;
    display: grid;
    grid-template-columns: var(--pf-col) minmax(0, 1fr) var(--pf-col);
    align-items: stretch;
    gap: var(--mg-space-6);
    width: 100%;
    height: calc(100dvh - var(--pf-app-top, 0px));
    min-height: 480px;
    overflow: hidden;
    padding: var(--mg-space-4) var(--mg-space-4) var(--mg-space-3);
}

/* ===================================================================
   좌측 사이드 — 카드가 아니다(배경·테두리·그림자 없음).
   게시판 이름 → 프로필 카드 → (맨 아래) 탭·스킨 설정
   =================================================================== */
.mg-profile__side {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-3);
    min-height: 0;
    min-width: 0;
}

.mg-profile__side-top { display: flex; flex-direction: column; flex: none; }

.mg-profile__brand {
    font-family: var(--title-font-family, inherit);
    color: var(--title-font-color, inherit);
    font-size: clamp(26px, 3vw, 36px);
    line-height: 1;
    font-weight: 500;
    word-break: keep-all;
}

/* 탭 = 글 제목. 사이드 컬럼 맨 아래(=화면 좌측 하단)에 붙는다.
   글이 많아 공간이 모자라면 탭 목록만 따로 스크롤된다 */
.mg-profile__tabs {
    margin-top: auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-2);
    padding-top: var(--mg-space-1);
}
.mg-profile__tabs::-webkit-scrollbar { display: none; }

.mg-profile__tab {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
    font-size: 13px;
    letter-spacing: .16em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--pf-muted);
    transition: color var(--mg-duration) var(--mg-ease);
}
.mg-profile__tab-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-profile__tab-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pf-accent);
    flex: 0 0 auto;
    opacity: 0;
}
.mg-profile__tab:hover { color: var(--pf-accent); }
.mg-profile__tab.is-active { color: var(--content-font-color, #222); font-weight: 600; }

.mg-profile__settings {
    flex: none;
    margin-top: var(--mg-space-1);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pf-muted);
    text-decoration: none;
}
.mg-profile__settings:hover { color: var(--pf-accent); }

/* ===================================================================
   프로필 카드 — 세로로 긴 태그(수하물 표) 형태.
   모든 요소는 상단 끈 구멍(카드 가로 중앙)을 기준으로 가운데 정렬된다.
   =================================================================== */
.mg-profile__idcard {
    position: relative;
    isolation: isolate;
    flex: none;
    display: flex;
    flex-direction: column;
    padding: 44px var(--mg-space-3) var(--mg-space-2);
    color: var(--pf-profile-text);
    border-radius: 6px;
    box-shadow: var(--mg-shadow-ambient);
    overflow: hidden;
}
/* 카드 면은 가상 요소에 칠하고 끈 구멍 자리를 마스크로 뚫는다 —
   구멍으로 실제 사이트 배경이 보인다(배경색을 흉내 내 칠하지 않음) */
.mg-profile__idcard::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--pf-profile-bg);
    -webkit-mask: radial-gradient(circle 9px at 50% 23px, transparent 8.5px, #000 9px);
            mask: radial-gradient(circle 9px at 50% 23px, transparent 8.5px, #000 9px);
}

/* 끈 구멍 테두리 (속은 뚫려 있음) */
.mg-profile__idcard-hole {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: transparent;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .28), inset 0 0 0 1px rgb(from var(--pf-profile-text) r g b / 18%);
}

/* 왼쪽 세로 점선 (절취선 디테일) */
.mg-profile__idcard-perf {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 14px;
    border-right: 1px dashed rgb(from var(--pf-profile-text) r g b / 25%);
}

/* 좌우 여백을 같게 둬서 내용의 가로 중심 = 카드 중심 = 끈 구멍 중심 */
.mg-profile__idcard-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-inline: var(--mg-space-1);
}

/* 상단 원형 프로필 사진 + 점선 링 */
.mg-profile__frame {
    position: relative;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--mg-space-2);
    background: rgb(from var(--pf-profile-text) r g b / 12%);
    border: 1px solid rgb(from var(--pf-profile-text) r g b / 40%);
    flex: 0 0 auto;
}
.mg-profile__frame img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.mg-profile__frame-ring {
    position: absolute;
    inset: 6px;
    border: 1px dashed rgb(from var(--pf-profile-text) r g b / 45%);
    border-radius: 50%;
    pointer-events: none;
}
.mg-profile__avatar-fallback { font-size: 28px; font-weight: 700; }

/* 굵고 큰 닉네임 — 사이트 공통 h1~h6 색(default.css.php)을 끊고 카드 글자색을 따른다 */
.mg-profile .mg-profile__nick {
    color: inherit;
    font-family: var(--title-font-family, inherit);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    word-break: keep-all;
    margin-bottom: var(--mg-space-2);
}

.mg-profile__idcard-rule {
    width: 100%;
    height: 1px;
    background: rgb(from var(--pf-profile-text) r g b / 30%);
    margin-bottom: var(--mg-space-2);
}

/* 소개 필드 묶음 — 글은 왼쪽 정렬 그대로, 묶음 자체만 구멍 기준 가운데로 옮긴다 */
.mg-profile__fields {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
}
.mg-profile__field-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 9px;
    letter-spacing: .18em;
    text-transform: uppercase;
    opacity: .7;
    margin-bottom: 2px;
}
.mg-profile__field-value { font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }

.mg-profile__idcard-foot {
    display: flex;
    justify-content: center;
    margin-top: var(--mg-space-2);
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
}
.mg-profile__idcard-foot > span { opacity: .55; }

/* ===================================================================
   가운데 본문 — 이 영역만 스크롤. 내용은 열 가운데에 모인다.
   =================================================================== */
.mg-profile__main {
    grid-column: 2;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.mg-profile__scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-inline: var(--mg-space-2);
    /* 스크롤바는 숨긴다 (휠·터치·키보드 스크롤은 그대로 된다) */
    scrollbar-width: none;
}
.mg-profile__scroll::-webkit-scrollbar { display: none; }
.mg-profile__scroll:focus-visible { outline: 2px solid var(--pf-accent); outline-offset: 2px; border-radius: 4px; }

/* 본문 한 장의 폭 — 넓은 화면에서도 가운데에 모이도록 */
.mg-profile__sheet {
    max-width: 880px;
    margin-inline: auto;
}

/* 본문 머리: 날짜·분류 + 수정/삭제/글쓰기 */
.mg-profile__bodyhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--mg-space-2);
    padding-bottom: var(--mg-space-2);
    border-bottom: 1px solid var(--pf-card-border);
}
.mg-profile__bodyhead-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pf-muted);
}
.mg-profile__bodyhead-actions { display: flex; flex-wrap: wrap; gap: var(--mg-space-1); }
.mg-profile__post-cat { color: var(--pf-accent); font-weight: 600; }

.mg-profile__write {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--mg-radius-button);
    border: 1px solid var(--pf-accent);
    color: var(--pf-accent);
    font-size: 12px;
    letter-spacing: .08em;
    text-decoration: none;
}
.mg-profile__write:hover { background: var(--pf-accent); color: var(--pf-profile-text); }
.mg-profile__write--quiet { border-color: var(--pf-card-border); color: var(--pf-muted); }
.mg-profile__write--quiet:hover { border-color: var(--pf-accent); background: transparent; color: var(--pf-accent); }
.mg-profile__write--danger:hover { border-color: var(--error-color, #d92d20); color: var(--error-color, #d92d20); }

.mg-profile__empty {
    padding: var(--mg-space-6) 0;
    text-align: center;
    color: var(--pf-muted);
}

/* 선택한 글 한 편 (제목은 좌측 탭에만 보인다)
   보이기/숨기기는 반드시 클래스로 한다. default.css.php에 `article, section … {display:block}`
   규칙이 있어서, 작성자 CSS가 브라우저 기본 [hidden]{display:none}을 이겨 hidden 속성만으로는
   글이 숨겨지지 않는다(모든 글이 한꺼번에 보이던 버그). */
.mg-profile__post { display: none; padding-bottom: var(--mg-space-6); }
.mg-profile__post.is-active { display: block; }

.mg-profile__post-content {
    margin-top: var(--mg-space-3);
    font-size: var(--content-font-size, 15px);
    line-height: 1.85;
    color: var(--content-font-color, #222);
    overflow-wrap: anywhere;
}
.mg-profile__post-content img,
.mg-profile__post-content video,
.mg-profile__post-content iframe { max-width: 100%; height: auto; }
.mg-profile__post-content img { border-radius: 12px; }
.mg-profile__post-media { display: block; margin-top: var(--mg-space-2); }
/* 에디터에서 {이미지:N}으로 자리를 잡은 사진 — 문단 정렬(가운데/오른쪽)을 따르도록 인라인 블록 */
.mg-profile__post-img { display: inline-block; vertical-align: top; }

.mg-profile__post-locked { margin-top: var(--mg-space-3); color: var(--pf-muted); font-style: italic; }

/* ===================================================================
   우측 카드 열 — 종류별 카드가 세로로 살짝씩 기울어져 쌓인다.
   카드 사이 간격은 스킨 설정에서 정하고(--pf-deck-gap, 음수면 겹침), 마우스를 올린 카드는 앞으로 올라온다.
   카드가 많아 화면을 넘으면 카드 열만 따로 스크롤된다.
   =================================================================== */
.mg-profile__deck {
    grid-column: 3;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    scrollbar-width: none;
    /* 기울어진 모서리·그림자·테이프가 스크롤 영역에 잘리지 않도록 안쪽 여백 */
    padding: 18px 16px 40px;
}
.mg-profile__deck::-webkit-scrollbar { display: none; }

.mg-pcard {
    --pf-tilt: 0deg;
    --pf-tilt-dir: 1;
    /* 카드 색: 설정에서 카드마다 정한 색(--pf-card-bg/-fg, 인라인) → 없으면 종류별 기본색(--pf-type-*).
       카드 안의 옅은 선·면은 전부 --pf-fg에서 투명도만 빼서 어떤 색에서도 어울리게 한다 */
    --pf-type-bg: var(--pf-paper);
    --pf-type-fg: var(--pf-ink);
    --pf-bg: var(--pf-card-bg, var(--pf-type-bg));
    --pf-fg: var(--pf-card-fg, var(--pf-type-fg));
    position: relative;
    display: block;
    flex: none;
    margin: 0;
    padding: var(--mg-space-3);
    background: var(--pf-bg);
    color: var(--pf-fg);
    border: 1px solid var(--pf-card-border);
    border-radius: 3px;
    box-shadow: var(--pf-paper-shadow);
    text-decoration: none;
    transform: rotate(calc(var(--pf-tilt) * var(--pf-tilt-dir)));
    transition: transform 300ms var(--mg-ease), box-shadow 300ms var(--mg-ease);
}
.mg-pcard + .mg-pcard { margin-top: var(--pf-deck-gap, 14px); }
.mg-pcard:nth-child(even) { --pf-tilt-dir: -1; }
.mg-pcard:hover,
.mg-pcard:focus-within {
    z-index: 5;
    transform: translateY(-6px) rotate(calc(var(--pf-tilt) * var(--pf-tilt-dir) * .3));
    box-shadow: 0 18px 40px -8px rgba(0, 0, 0, .18), 0 6px 14px -6px rgba(0, 0, 0, .08);
}
a.mg-pcard { color: var(--pf-fg); }
a.mg-pcard:hover { color: var(--pf-fg); }

/* 카드 제목 — 사이트 공통 h1~h6 색을 끊고 카드 글자색을 따른다 */
.mg-profile .mg-pcard__title {
    display: flex;
    align-items: center;
    gap: var(--mg-space-1);
    color: inherit;
    font-family: var(--title-font-family, inherit);
    font-size: 19px;
    font-style: italic;
    font-weight: 500;
    line-height: 1.3;
    word-break: keep-all;
}
.mg-pcard__text { font-size: 12.5px; line-height: 1.65; opacity: .85; overflow-wrap: anywhere; }

/* --- 텍스트: 테이프 붙은 메모지 --- */
.mg-pcard--text {
    --pf-tilt: 2.5deg;
    --pf-type-bg: color-mix(in srgb, var(--pf-accent) 22%, var(--pf-paper));
}
.mg-pcard--text .mg-pcard__title { justify-content: space-between; margin-bottom: 10px; }
.mg-pcard--text .mg-pcard__title-icon { order: 2; font-size: 20px; font-style: normal; opacity: .8; }
.mg-pcard__tape {
    position: absolute;
    top: -11px;
    left: 50%;
    width: 76px;
    height: 22px;
    transform: translateX(-50%) rotate(-2deg);
    background: rgb(from var(--pf-paper) r g b / 55%);
    border: 1px solid rgb(from var(--pf-fg) r g b / 8%);
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
}

/* --- 링크: 아이콘 원 + 제목/설명 + 화살표가 있는 티켓 --- */
.mg-pcard--link {
    --pf-tilt: 2deg;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.mg-pcard__icon {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgb(from var(--pf-fg) r g b / 14%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--pf-accent);
}
.mg-pcard__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mg-pcard--link .mg-pcard__title {
    font-family: var(--title-font-family, inherit);
    font-size: 17px;
    font-style: italic;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.mg-pcard__arrow {
    flex: none;
    align-self: center;
    font-size: 14px;
    opacity: .55;
    transition: transform 200ms var(--mg-ease), opacity 200ms var(--mg-ease);
}
a.mg-pcard--link:hover .mg-pcard__arrow { transform: translateX(3px); opacity: 1; color: var(--pf-accent); }

/* --- D-DAY: 글자색과 종이색을 뒤집은 진한 카드 --- */
.mg-pcard--dday {
    --pf-tilt: 2.5deg;
    --pf-type-bg: var(--pf-ink);
    --pf-type-fg: var(--pf-paper);
    border-color: transparent;
}
.mg-profile .mg-pcard--dday .mg-pcard__title {
    font-family: var(--content-font-family, inherit);
    font-size: 10px;
    font-style: normal;
    letter-spacing: .2em;
    text-transform: uppercase;
    opacity: .7;
}
.mg-pcard__count {
    margin: 10px 0 14px;
    font-family: var(--title-font-family, inherit);
    font-size: 40px;
    font-style: italic;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.mg-pcard__meta {
    padding-top: 12px;
    border-top: 1px solid rgb(from var(--pf-fg) r g b / 22%);
    font-size: 11px;
    letter-spacing: .08em;
    font-variant-numeric: tabular-nums;
    opacity: .85;
}
.mg-pcard--dday .mg-pcard__text { margin-top: 10px; }

/* --- 달력 --- */
.mg-pcard--calendar { --pf-tilt: 1.5deg; padding: 20px; }
.mg-pcard--calendar .mg-pcard__title { margin-bottom: 10px; font-size: 17px; }
.mg-pcard__calhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.mg-pcard__callabel {
    font-family: var(--title-font-family, inherit);
    font-size: 18px;
    font-style: italic;
    font-variant-numeric: tabular-nums;
}
.mg-pcard__calnav {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 11px;
    cursor: pointer;
    transition: background 200ms var(--mg-ease);
}
.mg-pcard__calnav:hover { background: rgb(from var(--pf-fg) r g b / 8%); }
.mg-pcard__weekdays,
.mg-pcard__calgrid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
    text-align: center;
}
.mg-pcard__weekdays { margin-bottom: 4px; font-size: 10px; letter-spacing: .06em; opacity: .55; }
.mg-pcard__weekdays span:first-child { color: var(--error-color, #d92d20); opacity: 1; }
.mg-pcard__day {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.mg-pcard__day.is-today { background: var(--pf-accent); color: var(--pf-profile-text); font-weight: 700; }
button.mg-pcard__day { cursor: pointer; transition: background 200ms var(--mg-ease); }
button.mg-pcard__day:hover { background: rgb(from var(--pf-accent) r g b / 16%); }
button.mg-pcard__day.is-today:hover { background: var(--pf-accent); }
.mg-pcard__day.is-marked::after {
    content: "";
    position: absolute;
    bottom: 3px;
    left: 50%;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%;
    background: currentColor;
}
.mg-pcard__day.is-marked:not(.is-today)::after { background: var(--pf-accent); }

/* --- 이미지 / 슬라이드쇼: 아래 여백이 넓은 폴라로이드 --- */
.mg-pcard--image,
.mg-pcard--slides { --pf-tilt: 3deg; padding: 10px 10px 14px; }
/* --pf-tilt는 종류별 "기울기 크기"만 정한다(항상 양수). 방향은 쌓인 순서(홀/짝)가 정해서
   어떤 종류가 연달아 와도 좌우로 번갈아 기운다. */
.mg-pcard__photo {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: rgb(from var(--pf-fg) r g b / 8%);
}
.mg-pcard__stage { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: rgb(from var(--pf-fg) r g b / 8%); }
/* 슬라이드(슬라이드쇼·D-DAY 슬라이드): 모든 장을 한 칸에 겹쳐 두고 보이는 장만 제자리에,
   나머지는 옆으로 비켜 둔다. 넘길 때 나가는 장과 들어오는 장이 나란히 옆으로 밀린다
   (어느 쪽으로 밀릴지는 list.skin.php가 장마다 정한다) */
.mg-pcard__stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    touch-action: pan-y;
    cursor: grab;
}
.mg-pcard__stage:active { cursor: grabbing; }
.mg-pcard__stage > .mg-pcard__slide {
    grid-area: 1 / 1;
    min-width: 0;
    transform: translateX(100%);
    transition: transform 560ms cubic-bezier(.65, 0, .35, 1);
}
.mg-pcard__stage > .mg-pcard__slide.is-active { transform: translateX(0); }
.mg-pcard__stage .mg-pcard__photo { -webkit-user-drag: none; user-select: none; }
.mg-pcard__caption {
    margin-top: 12px;
    font-family: var(--title-font-family, inherit);
    font-size: 14px;
    font-style: italic;
    line-height: 1.4;
    text-align: center;
    opacity: .8;
    overflow-wrap: anywhere;
}
.mg-pcard__dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.mg-pcard__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 1px solid rgb(from var(--pf-fg) r g b / 40%);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: background 200ms var(--mg-ease), border-color 200ms var(--mg-ease);
}
.mg-pcard__dot.is-active { background: var(--pf-accent); border-color: var(--pf-accent); }
/* 점은 작지만 누르는 영역은 넉넉하게 */
.mg-pcard__dot { position: relative; }
.mg-pcard__dot::before { content: ""; position: absolute; inset: -8px; }

/* --- D-DAY 슬라이드: D-DAY 한 장씩 옆으로 넘어간다. 장마다 색 면을 가질 수 있고
   (없으면 카드색), 머리글·점은 지금 장의 글자색(--pf-dots-fg)을 따라 바뀐다 --- */
.mg-pcard--ddays { padding: 0; overflow: hidden; }
.mg-pcard--ddays .mg-pcard__stage { aspect-ratio: auto; background: none; }
.mg-pcard__dslide {
    padding: var(--mg-space-3) var(--mg-space-3) 44px;
    background: var(--pf-slide-bg, transparent);
    color: var(--pf-slide-fg, inherit);
}
.mg-pcard--ddays.has-head .mg-pcard__dslide { padding-top: 46px; }
.mg-pcard__ddays-head,
.mg-pcard--ddays .mg-pcard__dots {
    position: absolute;
    left: var(--mg-space-3);
    right: var(--mg-space-3);
    z-index: 1;
    color: var(--pf-dots-fg, var(--pf-fg));
    transition: color 400ms var(--mg-ease);
}
.mg-pcard__ddays-head {
    top: 20px;
    margin: 0;
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    opacity: .7;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mg-pcard--ddays .mg-pcard__dots { bottom: 18px; justify-content: flex-start; margin-top: 0; }
.mg-pcard--ddays .mg-pcard__dot { border-color: currentColor; opacity: .45; }
.mg-pcard--ddays .mg-pcard__dot.is-active { background: currentColor; border-color: currentColor; opacity: 1; }

/* ===== 반응형 ===== */
@media (max-width: 1200px) {
    .mg-profile { --pf-col: 240px; gap: var(--mg-space-4); padding-inline: var(--mg-space-3); }
}

/* 좁은 화면에서는 3열을 고정하면 본문 자리가 거의 없어서, 페이지 전체가 평소처럼 스크롤되고
   (좌측 → 본문 → 카드 순) 탭만 화면 하단의 가로 바로 고정한다. */
@media (max-width: 1024px) {
    .mg-profile {
        display: flex;
        flex-direction: column;
        gap: var(--mg-space-4);
        height: auto;
        min-height: 0;
        overflow: visible;
        padding: var(--mg-space-4) var(--mg-space-3) 120px;
    }
    .mg-profile__side,
    .mg-profile__main,
    .mg-profile__deck { flex: 0 0 auto; width: 100%; }
    .mg-profile__idcard { max-width: 420px; }
    .mg-profile__scroll { overflow: visible; padding-inline: 0; }
    .mg-profile__deck { overflow: visible; max-width: 420px; margin-inline: auto; padding-inline: 8px; }

    /* 탭은 하단에 떠 있는 가로 바. 본문 위에 겹치므로 여기서만 읽기용 바탕을 깐다 */
    .mg-profile__tabs {
        position: fixed;
        left: var(--mg-space-2);
        right: var(--mg-space-2);
        bottom: var(--mg-space-2);
        z-index: 50;
        margin-top: 0;
        flex-direction: row;
        align-items: center;
        gap: var(--mg-space-3);
        overflow-x: auto;
        overflow-y: hidden;
        padding: 12px var(--mg-space-3);
        border: 1px solid var(--pf-card-border);
        border-radius: var(--mg-radius-button);
        background: rgb(from var(--bg-color, #ffffff) r g b / 90%);
        -webkit-backdrop-filter: blur(10px);
                backdrop-filter: blur(10px);
    }
    .mg-profile__tab-label { max-width: 14em; }
    .mg-profile__settings { margin-top: 0; }
}

@media (max-width: 560px) {
    .mg-profile { padding-inline: var(--mg-space-2); }
    .mg-profile__idcard { max-width: none; }
}

/* ===================================================================
   모션 — 피드백·연속성 중심, 이동은 transform만 쓴다.
   · 탭 전환(새로고침 없음): 지금 글이 먼저 사라진 뒤, 머리줄은 제자리에서 나타나고 본문만 살짝 떠오른다
   · 프로필 태그: 끈 구멍에 매달린 채 둥실둥실 떠 있다 (화면 밖이면 멈춤)
   · 첫 방문 1회: 태그가 끈 구멍을 축으로 흔들리다 멈춘 뒤 떠오르기 시작한다
   · 태그에 마우스를 올린 동안만: 사진 점선 링이 천천히 돈다
   · 우측 카드: 올리면 기울기가 풀리며 앞으로 올라온다 / 슬라이드는 옆으로 밀려 넘어간다
   · 탭·버튼: 짧은 미리보기/누름 피드백
   =================================================================== */

/* --- 탭 전환: 두 글이 한 화면에 겹치지 않도록 차례로 ---
   1) 지금 글이 120ms 동안 사라진다(.is-leaving — list.skin.php의 LEAVE_MS와 같게)
   2) 새 글: 머리줄(날짜·버튼)은 움직이지 않고 제자리에서 나타나기만, 본문만 살짝 떠오른다 */
.mg-profile__post.is-leaving { opacity: 0; transition: opacity 120ms cubic-bezier(.4, 0, 1, 1); }
.mg-profile__post.is-entering .mg-profile__bodyhead { animation: pf-fade-in 200ms ease-out both; }
.mg-profile__post.is-entering .mg-profile__post-content,
.mg-profile__post.is-entering .mg-profile__post-locked { animation: pf-body-in 320ms cubic-bezier(.16, 1, .3, 1) 60ms both; }
@keyframes pf-fade-in { from { opacity: 0; } }
@keyframes pf-body-in { from { opacity: 0; transform: translateY(12px); } }

/* --- 프로필 태그: 둥실둥실 (참고 디자인의 float — 6s, 10px, -1°↔0°) ---
   축은 끈 구멍 중심(상단 14px + 반지름 9px)이라 매달린 태그처럼 흔들린다 */
.mg-profile__idcard {
    transform-origin: 50% 23px;
    animation: pf-float 6s ease-in-out infinite;
}
.mg-profile__idcard.is-offscreen { animation-play-state: paused; }
@keyframes pf-float {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50%      { transform: translateY(-10px) rotate(0deg); }
}

/* --- 첫 방문 1회: 감쇠 진자로 자리 잡은 뒤 float가 이어받는다.
   흔들림이 목록 뒤쪽에 있어 재생되는 동안 float를 덮고, float 첫 프레임(-1°)에서 끝난다 --- */
.mg-profile.is-first-visit .mg-profile__idcard {
    animation: pf-float 6s ease-in-out 800ms infinite, pf-tag-settle 800ms cubic-bezier(.33, 0, .2, 1);
}
@keyframes pf-tag-settle {
    0%   { transform: rotate(-6deg); }
    30%  { transform: rotate(3deg); }
    55%  { transform: rotate(-1.8deg); }
    75%  { transform: rotate(.2deg); }
    90%  { transform: rotate(-1.2deg); }
    100% { transform: rotate(-1deg); }
}

/* --- 사진 점선 링: 멈춰 있다가 머무는 동안만 회전, 떠나면 그 자리에서 멈춘다 --- */
.mg-profile__frame-ring { animation: pf-ring-spin 16s linear infinite paused; }
@media (hover: hover) {
    .mg-profile__idcard:hover .mg-profile__frame-ring { animation-play-state: running; }
}
@keyframes pf-ring-spin { to { transform: rotate(360deg); } }

/* --- 탭: 올리면 점이 흐리게 미리 보이고, 활성 탭 점은 제 크기로 자리 잡는다 --- */
.mg-profile__tab-dot {
    transform: scale(.4);
    transition: opacity 200ms var(--mg-ease), transform 200ms var(--mg-ease);
}
.mg-profile__tab:hover .mg-profile__tab-dot { opacity: .45; transform: scale(.75); }
.mg-profile__tab.is-active .mg-profile__tab-dot { opacity: 1; transform: scale(1); }

/* --- 누름 피드백 (100~150ms) --- */
.mg-profile__write {
    transition: background var(--mg-duration) var(--mg-ease), color var(--mg-duration) var(--mg-ease), border-color var(--mg-duration) var(--mg-ease), transform 120ms var(--mg-ease);
}
.mg-profile__write:active { transform: scale(.94); }

/* --- 첫 방문 1회: 카드가 한 장씩 책상 위로 내려앉는다 ---
   태그가 끈에 매달려 흔들리며 자리 잡는 동안, 오른쪽 카드가 위에서부터 차례로 놓인다(한 장면).
   공중에 있을 때는 더 기울고 그림자가 크고 멀다가, 닿는 순간 제 기울기·그림자로 줄어든다.
   세 열이 한 화면에 다 보이는 넓은 화면에서만(좁은 화면에서는 카드가 첫 화면 밖이다).
   backwards 채움이라 끝난 뒤에는 원래 기울기와 마우스 올림 효과가 그대로 이어진다. */
@media (min-width: 1025px) {
    .mg-profile.is-first-visit .mg-pcard {
        animation: pf-deal 560ms cubic-bezier(.16, 1, .3, 1) backwards;
        animation-delay: calc(280ms + var(--pf-deal-i, 0) * 70ms);
    }
    .mg-profile.is-first-visit .mg-pcard:nth-child(2) { --pf-deal-i: 1; }
    .mg-profile.is-first-visit .mg-pcard:nth-child(3) { --pf-deal-i: 2; }
    .mg-profile.is-first-visit .mg-pcard:nth-child(4) { --pf-deal-i: 3; }
    .mg-profile.is-first-visit .mg-pcard:nth-child(5) { --pf-deal-i: 4; }
    .mg-profile.is-first-visit .mg-pcard:nth-child(n+6) { --pf-deal-i: 5; }
}
@keyframes pf-deal {
    from {
        opacity: 0;
        transform: translate(20px, -30px) rotate(calc(var(--pf-tilt) * var(--pf-tilt-dir) * 3 + 2deg));
        box-shadow: 0 34px 60px -12px rgba(0, 0, 0, .24);
    }
    55% { opacity: 1; }
}

/* --- 달력: 넘긴 방향에서 새 달이 밀려 들어온다 (나가는 달은 바로 바뀜 — 퇴장은 입장보다 짧게) --- */
.mg-pcard__calgrid.is-from-next { animation: pf-cal-next 260ms cubic-bezier(.16, 1, .3, 1); }
.mg-pcard__calgrid.is-from-prev { animation: pf-cal-prev 260ms cubic-bezier(.16, 1, .3, 1); }
.mg-pcard__callabel { display: inline-block; }
.mg-pcard__callabel.is-from-next { animation: pf-cal-next 200ms cubic-bezier(.16, 1, .3, 1); }
.mg-pcard__callabel.is-from-prev { animation: pf-cal-prev 200ms cubic-bezier(.16, 1, .3, 1); }
@keyframes pf-cal-next { from { opacity: 0; transform: translateX(14px); } }
@keyframes pf-cal-prev { from { opacity: 0; transform: translateX(-14px); } }

/* --- 슬라이드: 다음 장까지 남은 시간 막대 (list.skin.php가 붙인다) ---
   넘어가는 동안만 차오르고, 멈추면 그 자리에서 멈춘 채 흐려진다 */
.mg-pcard__progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    height: 2px;
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms var(--mg-ease);
}
.mg-pcard--slides .mg-pcard__progress { background: rgba(0, 0, 0, .2); }
.mg-pcard--ddays .mg-pcard__progress { color: var(--pf-dots-fg, var(--pf-fg)); }
.mg-pcard__progress > span {
    display: block;
    height: 100%;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: 0 50%;
    animation: pf-progress var(--pf-interval, 4s) linear forwards paused;
}
[data-pf-slider].is-playing .mg-pcard__progress { opacity: .8; }
[data-pf-slider].is-playing .mg-pcard__progress > span { animation-play-state: running; }
@keyframes pf-progress { to { transform: scaleX(1); } }

/* --- 카드 안 작은 버튼 누름 피드백 (120ms) --- */
.mg-pcard__calnav { transition: background 200ms var(--mg-ease), transform 120ms var(--mg-ease); }
button.mg-pcard__day { transition: background 200ms var(--mg-ease), transform 120ms var(--mg-ease); }
.mg-pcard__dot { transition: background 200ms var(--mg-ease), border-color 200ms var(--mg-ease), opacity 200ms var(--mg-ease), transform 120ms var(--mg-ease); }
.mg-pcard__calnav:active,
button.mg-pcard__day:active { transform: scale(.88); }
.mg-pcard__dot:active { transform: scale(.75); }

/* --- 키보드 포커스: 브라우저 기본 링 대신 스킨 포인트 색 --- */
.mg-profile a:focus-visible,
.mg-profile button:focus-visible,
.mg-profile-view a:focus-visible,
.mg-profile-view button:focus-visible { outline: 2px solid var(--pf-accent); outline-offset: 3px; }

/* --- 동작 줄이기: 떠오름·흔들림·회전·이동은 빼고, 의미 있는 투명도·색 피드백은 남긴다
   (탭 전환은 View Transition 없이 바로, 슬라이드쇼는 자동 넘김 없이 점 버튼으로만) --- */
@media (prefers-reduced-motion: reduce) {
    .mg-profile__idcard,
    .mg-profile.is-first-visit .mg-profile__idcard { animation: none; }
    .mg-profile__frame-ring { animation: none; }
    .mg-profile__tab-dot,
    .mg-profile__tab:hover .mg-profile__tab-dot,
    .mg-profile__tab.is-active .mg-profile__tab-dot { transform: none; }
    .mg-profile__write:active { transform: none; }
    .mg-pcard,
    .mg-pcard:hover,
    .mg-pcard:focus-within { transition: box-shadow 200ms ease; transform: rotate(calc(var(--pf-tilt) * var(--pf-tilt-dir))); }
    .mg-pcard__stage > .mg-pcard__slide { transition: none; }
    .mg-profile__post.is-leaving { transition: none; }
    .mg-profile__post.is-entering .mg-profile__bodyhead,
    .mg-profile__post.is-entering .mg-profile__post-content,
    .mg-profile__post.is-entering .mg-profile__post-locked { animation: none; }
    .mg-profile.is-first-visit .mg-pcard { animation: none; }
    /* 달은 움직이지 않고 바뀌었다는 것만 옅게 알려 준다 */
    .mg-pcard__calgrid.is-from-next,
    .mg-pcard__calgrid.is-from-prev,
    .mg-pcard__callabel.is-from-next,
    .mg-pcard__callabel.is-from-prev { animation: pf-fade-in 200ms ease-out; }
    .mg-pcard__calnav:active,
    button.mg-pcard__day:active,
    .mg-pcard__dot:active { transform: none; }
}

/* ===================================================================
   글쓰기 (write.skin.php) 패널 — 면 없이 테두리만
   =================================================================== */
.mg-profile-view {
    max-width: min(900px, 94vw);
    margin: var(--mg-space-4) auto;
}

.mg-profile-view__panel {
    background: transparent;
    border: 1px solid var(--pf-card-border);
    border-radius: var(--mg-radius-modal);
    padding: var(--mg-space-4);
}

.mg-profile-view__header {
    display: flex;
    align-items: center;
    gap: var(--mg-space-2);
    margin-bottom: var(--mg-space-2);
}
.mg-profile-view__header h2 {
    flex: 1;
    font-family: var(--title-font-family, inherit);
    font-size: var(--title-font-size, 22px);
    color: var(--title-font-color, inherit);
}
.mg-profile-view__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgb(from var(--pf-accent) r g b / 10%);
    color: var(--content-font-color, #222);
    text-decoration: none;
    transition: background var(--mg-duration) var(--mg-ease);
}
.mg-profile-view__back:hover { background: var(--pf-accent); color: var(--pf-profile-text); }

.mg-profile-write__form { display: flex; flex-direction: column; gap: var(--mg-space-2); }
.mg-profile-write__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mg-profile-write__row { display: flex; flex-wrap: wrap; gap: var(--mg-space-2); }
.mg-profile-write__row > .mg-profile-write__field { flex: 1 1 200px; }
.mg-profile-write__field > label,
.mg-profile-write__label {
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pf-muted);
}
.mg-profile-write__input {
    width: 100%;
    padding: 10px 12px;
    background: var(--form-bg-color, transparent);
    color: var(--form-text-color, inherit);
    border: 1px solid var(--pf-card-border);
    border-radius: 10px;
    font-size: 14px;
}
.mg-profile-write__check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; align-self: flex-end; padding-bottom: 10px; }
.mg-profile-write__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--mg-space-1);
    margin-top: var(--mg-space-1);
}
.mg-profile-write__actions .btn_cancel,
.mg-profile-write__actions .btn_submit {
    border-radius: var(--mg-radius-button);
    padding: 10px 24px;
    transition: background var(--mg-duration) var(--mg-ease), transform 120ms var(--mg-ease);
}
.mg-profile-write__actions .btn_submit { background: var(--pf-accent); color: var(--pf-profile-text); border: 0; }
.mg-profile-write__actions .btn_cancel:active,
.mg-profile-write__actions .btn_submit:active { transform: scale(.96); }
@media (prefers-reduced-motion: reduce) {
    .mg-profile-write__actions .btn_cancel:active,
    .mg-profile-write__actions .btn_submit:active { transform: none; }
}