@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);

    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 {
    display: flex;
    align-items: flex-start;
    gap: var(--mg-space-6);
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--mg-space-4) var(--mg-space-3) var(--mg-space-6);
}

/* ===================================================================
   좌측 사이드 — 카드가 아니다(배경·테두리·그림자 없음).
   브랜드 → 프로필 카드. 탭과 스킨 설정은 화면 좌측 하단에 고정된다.
   =================================================================== */
.mg-profile__side {
    flex: 0 0 250px;
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-3);
}

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

.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;
}

/* 탭 = 글 제목. 화면 좌측 하단 고정 (left는 list.skin.php가 사이드 왼쪽 끝에 맞춰 넣고,
   스크립트가 돌기 전에는 아래 계산식으로 근사한다) */
.mg-profile__tabs {
    position: fixed;
    left: max(var(--mg-space-3), calc((100vw - 1280px) / 2 + var(--mg-space-3)));
    bottom: var(--mg-space-4);
    z-index: 50;
    width: 250px;
    max-height: 45vh;
    overflow-y: auto;
    scrollbar-width: none;
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-2);
}
.mg-profile__tabs::-webkit-scrollbar { display: none; }

.mg-profile__tab {
    display: flex;
    align-items: center;
    gap: 10px;
    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 {
    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;
    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; }

/* ===================================================================
   우측 본문 — 상단 카드(최대 3개) + 선택한 탭의 글
   =================================================================== */
.mg-profile__main { flex: 1; min-width: 0; }

.mg-profile__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--mg-space-2);
    margin-bottom: var(--mg-space-6);
}

/* 카드는 면 없이 테두리만 */
.mg-profile__card {
    display: block;
    padding: var(--mg-space-3);
    background: transparent;
    border: 1px solid var(--pf-card-border);
    border-radius: var(--mg-radius-card);
    color: inherit;
    text-decoration: inherit;
    transition: transform var(--mg-duration) var(--mg-ease), border-color var(--mg-duration) var(--mg-ease);
}
a.mg-profile__card:hover { transform: translateY(-3px); border-color: var(--pf-accent); color: inherit; }
.mg-profile__card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    margin-bottom: var(--mg-space-2);
    font-size: 14px;
    background: rgb(from var(--pf-accent) r g b / 12%);
    color: var(--pf-accent);
}
.mg-profile__card--1 .mg-profile__card-icon { background: rgb(from var(--primary-color, #7b6bff) r g b / 12%); color: var(--primary-color); }
.mg-profile__card--2 .mg-profile__card-icon { background: rgb(from var(--content-font-color, #222) r g b / 8%); color: var(--content-font-color, #222); }
.mg-profile .mg-profile__card h3 { color: inherit; font-family: var(--title-font-family, inherit); font-size: 17px; margin-bottom: 6px; }
.mg-profile__card p { font-size: 12px; color: var(--pf-muted); line-height: 1.6; }

/* 본문 머리: 날짜·분류 + 수정/글쓰기 */
.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; 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__empty {
    padding: var(--mg-space-6) 0;
    text-align: center;
    color: var(--pf-muted);
}

/* 선택한 글 한 편 */
.mg-profile .mg-profile__post-title {
    margin: var(--mg-space-4) 0 var(--mg-space-3);
    font-family: var(--title-font-family, inherit);
    font-size: clamp(26px, 3vw, 34px);
    line-height: 1.25;
    color: var(--title-font-color, inherit);
    word-break: keep-all;
}

.mg-profile__post-content {
    max-width: 72ch;
    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); }

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

.mg-profile__post-foot {
    display: flex;
    gap: var(--mg-space-2);
    margin-top: var(--mg-space-4);
    padding-top: var(--mg-space-2);
    border-top: 1px solid var(--pf-card-border);
    font-size: 12px;
}
.mg-profile__post-foot a { color: var(--pf-muted); text-decoration: none; }
.mg-profile__post-foot a:hover { color: var(--pf-accent); }

/* ===== 반응형 ===== */
@media (max-width: 960px) {
    /* 고정 탭이 하단 바가 되므로 마지막 내용이 가려지지 않게 아래 여백을 준다 */
    .mg-profile { flex-direction: column; gap: var(--mg-space-4); padding-bottom: 120px; }
    /* 세로 배치에서는 flex-basis가 높이로 해석되므로 반드시 auto로 풀어준다 */
    .mg-profile__side,
    .mg-profile__main { flex: 0 0 auto; width: 100%; }
    .mg-profile__idcard { max-width: 420px; }

    /* 좁은 화면: 탭은 하단에 떠 있는 가로 바. 본문 위에 겹치므로 여기서만 읽기용 바탕을 깐다 */
    .mg-profile__tabs {
        left: var(--mg-space-2);
        right: var(--mg-space-2);
        bottom: var(--mg-space-2);
        width: auto;
        max-height: none;
        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 { flex: 0 0 auto; }
    .mg-profile__tab-label { max-width: 14em; }
    .mg-profile__settings { margin-top: 0; flex: 0 0 auto; }
}

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

/* ===================================================================
   모션 — 피드백·연속성 중심, 이동은 transform만 쓴다.
   · 탭 이동: 사이드·태그·탭은 제자리, 본문만 바뀌어 들어온다 (문서 간 View Transition)
   · 프로필 태그: 끈 구멍에 매달린 채 둥실둥실 떠 있다 (화면 밖이면 멈춤 — list.skin.php)
   · 첫 방문 1회: 태그가 끈 구멍을 축으로 흔들리다 멈춘 뒤 떠오르기 시작한다
   · 태그에 마우스를 올린 동안만: 사진 점선 링이 천천히 돈다
   · 탭·버튼: 짧은 미리보기/누름 피드백
   =================================================================== */

/* --- 탭 이동: 지원 브라우저에서만 동작, 미지원이면 평소처럼 이동 --- */
@view-transition { navigation: auto; }

.mg-profile__side { view-transition-name: pf-side; }
.mg-profile__tabs { view-transition-name: pf-tabs; }
.mg-profile__main { view-transition-name: pf-main; }

/* 사이트 나머지(헤더 등)는 크로스페이드하지 않고 그대로 교체 */
::view-transition-old(root),
::view-transition-new(root) { animation: none; }

/* 사이드·태그·탭은 움직이지 않고 즉시 새 문서로 바꿔 끼운다 */
::view-transition-group(pf-side),
::view-transition-group(pf-tabs) { animation: none; }
::view-transition-old(pf-side),
::view-transition-old(pf-tabs) { display: none; }
::view-transition-new(pf-side),
::view-transition-new(pf-tabs) { animation: none; }

/* 본문만: 나갈 때는 빠르게 사라지고, 들어올 때는 조금 더 길게 떠오른다 */
::view-transition-group(pf-main) { animation: none; }
::view-transition-old(pf-main) { animation: pf-main-out 140ms cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(pf-main) { animation: pf-main-in 280ms cubic-bezier(.16, 1, .3, 1) both; }
@keyframes pf-main-out { to { opacity: 0; } }
@keyframes pf-main-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes pf-fade-in { from { opacity: 0; } }

/* --- 프로필 태그: 둥실둥실 (참고 디자인의 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); }
a.mg-profile__card:active { transform: translateY(-1px) scale(.985); transition-duration: 120ms; }

/* --- 키보드 포커스: 브라우저 기본 링 대신 스킨 포인트 색 --- */
.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; }

/* --- 동작 줄이기: 떠오름·흔들림·회전·이동은 빼고, 의미 있는 투명도·색 피드백은 남긴다 --- */
@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,
    a.mg-profile__card:hover,
    a.mg-profile__card:active { transform: none; }
    ::view-transition-new(pf-main) { animation: pf-fade-in 200ms ease-out both; }
}

/* ===================================================================
   상세보기 (view.skin.php) · 글쓰기 (write.skin.php) 공통 패널 — 면 없이 테두리만
   =================================================================== */
.mg-profile-view {
    max-width: min(760px, 92vw);
    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,
.mg-profile-view__tools a {
    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,
.mg-profile-view__tools a:hover { background: var(--pf-accent); color: var(--pf-profile-text); }
.mg-profile-view__tools { display: flex; gap: 6px; }

.mg-profile-view__meta {
    display: flex;
    align-items: center;
    gap: var(--mg-space-1);
    font-size: 12px;
    color: var(--pf-muted);
    padding-bottom: var(--mg-space-2);
    margin-bottom: var(--mg-space-2);
    border-bottom: 1px solid var(--pf-card-border);
}

.mg-profile-view__content {
    line-height: 1.8;
    font-size: var(--content-font-size, 15px);
    overflow-wrap: anywhere;
}
.mg-profile-view__content img { max-width: 100%; border-radius: var(--mg-radius-card); }

.mg-profile-view__vote {
    display: flex;
    justify-content: center;
    gap: var(--mg-space-2);
    margin-top: var(--mg-space-3);
}
.mg-profile-view__vote a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--mg-radius-button);
    background: rgb(from var(--pf-accent) r g b / 10%);
    color: var(--content-font-color, #222);
    text-decoration: none;
    font-size: 13px;
}
.mg-profile-view__vote a:hover { background: var(--pf-accent); color: var(--pf-profile-text); }

/* ----- 글쓰기 폼 (본문·첨부 영역은 코어 write_file.common.php + default.css.php 스타일) ----- */
.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; }
}