/* Account entry and all signed-in MY screens share this stylesheet. */
.auth-main {
    display: flex;
    max-width: none;
    align-items: flex-start;
    justify-content: center;
}

/* Account entry and the narrow my-page layout share this content width. */
.account-content { width: 100%; max-width: var(--container-sm); min-width: 0; }
.auth-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.auth-header { margin-bottom: var(--space-8); }
.auth-header .page-header__title,
.auth-header .page-header__description { overflow-wrap: anywhere; }
.auth-panel.card { padding: clamp(var(--space-5), var(--gutter), var(--space-8)); }
.auth-panel > .alert:first-child { margin-top: 0; }
.auth-panel > .auth-form:first-child { margin-top: 0; }
.auth-panel .auth-form { gap: var(--space-5); }
.auth-note { margin-top: var(--space-6); color: var(--color-text-secondary); font-size: var(--font-size-sm); text-align: center; }

.auth-verification { min-width: 0; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-soft); padding: var(--space-4); }
.auth-verification > .btn { margin-top: var(--space-4); }
.auth-verification__status { min-height: calc(1em * var(--line-height-body)); margin-top: var(--space-2); color: var(--color-text-secondary); font-size: var(--font-size-sm); overflow-wrap: anywhere; }
.auth-verification__status[data-state="error"] { color: var(--color-danger); }
.auth-verification__status[data-state="success"] { color: var(--color-success); }
/* The page checks the link in the background; the pulsing dot says it is still listening. */
.auth-verification__status[data-state="waiting"] { display: flex; align-items: baseline; gap: var(--space-2); color: var(--color-brand); }
.auth-verification__status[data-state="waiting"]::before { content: ""; flex: none; width: 0.5em; height: 0.5em; border-radius: 50%; background: currentColor; animation: auth-verification-waiting 1.6s ease-in-out infinite; }
.auth-verification__guide { margin-top: var(--space-2); color: var(--color-text-secondary); font-size: var(--font-size-sm); }
@keyframes auth-verification-waiting {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}
/* 메일 인증 링크 결과: 아이콘 · 제목 · 설명 · 로그인 버튼을 가운데로 모은 결과 카드. */
.auth-result.card { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-10) clamp(var(--space-5), var(--gutter), var(--space-10)); text-align: center; }
.auth-result__icon { display: inline-flex; width: var(--control-height-lg); height: var(--control-height-lg); align-items: center; justify-content: center; margin-bottom: var(--space-2); border-radius: var(--radius-pill); background: var(--color-success-soft); color: var(--color-success); font-size: var(--font-size-xl); }
.auth-result--error .auth-result__icon { background: var(--color-danger-soft); color: var(--color-danger); }
.auth-result__title { font-size: var(--font-size-lg); overflow-wrap: anywhere; }
.auth-result__text { max-width: 26rem; color: var(--color-text-secondary); font-size: var(--font-size-sm); line-height: var(--line-height-body); }
.auth-result__action { min-width: 10rem; justify-self: center; margin-top: var(--space-5); }
.auth-actions { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.auth-actions > form { display: grid; }

@media (min-width: 40rem) {
    .auth-form > .btn-block, .auth-actions .btn-block { width: auto; justify-self: end; }
}

/* MY 공통 셸. 탐색과 breakpoint는 모든 서비스에 같이 적용된다. */
.my-shell {
    --my-shell-max-width: calc(var(--container-sm) + var(--gutter) + var(--gutter));
    /* 콘텐츠 카드 안 최상위 그룹(콘텐츠 섹션·폼 그룹·폼 끝) 사이 간격. */
    --my-group-gap: var(--space-16);
    /* 콘텐츠 카드 여백. 위아래는 좌우보다 넓게 둬서 카드 첫 제목·마지막 내용이 테두리에 붙어 보이지 않게 한다. */
    --my-surface-padding-inline: clamp(var(--space-4), var(--gutter), var(--space-6));
    --my-surface-padding-block: clamp(var(--space-7), 4vw, var(--space-10));
    /* 그룹 제목에서 첫 내용(라벨 글자·테두리 상자)까지의 거리. 모든 그룹이 같다. */
    --my-signature-gap: var(--space-5);
    /* surface의 lead(탭·알림·안내)와 본문 사이. lead 끝이 안내 상자면 --alert-gap으로 줄인다. */
    --my-lead-gap: var(--space-8);
    display: flex;
    min-height: 100dvh;
    flex-direction: column;
}
/* MY 바다 배경·헤더 높이·푸터는 공통(common.css .ocean-backdrop--surface·.ocean-header·--header-height·.public-footer)이다. */
.my-ocean { flex: 1 0 auto; }
/* MY 헤더·워크스페이스·공통 푸터는 같은 가로 기준선을 따른다. */
.my-header__inner,
.my-workspace,
.my-shell .public-footer__inner { max-width: var(--my-shell-max-width); margin-inline: auto; }
.my-shell .public-footer__inner { display: grid; }
/* 로고(폰 앱바) | 상단 메뉴(태블릿·PC) | 편지함·프로필 메뉴(모든 폭). 프로필 버튼은 셋째 칸 끝이라 공개 헤더 메뉴 버튼처럼 gutter에 맞는다. */
.my-header__inner { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; min-height: var(--header-height); align-items: center; column-gap: var(--space-4); padding-inline: var(--gutter); }
.my-header__home { color: var(--color-brand); text-decoration: none; }
/* 상단 메뉴: 그룹 이름(TOUR·MY TRAVEL·PRESET)을 가운데에 두고, 펼친 목록은 공통 .header-nav-dropdown이다. 폰은 프로필 메뉴만 쓴다. */
.my-nav { display: none; min-width: 0; grid-column: 2; align-items: center; justify-content: center; gap: var(--space-1); }
.my-header__account { position: relative; grid-column: 3; display: flex; min-width: 0; align-items: center; justify-content: flex-end; gap: var(--space-3); }
.my-workspace { display: grid; width: 100%; align-items: start; justify-items: center; gap: var(--space-8); padding: var(--space-6) var(--gutter) var(--space-16); }
/* MY 패널 모양(페이지 본문 surface). */
.my-page-surface { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-ambient); }
/* MY page = page heading on the ocean background + x-my.page-surface for the content (docs/ui/page-layout-and-buttons.md). */
.my-content { display: flex; flex-direction: column; gap: var(--space-6); }
.my-content > .my-page-heading { margin-bottom: 0; }
/* surface = lead(탭·알림·화면 안내, 서로 --space-4로 붙는다) + 본문(콘텐츠 그룹, --my-group-gap). lead와 본문 사이는 --my-lead-gap. */
.my-page-surface { display: grid; width: 100%; min-width: 0; gap: var(--my-lead-gap); padding: var(--my-surface-padding-block) var(--my-surface-padding-inline); }
.my-page-surface__lead { display: grid; min-width: 0; gap: var(--alert-stack-gap); }
/* 맨 위 링크 탭(page-surface nav) 다음 lead는 탭과 lead 안 항목 사이처럼 --alert-stack-gap으로 붙는다. 그래서 lead 첫 상자의 위 당김도 하지 않는다. */
.my-page-surface__nav { min-width: 0; }
.my-page-surface__nav + .my-page-surface__lead { margin-top: calc(var(--alert-stack-gap) - var(--my-lead-gap)); }
.my-page-surface__body { display: grid; min-width: 0; gap: var(--my-group-gap); }

/* 안내 상자 간격(.form-alert 화면 안내 · .alert 세션 알림·오류). 자리마다 따로 맞추지 않고 이 블록과 토큰만 고친다.
   카드 맨 위 → 좌우 여백과 같게 / 탭 다음·상자끼리 → --alert-stack-gap / 시그니처 제목 다음 → --my-signature-gap(my-forms.css)
   / 상자 다음 내용 → --alert-gap(입력칸이면 위에 라벨 자리가 있어 gap만). 담는 grid·flex의 gap과의 차이만 margin으로 더한다. docs/ui/page-layout-and-buttons.md 1장 */
.my-content .alert { margin: 0; }
/* 카드 맨 위 상자는 테두리가 있어 위아래 여백(--my-surface-padding-block)까지 띄우면 떠 보인다. 좌우 여백과 같은 거리에 둔다. */
.my-page-surface__lead > :is(.alert, .form-alert):first-child { margin-top: calc(var(--my-surface-padding-inline) - var(--my-surface-padding-block)); }
.my-page-surface__nav + .my-page-surface__lead > :is(.alert, .form-alert):first-child { margin-top: 0; }
.my-page-surface__lead > :is(.alert, .form-alert):last-child { margin-bottom: calc(var(--alert-gap) - var(--my-lead-gap)); }
:is(.my-form-section > .form-section__body, .my-list-builder, .my-person-row__panel) > :is(.alert, .form-alert) + :not(.alert, .form-alert, .form-field) { margin-top: calc(var(--alert-gap) - var(--form-stack-gap)); }
.my-content-group__body > :is(.alert, .form-alert) + :is(.alert, .form-alert) { margin-top: calc(var(--alert-stack-gap) - var(--space-6)); }
/* Input and result surfaces of one page stack with the heading rhythm; surfaces never nest. */
.my-surface-stack { display: grid; min-width: 0; gap: var(--space-6); }
/* A form filling the body keeps the group rhythm for its own groups and ending. */
:where(.my-page-surface__body) > form { display: grid; min-width: 0; gap: var(--my-group-gap); }

.my-account { position: relative; min-width: 0; }
/* 프로필 버튼: 누를 자리는 공개 헤더 메뉴 버튼(public.css .mobile-menu__trigger)과 같고, 안에 이름 첫 글자 동그라미를 둔다.
   선 아이콘(편지함)과 같은 선 동그라미로 두면 또 하나의 아이콘(기호)처럼 읽힌다. 사진 아바타처럼 꽉 찬 면(청록 그라데이션 + 흰 글자)으로 두고,
   원은 네모 아이콘보다 작아 보이므로 아이콘 자리(1.5rem)보다 조금 큰 1.75rem으로 높이를 맞춘다. 공통 .my-avatar 크기를 이기도록 trigger 안으로 범위를 좁힌다.
   올리거나 열면 흰 틈 + 옅은 청록 고리가 둘러진다. */
.my-account__trigger { display: flex; width: var(--control-height); height: var(--control-height); align-items: center; justify-content: center; border-radius: var(--radius-pill); list-style: none; cursor: pointer; }
.my-account__trigger > .my-avatar { width: 1.75rem; height: 1.75rem; background: linear-gradient(145deg, var(--color-brand-mid), var(--color-brand)); color: var(--color-surface); font-size: .8125rem; font-weight: var(--font-weight-semibold); line-height: 1; transition: box-shadow var(--duration-fast) var(--ease-standard); }
.my-account[open] .my-account__avatar { box-shadow: 0 0 0 var(--border-width-accent) var(--color-surface), 0 0 0 calc(var(--border-width-accent) * 2) var(--color-brand-light); }
.my-account__trigger::-webkit-details-marker { display: none; }
/* 펼친 메뉴 맨 위 이름·이메일. */
.header-menu__identity { display: grid; flex: 0 0 auto; gap: .125rem; border-bottom: var(--border-width) solid var(--color-border); padding: var(--space-4) var(--space-5); }
.header-menu__identity > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 헤더 편지함 링크: 아이콘을 누르면 편지함으로 바로 간다. 읽지 않은 편지 수는 오른쪽 위 숫자 배지로 보인다. */
.my-header__inbox { position: relative; display: flex; width: var(--control-height); min-height: var(--control-height); align-items: center; justify-content: center; border-radius: var(--radius-pill); color: var(--color-brand); text-decoration: none; }
.my-header__inbox[aria-current="page"] { background: var(--color-brand-soft); }
.my-header__count { position: absolute; top: var(--space-1); right: 0; display: inline-flex; min-width: 1.125rem; height: 1.125rem; align-items: center; justify-content: center; border-radius: var(--radius-pill); background: var(--color-brand); box-shadow: 0 0 0 var(--border-width-accent) var(--color-surface); padding: 0 var(--space-1); color: var(--color-surface); font-size: .6875rem; font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; line-height: 1; }



@media (min-width: 40rem) and (max-width: 47.999rem) {
    .my-shell .public-footer__inner { justify-content: stretch; }
}

/* 폰 앱 화면(48rem 미만, docs/ui/page-layout-and-buttons.md "반응형"): 앱바(뒤로 + 제목 + 편지함·프로필 메뉴) · 양옆을 조금 띄운 흰 시트.
   태블릿·PC는 앱바 제목을 그리지 않는다(display: none). */
.my-appbar { display: none; }
/* 폰 하단 탭바(x-layouts.my, MyMenu::tabs): 앱바에 뒤로가 없는 화면에만 그린다. 태블릿·PC는 상단 메뉴가 맡아 그리지 않는다. */
.my-tabbar { display: none; }
@media (max-width: 47.999rem) {
    .my-shell {
        --my-group-gap: var(--space-10);
        /* 시트를 화면 양옆에서 띄우는 거리. 양옆에 바다가 보여 PC와 같은 떠 있는 카드로 읽힌다(2026-10-29 사용자 확정). */
        --my-sheet-inset: var(--space-2);
        --my-surface-padding-inline: calc(var(--gutter) - var(--my-sheet-inset));
        --my-surface-padding-block: var(--space-6);
        --my-signature-gap: var(--space-4);
        --my-lead-gap: var(--space-6);
    }
    /* 앱바: 제목을 넘긴 화면은 로고 대신 [뒤로] 제목을 둔다. 오른쪽 편지함·프로필 메뉴는 그대로다. */
    .my-header__inner { column-gap: var(--space-2); }
    .my-header__account { gap: 0; }
    .my-header--appbar .my-header__home { display: none; }
    .my-appbar { display: flex; min-width: 0; grid-column: 1 / 3; grid-row: 1; align-items: center; gap: var(--space-1); }
    .my-appbar__back { display: inline-flex; width: var(--control-height); height: var(--control-height); flex: 0 0 auto; align-items: center; justify-content: center; margin-inline-start: calc(var(--space-3) * -1); border-radius: var(--radius-pill); color: var(--color-brand); text-decoration: none; }
    .my-appbar__title { min-width: 0; overflow: hidden; color: var(--color-text); font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-tight); text-overflow: ellipsis; white-space: nowrap; }
    /* 제목 행: breadcrumb·큰 제목·돌아가기는 앱바가 맡고 행동 버튼만 작게 남는다. h1은 화면 읽기용으로 둔다. */
    .my-content { gap: var(--space-3); }
    .my-page-heading { gap: 0; padding-inline: var(--my-surface-padding-inline); }
    .my-page-heading .my-breadcrumb,
    .my-page-actions__back { display: none; }
    .my-page-heading h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
    /* 제목은 앱바가 맡으므로 상태 배지·요약 줄·신호를 한 줄로 이어 둔다. */
    .my-page-heading--subject .my-page-heading__copy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); padding-block: var(--space-1) var(--space-2); }
    .my-page-heading__title { display: contents; }
    .my-page-actions__panel .btn { --button-height: var(--control-height-sm); --button-padding-y: .5rem; --button-padding-x: .875rem; font-size: var(--font-size-sm); }
    /* 본문: 바다 배경 위 흰 시트를 양옆 --my-sheet-inset만큼 띄운다. 모서리·테두리·그림자는 PC 카드 그대로다. */
    .my-workspace { padding: var(--space-2) var(--my-sheet-inset) 0; }
    .my-surface-stack { gap: var(--space-2); }
    /* 시트 맨 위 링크 탭(page-surface nav)은 시트 폭 끝까지 붙인 앱 상단 탭이고, 스크롤해도 앱바 바로 아래에 붙어 있다(시트 높이 안에서).
       붙었을 때 위 둥근 모서리 틈으로 글이 비치지 않게 탭 위쪽을 시트 위 여백까지 흰 바탕으로 채운다. */
    .my-page-surface__nav { position: sticky; z-index: 2; top: var(--header-height); margin: calc(var(--my-surface-padding-block) * -1) calc(var(--my-surface-padding-inline) * -1) 0; border-radius: var(--radius-card) var(--radius-card) 0 0; background: var(--color-surface); padding-top: var(--space-2); }
    .my-page-surface__nav > .my-sub-nav { padding-inline: calc(var(--my-surface-padding-inline) - var(--space-3)); scrollbar-width: none; }
    .my-page-surface__nav > .my-sub-nav::-webkit-scrollbar { display: none; }
    .my-sub-nav > a { display: inline-flex; min-height: var(--control-height); align-items: center; gap: .3em; }
    .my-sub-nav--minor > a { min-height: var(--control-height-sm); }
    /* 상태 필터는 시트 폭 끝까지 붙이지 않고 좌우 여백 안에 둔 알약 줄이다. */
    .my-page-surface__nav > .my-sub-nav--filter { margin: var(--space-2) var(--my-surface-padding-inline); padding-inline: var(--space-1); }
    .my-sub-nav--filter > a { min-height: var(--control-height-sm); }
    /* 화면 안내 접기(app.js): 두 줄로 자르고 오른쪽 아래 "더보기"로 펼친다. 펼친 뒤에는 "접기"가 안내 아래 줄에 선다. */
    .form-alert__text { display: block; }
    .form-alert[data-guide-folded] > .form-alert__text { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    .form-alert__more { position: absolute; right: var(--space-2); bottom: var(--space-2); border-radius: var(--radius-sm); background: linear-gradient(to right, transparent, var(--color-surface-soft) var(--space-4)); padding: var(--space-1) var(--space-2) var(--space-1) var(--space-6); color: var(--color-brand); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
    .form-alert[data-guide-foldable]:not([data-guide-folded]) { padding-bottom: calc(var(--space-3) + 1lh + var(--space-1)); }
    /* 하단 탭바: 화면 폭 전체의 유리 줄(공유 화면 dock은 본문 폭에 위만 둥근 행동 패널이라 모양이 다르다). 지금 칸은 브랜드색·굵게 + 아래 짧은 물결.
       body 아래 여백은 탭바 높이만 둔다(홈 바 높이는 푸터가 이미 safe-area로 띄운다). 입력칸 초점(app.js)·다이빙 로그 선택(log-select.js) 동안은 아래로 숨긴다. */
    .my-shell { --my-tabbar-height: 3.75rem; }
    .my-shell--tabbar { padding-bottom: var(--my-tabbar-height); }
    .my-tabbar { position: fixed; z-index: var(--z-sticky); inset: auto 0 0; display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; border-top: var(--border-width) solid var(--color-border); background: var(--header-glass-background); padding: 0 max(var(--space-2), env(safe-area-inset-right)) env(safe-area-inset-bottom) max(var(--space-2), env(safe-area-inset-left)); -webkit-backdrop-filter: var(--header-glass-blur); backdrop-filter: var(--header-glass-blur); transition: transform var(--duration-base) var(--ease-standard), visibility 0s linear 0s; }
    .my-shell--typing .my-tabbar,
    .my-shell--selecting .my-tabbar { visibility: hidden; transform: translateY(100%); transition: transform var(--duration-base) var(--ease-standard), visibility 0s linear var(--duration-base); }
    .my-tabbar__item { position: relative; display: flex; min-width: 0; height: var(--my-tabbar-height); flex-direction: column; align-items: center; justify-content: center; gap: .125rem; color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); line-height: 1.2; text-decoration: none; }
    .my-tabbar__item[aria-current="page"] { color: var(--color-brand); font-weight: var(--font-weight-semibold); }
    .my-tabbar__item[aria-current="page"]::after { position: absolute; bottom: var(--space-1); left: 50%; width: 1.5rem; height: .3125rem; background: currentColor; content: ""; transform: translateX(-50%); -webkit-mask: var(--wave-mask) center / 100% 100% no-repeat; mask: var(--wave-mask) center / 100% 100% no-repeat; }
    .my-tabbar__item:focus-visible { outline: var(--border-width-accent) solid var(--color-focus); outline-offset: calc(var(--space-1) * -1); border-radius: var(--radius-md); }
}
@media (max-width: 47.999rem) and (hover: hover) {
    .my-tabbar__item:hover { color: var(--color-brand); }
}


/* Shared components: headings, people, summaries, images and detail actions.
 * Layout variants belong to these components, not to page-specific overrides.
 * Colors, spacing and sizes come from common.css semantic tokens.
 */
.my-page-heading { display: grid; gap: var(--space-5); }
.my-page-heading__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.my-page-heading h1 { margin-block: var(--space-1) var(--space-2); font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-tight); line-height: var(--line-height-tight); overflow-wrap: anywhere; }
.my-page-heading__copy { min-width: 0; flex: 1 1 auto; }
/* 하위 화면 제목(x-my.tour-heading·trip-heading): 대상 이름 + 상태 배지, 아래 요약 줄과 SMB 신호(D-day·N일차). */
.my-page-heading__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.my-page-heading__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.my-page-heading__signal { color: var(--color-smb-deep); font-family: var(--font-gauge); font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); line-height: 1; font-variant-numeric: tabular-nums; }
.my-page-actions { position: relative; min-width: 0; max-width: 100%; margin-inline-start: auto; }
.my-page-actions__panel { align-items: center; justify-content: flex-end; }
/* Mobile with two or more actions (app.js sets data-collapsed): "+" opens them as a menu shaped like the item "···" panel. */
.my-page-actions[data-collapsed] > .my-page-actions__panel { position: absolute; z-index: var(--z-dropdown); top: calc(100% + var(--space-1)); right: 0; display: none; width: max-content; min-width: calc(var(--space-20) + var(--space-20)); max-width: calc(100vw - var(--gutter) - var(--gutter)); flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: var(--space-1); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); padding: var(--space-2); box-shadow: var(--shadow-md); }
.my-page-actions[data-collapsed][data-open] > .my-page-actions__panel { display: flex; }
.my-page-actions[data-collapsed] > .my-page-actions__panel form { display: grid; }
/* Menu items are plain moves, so the "+" menu drops navigation arrows like the item "···" menu. */
.my-page-actions[data-collapsed] > .my-page-actions__panel .navigation-arrow { display: none; }
/* Zero-specificity scope so confirm-state colors (danger) still win over the menu-item look. */
:where(.my-page-actions[data-collapsed] > .my-page-actions__panel) .btn { --button-height: var(--control-height-sm); --button-padding-y: .5rem; --button-padding-x: .875rem; width: 100%; justify-content: flex-start; border-color: transparent; background: var(--color-surface); color: var(--color-brand); text-align: left; }
.my-breadcrumb ol { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); color: var(--color-text-secondary); font-size: var(--font-size-sm); list-style: none; }
.my-breadcrumb li { display: inline-flex; min-width: 0; align-items: center; gap: var(--space-2); overflow-wrap: anywhere; }
.my-breadcrumb li + li::before { color: var(--color-border-strong); content: "/"; }
.my-breadcrumb a { color: inherit; text-decoration: none; }
.my-breadcrumb [aria-current="page"] { color: var(--color-text); font-weight: var(--font-weight-medium); }
/* 콘텐츠 그룹(x-my.content-group) = 왼쪽 제목 + 본문(docs/ui/design-style.md 3절). 제목 아래 첫 내용까지는 이 grid 간격(--my-signature-gap) 하나로 정한다.
   본문 안 간격은 본문이 따로 가진다. 기본 --space-6, 하위 폼 묶음(--sections)은 --space-10. */
.my-content-group { display: grid; min-width: 0; gap: var(--my-signature-gap); }
.my-content-group__body { display: grid; min-width: 0; gap: var(--space-6); }
.my-content-group--sections > .my-content-group__body { gap: var(--space-10); }
.my-group-title { justify-self: start; font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); }
.my-group-title__count { margin-left: var(--space-2); color: var(--color-text-muted); font-family: var(--font-gauge); font-size: 1.125em; font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; }
.my-inline-link { display: inline-flex; min-height: var(--control-height-sm); align-items: center; gap: var(--space-1); }
.my-title-link { color: inherit; text-decoration: none; }
.my-navicon { display: inline-flex; width: var(--control-height-sm); height: var(--control-height-sm); flex: 0 0 auto; align-items: center; justify-content: center; border-radius: var(--radius-lg); background: var(--color-brand-soft); color: var(--color-brand); }
.my-navicon--sand { background: var(--color-sand-light); color: var(--color-memory); }
.my-avatar { display: inline-flex; width: var(--control-height); height: var(--control-height); flex: 0 0 auto; align-items: center; justify-content: center; border-radius: var(--radius-pill); background: var(--color-brand-soft); color: var(--color-brand); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); }
.my-avatar--small { width: var(--control-height-sm); height: var(--control-height-sm); font-size: var(--font-size-sm); }
.my-avatar--large { width: var(--space-16); height: var(--space-16); font-size: var(--font-size-xl); }
.my-detail-list { display: grid; gap: var(--space-4); }
.my-detail-list > div { display: grid; min-width: 0; gap: var(--space-1); }
.my-detail-list dt { color: var(--color-text-secondary); font-size: var(--font-size-xs); }
.my-detail-list dd { min-width: 0; font-size: var(--font-size-sm); overflow-wrap: anywhere; }
.my-contact-directory { display: grid; min-width: 0; gap: var(--space-5); }
.my-contact-filter { display: flex; min-width: 0; flex-wrap: wrap; gap: var(--space-1); }
.my-contact-filter__item { display: inline-flex; min-width: var(--space-8); min-height: var(--space-8); align-items: center; justify-content: center; border-radius: var(--radius-pill); padding: 0 var(--space-3); color: var(--color-text-secondary); font-size: var(--font-size-base); font-weight: var(--font-weight-medium); text-decoration: none; white-space: nowrap; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.my-contact-filter__item[aria-current="page"] { background: var(--color-brand-soft); color: var(--color-brand); font-weight: var(--font-weight-semibold); }
/* 사람 묶음(x-my.person-group): 주소록식 구분 제목(왼쪽 + 아래 구분선, 오른쪽 끝 작은 버튼) + 사람 한 줄 목록. 주소록·투어 참가자. */
.my-person-groups { display: grid; min-width: 0; gap: var(--space-6); }
.my-person-group { display: grid; min-width: 0; gap: var(--space-1); }
.my-person-group__heading { display: flex; min-width: 0; min-height: var(--control-height-sm); align-items: center; justify-content: space-between; gap: var(--space-3); border-bottom: var(--border-width) solid var(--color-border); padding-bottom: var(--space-2); }
.my-person-group__title { display: inline-flex; min-width: 0; align-items: center; gap: var(--space-2); color: var(--color-brand); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.my-person-group__count { color: var(--color-text-muted); font-family: var(--font-gauge); font-size: 1.125em; font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; }
/* 접는 묶음(collapsible): 제목 전체가 펼침 버튼이고 오른쪽 화살표가 열림 상태를 보인다. 펼침은 app.js의 slideToggle. */
.my-person-group__toggle { display: inline-flex; min-width: 0; align-items: center; gap: var(--space-2); border: 0; background: none; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.my-person-group__chevron { color: var(--color-text-muted); font-size: .75em; transition: transform .2s ease; }
.my-person-group__toggle[aria-expanded="true"] .my-person-group__chevron { transform: rotate(180deg); }
.my-person-group__body { min-width: 0; }
/* 기록 묶음(--log, 투어 참가 이력): 사람 묶음과 같은 줄에 있지 않은 보조 제목이라 점선 구분선·회색 보통 굵기로 낮춘다. */
.my-person-group--log .my-person-group__heading { border-bottom-style: dashed; }
.my-person-group--log .my-person-group__title { color: var(--color-text-secondary); font-weight: var(--font-weight-medium); }
/* 주소록 카드는 내용이 짧아 폭이 허락하는 만큼 열을 늘린다(모바일 1열, PC 4열). */
.my-person-list { display: grid; min-width: 0; container-type: inline-size; margin: 0; padding: 0; list-style: none; }
.my-person-list > li + li { border-top: var(--border-width) solid var(--color-border); }
.my-checklist-list { display: grid; gap: var(--space-3); }
.my-checklist-card { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.my-checklist-card__copy { min-width: 0; overflow-wrap: anywhere; }

/* List builder: checklist·itinerary·expense group/item lists (x-my.list-builder).
   Compact one-line rows: labels stay for screen readers, the placeholder names the field. */
.my-list-builder { display: grid; min-width: 0; gap: var(--form-stack-gap); }
.my-list-builder__groups { display: grid; min-width: 0; gap: var(--space-3); }
.my-list-builder__groups:empty { display: none; }
.my-list-builder__group { min-width: 0; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
.my-list-builder__group.is-expanded { border-color: var(--color-brand-light); box-shadow: var(--shadow-sm); }
/* No overflow clip on the group, so a row's select·search panel can open past the card; the heading rounds its own corners. */
.my-list-builder__group-heading { display: flex; min-width: 0; align-items: center; gap: var(--space-2); border-radius: calc(var(--radius-xl) - var(--border-width)); background: var(--color-surface-soft); padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2); }
.my-list-builder__group.is-expanded .my-list-builder__group-heading { border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
.my-list-builder__toggle > .icon { color: var(--color-text-secondary); transition: transform var(--duration-fast) var(--ease-standard); }
.my-list-builder__group.is-expanded .my-list-builder__toggle > .icon { transform: rotate(180deg); }
.my-list-builder__count { flex: 0 0 auto; min-width: var(--space-8); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface); padding: 0 var(--space-2); color: var(--color-text-secondary); font-size: var(--font-size-xs); font-variant-numeric: tabular-nums; line-height: 1.5rem; text-align: center; }
.my-list-builder__panel { border-top: var(--border-width) solid var(--color-border); }
.my-list-builder__rows { display: grid; min-width: 0; gap: var(--space-1); padding: var(--space-2) var(--space-3) var(--space-1) var(--space-2); }
.my-list-builder__row { display: flex; min-width: 0; align-items: flex-start; gap: var(--space-2); border-radius: var(--radius-lg); }
.my-list-builder__row-fields { display: grid; min-width: 0; flex: 1 1 auto; grid-template-columns: minmax(0, 1fr); grid-auto-columns: minmax(5rem, 8rem); grid-auto-flow: column; gap: var(--space-2); }
/* Long dashed "add" button (Secondary): list-builder 항목 추가, 강사 인증 시작, 프로 인증 추가. */
.my-add-button { display: flex; width: 100%; justify-content: center; border-style: dashed; border-color: var(--color-brand-light); background: var(--color-brand-soft); }
@media (hover: hover) {
    .my-add-button:hover { border-color: var(--color-brand-mid); }
}
/* Spans the row inputs (after the grip column) to the remove-button edge; a button does not stretch with width: auto. */
.my-list-builder__add { --list-builder-add-start: calc(var(--space-2) + var(--space-7) + var(--space-2)); width: calc(100% - var(--list-builder-add-start) - var(--space-3)); margin: var(--space-1) var(--space-3) var(--space-3) var(--list-builder-add-start); }
.my-list-builder__handle { display: inline-flex; width: var(--space-7); height: var(--control-height-sm); flex: 0 0 auto; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-md); background: none; color: var(--color-text-muted); cursor: grab; touch-action: none; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.my-list-builder__handle:focus-visible { outline: var(--border-width-accent) solid var(--color-brand-mid); outline-offset: var(--border-width); }
.my-list-builder__check { display: inline-flex; min-height: var(--control-height-sm); flex: 0 0 auto; align-items: center; margin: 0; padding: 0; }
.my-list-builder__remove { flex: 0 0 auto; }
.my-list-builder__check-text { margin-left: var(--space-1); color: var(--color-text-secondary); font-size: var(--font-size-xs); white-space: nowrap; }
/* Rows with a detail area (e.g. settlement allocation) wrap it under the fields, aligned past the handle. */
.my-list-builder__row--detail { flex-wrap: wrap; }
.my-list-builder__detail { display: grid; min-width: 0; flex: 1 0 100%; gap: var(--space-2); padding: 0 0 var(--space-2) calc(var(--space-7) + var(--space-2)); }
@media (hover: hover) {
    .my-list-builder__handle:hover { background: var(--color-brand-soft); color: var(--color-brand); }
}
/* Compact fields: the shared Field, label visually hidden and the placeholder always shown. */
.my-list-builder__field { min-width: 0; flex: 1 1 auto; }
.my-list-builder__field .form-field { --form-field-padding-block: var(--space-2); }
.my-list-builder__field .form-field__label { width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* 올린 라벨 칸(select·시각)은 placeholder가 없어 라벨을 짧게 칸 안에 보인다. 시각은 "22:20 부터"처럼 값 뒤에 둔다. */
.my-list-builder__field .form-field__input--raised-label { padding-left: calc(var(--form-field-padding-inline) + 1.75em); }
.my-list-builder__field .form-field__input--raised-label + .form-field__label { top: 50%; left: var(--form-field-padding-inline); width: auto; height: auto; overflow: visible; padding-inline: 0; background: none; clip-path: none; color: var(--color-text-secondary); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); }
.my-list-builder__row-fields:has(.form-field__input--raised-label) { grid-auto-columns: minmax(8rem, 10rem); }
.my-list-builder__row-fields:has([data-air-timepicker]) { grid-auto-columns: minmax(6.5rem, 7rem); }
.my-list-builder__field .form-field__input[data-air-timepicker] { padding-right: calc(var(--form-field-padding-inline) + 2em); padding-left: var(--form-field-padding-inline); text-align: right; }
.my-list-builder__field .form-field__input[data-air-timepicker] + .form-field__label { right: var(--form-field-padding-inline); left: auto; }
/* The compact select keeps its value readable: the arrow needs less room than the shared field reserves. */
.my-list-builder__field .form-field__input--select { padding-right: 2rem; }
.my-list-builder__field .form-field__input::placeholder { color: var(--color-text-muted); }
.my-list-builder__field--group .form-field__input { font-weight: var(--font-weight-semibold); }
/* Fixed slot (trip day) with its editable title: the day label, then the title field; wraps under the label on narrow screens. */
/* Drag: the source leaves the layout, a skeleton marks where it will land, a copy follows the pointer. */
.my-list-builder .is-drag-source { display: none; }
.my-list-builder__placeholder { --placeholder-height: var(--control-height-sm); display: flex; min-width: 0; height: var(--placeholder-height); align-items: center; gap: var(--space-3); border: var(--border-width-accent) dashed var(--color-brand-mid); border-radius: var(--radius-lg); background: var(--color-brand-soft); padding-inline: var(--space-3); }
.my-list-builder__placeholder--group { border-radius: var(--radius-xl); }
.my-list-builder__placeholder--collapsed { height: var(--control-height-sm); margin: var(--space-2) var(--space-3); }
.my-list-builder__skeleton { display: block; height: .625rem; border-radius: var(--radius-pill); background-color: var(--color-brand-light); background-image: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .6) 50%, transparent 70%); background-repeat: no-repeat; background-size: 250% 100%; animation: skeleton-reflection 1.6s ease-in-out infinite; }
.my-list-builder__skeleton--handle { width: var(--space-4); flex: 0 0 auto; }
.my-list-builder__skeleton--text { width: min(60%, 18rem); }
.my-list-builder__ghost { position: fixed; z-index: var(--z-toast); top: 0; left: 0; overflow: hidden; border: var(--border-width) solid var(--color-brand-light); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-md); opacity: .96; pointer-events: none; rotate: .6deg; }
.my-list-builder__ghost > .my-list-builder__row { padding: var(--space-1) var(--space-2); }
.my-list-builder-dragging,
.my-list-builder-dragging * { cursor: grabbing !important; user-select: none; }
.my-list-builder .is-dropped { animation: my-list-builder-dropped 900ms var(--ease-standard); }
@keyframes my-list-builder-dropped {
    from { background-color: var(--color-brand-soft); }
    to { background-color: transparent; }
}

/* 프리셋 불러오기 모달(x-my.list-import-dialog)의 목록. */
.my-list-import-list { display: grid; margin: 0; padding: 0; list-style: none; }
.my-list-import-list > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); border-bottom: var(--border-width) solid var(--color-border); padding-block: var(--space-3); }
.my-list-import-list > li > strong { min-width: 0; flex: 1 1 10rem; overflow-wrap: anywhere; }
/* Actions stay on one line beside the title; the title wraps instead when a confirmation widens a button. */
.my-list-import-list > li > .action-group { flex: 0 0 auto; flex-wrap: nowrap; }

/* 빠른 로그(x-my.quick-log-builder): 위 입력을 점선 "담기"로 담고, 아래 장바구니에서 횟수를 고쳐 한 번에 만든다.
   장바구니는 list-builder 그룹과 같은 얇은 카드: 날짜·지역 머리 → 시간대 줄(작은 −/+·빼기) → 합계 한 줄. */
.my-quick-log__cart { display: grid; overflow: hidden; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); }
.my-quick-log__days,
.my-quick-log__lines { margin: 0; padding: 0; list-style: none; }
.my-quick-log__days:empty { display: none; }
.my-quick-log__day + .my-quick-log__day { border-top: var(--border-width) solid var(--color-border); }
.my-quick-log__day-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); background: var(--color-surface-soft); padding: var(--space-2) var(--space-4); font-size: var(--font-size-sm); overflow-wrap: anywhere; }
.my-quick-log__day-title > strong { font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; }
.my-quick-log__day-title > span:not(.my-quick-log__day-count) { color: var(--color-text-secondary); }
.my-quick-log__day-count { margin-left: auto; color: var(--color-text-muted); font-size: var(--font-size-xs); font-variant-numeric: tabular-nums; }
.my-quick-log__line { display: flex; min-width: 0; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); }
.my-quick-log__line + .my-quick-log__line { border-top: var(--border-width) solid var(--color-surface-soft); }
.my-quick-log__line-label { display: flex; min-width: 0; flex: 1 1 auto; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); font-size: var(--font-size-sm); overflow-wrap: anywhere; }
.my-quick-log__line-label > strong { font-weight: var(--font-weight-medium); }
.my-quick-log__line-label > span { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.my-quick-log__stepper { display: inline-flex; flex: 0 0 auto; align-items: center; border-radius: var(--radius-pill); background: var(--color-surface-soft); }
.my-quick-log__stepper > .btn { border-radius: var(--radius-pill); }
.my-quick-log__line-count { min-width: 2.25rem; font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; text-align: center; }
.my-quick-log__remove { color: var(--color-text-muted); }
.my-quick-log__cart-empty { display: grid; justify-items: center; gap: var(--space-1); padding: var(--space-6) var(--space-5); text-align: center; }
.my-quick-log__cart-empty-icon { margin-bottom: var(--space-1); color: var(--color-brand-light); font-size: var(--font-size-xl); }
.my-quick-log__cart-empty-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.my-quick-log__summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); border-top: var(--border-width) solid var(--color-border); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); }
.my-quick-log__summary[hidden] { display: none; }
.my-quick-log__clear { color: var(--color-text-muted); }
.my-quick-log__total { color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.my-quick-log__total > strong { margin-left: var(--space-1); color: var(--color-brand); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; }
.my-share-revoke { display: contents; }
.my-share-revoke[hidden] { display: none; }

@media (max-width: 39.999rem) {
    .my-list-builder__row-fields { flex-basis: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; }
    .my-list-builder__row-fields > :first-child { grid-column: 1 / -1; }
    .my-list-builder__row-fields:has(.form-field__input--select) { grid-template-columns: minmax(0, 1fr) minmax(7.5rem, 1fr); }
    .my-list-import-list > li > .action-group { width: 100%; flex-wrap: wrap; }
    }
/* 사람 한 줄(x-my.person-row): 좁은 화면은 [아바타 이름 칸 ···] 아래로 정보가 내려가고, 넓은 화면은 한 줄에 이름 칸(고정 폭)·정보·"···" 순서다. 좌우 안쪽 여백은 같게 둔다.
   이름 칸은 윗줄 [배지] 이름(최대 2줄 말줄임), 아랫줄 sub(이메일, "@" 앞에서 먼저 줄바꿈)이다.
   폭 판단은 화면이 아니라 목록 폭(container query)으로 한다. 정보 항목 사이는 세로선 없이 여백으로 나누고, 라벨은 작은 회색 글씨로 값 앞에 붙인다. 펼침 패널은 줄 전체 폭으로 아래에 붙는다. */
.my-person-row { display: grid; min-width: 0; grid-template-areas: "avatar name menu" ". meta meta"; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-3) var(--space-2); }
.my-person-row__avatar { grid-area: avatar; }
.my-person-row__identity { display: grid; min-width: 0; grid-area: name; gap: .125rem; }
.my-person-row__name { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); overflow-wrap: anywhere; }
.my-person-row__sub { display: flex; min-width: 0; order: -1; align-items: center; gap: var(--space-1); color: var(--color-text-secondary); font-size: var(--font-size-sm); overflow-wrap: anywhere; }
.my-person-row__badge { display: inline-flex; flex: 0 0 auto; gap: var(--space-1); }
/* 한글 글자 획이 글자 상자 가운데보다 아래에 몰려 있어, 상자끼리 가운데를 맞추면 배지가 떠 보인다. 1px 내려 눈높이를 맞춘다. */
.my-person-row__sub .badge-sm { transform: translateY(.0625rem); }
/* 닉네임과 그 자리의 작은 수정 폼(.inline-edit--compact)은 한 자리(data-inline-swap)에서 바뀐다. */
.my-person-row__rename { display: grid; min-width: 0; flex: 1 1 auto; }
.my-person-row__nickname { display: inline-flex; min-width: 0; align-items: center; gap: var(--space-1); }
/* 닉네임 옆 연필(.inline-edit-toggle)은 누를 폭은 그대로 두고 윗줄 높이를 늘리지 않는다. 작은 수정 폼도 같은 한 줄 높이라 바뀔 때 줄이 출렁이지 않는다. */
.my-person-row__sub .inline-edit-toggle { margin-block: calc((1lh - var(--control-height-xs)) / 2); }
/* 연필은 누를 칸이 아이콘보다 넓어 아이콘 왼쪽이 비어 보이므로, 그만큼 닉네임 쪽으로 당긴다. */
.my-person-row__nickname .inline-edit-toggle { margin-inline-start: calc(var(--space-2) * -1); }
.my-person-row__meta { display: flex; min-width: 0; grid-area: meta; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-5); }
.my-person-row__meta > div { display: inline-flex; min-width: 0; align-items: baseline; gap: var(--space-2); }
.my-person-row__meta dt { flex: 0 0 auto; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.my-person-row__meta dd { min-width: 0; color: var(--color-text-secondary); font-size: var(--font-size-sm); overflow-wrap: anywhere; }
.my-person-row__note { flex: 1 1 12rem; }
.my-person-row__note dd { overflow: hidden; color: var(--color-text-muted); text-overflow: ellipsis; white-space: nowrap; }
.my-person-row__menu { grid-area: menu; }
.my-person-row__panel { display: grid; min-width: 0; grid-column: 1 / -1; gap: var(--form-stack-gap); margin-top: var(--space-2); border-radius: var(--radius-lg); background: var(--color-surface-soft); padding: var(--space-4); }
.my-person-row__panel[hidden] { display: none; }
@container (min-width: 36rem) {
    .my-person-row { grid-template-areas: "avatar name meta menu"; grid-template-columns: auto minmax(0, 15rem) minmax(0, 1fr) auto; column-gap: var(--space-4); }
}
.my-contact-detail .form-section { min-width: 0; }
.my-contact-detail__top { display: flex; min-width: 0; align-items: center; gap: var(--space-4); }
.my-contact-detail__top strong { min-width: 0; font-size: var(--font-size-lg); overflow-wrap: anywhere; }

/* MY 홈(개편 04): 인사·요약 슬레이트 → 진행 중·INSTRUCTOR 한 줄 목록(x-my.activity-row) → 진입 카드(MyMenu::entries).
   폰은 한 열, 40rem부터 진입 카드 두 열, 64rem부터 인사와 슬레이트가 한 줄이다. */
.my-home-hello { display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-4); }
.my-home-hello__copy { display: grid; min-width: 0; gap: var(--space-1); }
.my-home-hello__name { margin: 0; font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); line-height: var(--line-height-tight); overflow-wrap: anywhere; }
.my-home-hello__role { margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.my-home-hello__metrics { grid-column: 1 / -1; }
.my-activity-list { display: grid; min-width: 0; margin: 0; padding: 0; list-style: none; }
.my-activity-row { position: relative; display: grid; min-width: 0; gap: var(--space-1); border-bottom: var(--border-width) solid var(--color-border); padding: var(--space-4) 0; }
.my-activity-row:first-child { padding-top: 0; }
.my-activity-row:last-child { border-bottom-width: 0; padding-bottom: 0; }
.my-activity-row__head { display: flex; min-width: 0; align-items: center; gap: var(--space-2); }
.my-activity-row__title { min-width: 0; flex: 1 1 auto; margin: 0; font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); overflow-wrap: anywhere; }
/* 줄 전체를 누를 수 있게 제목 링크를 줄 크기로 넓힌다. 준비 진행 링크는 그 위에 올린다. */
.my-activity-row__link { color: inherit; text-decoration: none; }
.my-activity-row__link::after { position: absolute; inset: 0; content: ""; }
.my-activity-row__arrow { flex: 0 0 auto; color: var(--color-text-muted); transition: color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
.my-activity-row__meta { display: flex; min-width: 0; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.my-activity-row__signal { color: var(--color-smb-deep); font-family: var(--font-gauge); font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); line-height: 1; font-variant-numeric: tabular-nums; }
.my-activity-row__note { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-xs); }
/* 준비 진행: 체크리스트 체크 수 / 항목 수. 막대는 드라이 장갑 파랑(docs/ui/design-style.md 1절). */
.my-activity-row__progress { position: relative; z-index: 1; display: flex; width: fit-content; max-width: 100%; align-items: center; gap: var(--space-2); margin-top: var(--space-1); color: var(--color-text-secondary); font-size: var(--font-size-xs); text-decoration: none; }
.my-activity-row__progress strong { color: var(--color-glove); font-family: var(--font-gauge); font-size: var(--font-size-base); font-variant-numeric: tabular-nums; }
.my-activity-row__progress progress { width: 6rem; height: .375rem; border: 0; border-radius: var(--radius-pill); background: var(--color-surface-soft); overflow: hidden; appearance: none; }
.my-activity-row__progress progress::-webkit-progress-bar { border-radius: var(--radius-pill); background: var(--color-border); }
.my-activity-row__progress progress::-webkit-progress-value { border-radius: var(--radius-pill); background: var(--color-glove); }
.my-activity-row__progress progress::-moz-progress-bar { border-radius: var(--radius-pill); background: var(--color-glove); }
.my-home-more { display: flex; justify-content: flex-end; margin: 0; font-size: var(--font-size-sm); }
.my-home-entries { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.my-home-entry { position: relative; display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr) auto; align-content: start; gap: var(--space-1) var(--space-3); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); padding: var(--space-4); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.my-home-entry .my-navicon { grid-row: 1 / 3; border: var(--border-width) solid var(--color-border); background: var(--color-surface-soft); color: var(--color-text-secondary); }
.my-home-entry__title { grid-column: 2; min-width: 0; margin: 0; font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); }
.my-home-entry__arrow { grid-column: 3; grid-row: 1 / 3; align-self: center; color: var(--color-text-muted); transition: color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
.my-home-entry__description { grid-column: 2 / -1; min-width: 0; margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-xs); line-height: var(--line-height-tight); }
/* 링크 하나뿐인 카드(배우기·찾기)는 카드 전체가 그 링크·버튼이다. */
.my-home-entry__link { border: 0; background: none; padding: 0; color: inherit; font: inherit; text-align: start; text-decoration: none; cursor: pointer; }
.my-home-entry__link::after { position: absolute; inset: 0; border-radius: inherit; content: ""; }
.my-home-entry__section { display: grid; min-width: 0; grid-column: 1 / -1; gap: var(--space-2); margin-top: var(--space-2); }
.my-home-entry__heading { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: .04em; }
.my-home-entry__links { display: flex; min-width: 0; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.my-home-entry__links :is(a, button) { display: inline-flex; min-height: var(--control-height-sm); align-items: center; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface); padding: 0 var(--space-3); color: var(--color-text); font: inherit; font-size: var(--font-size-sm); text-decoration: none; cursor: pointer; transition: border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
@media (hover: hover) {
    .my-activity-row:hover .my-activity-row__arrow,
    .my-home-entry--link:hover .my-home-entry__arrow,
    .my-home-entry--link:hover .my-navicon { color: var(--color-brand); }
    .my-activity-row:hover .my-activity-row__arrow,
    .my-home-entry--link:hover .my-home-entry__arrow { transform: translateX(.125rem); }
    .my-activity-row:hover .my-activity-row__title { color: var(--color-brand); }
    .my-home-entry--link:hover { border-color: var(--color-brand-light); background: var(--color-surface-soft); }
    .my-home-entry__links :is(a, button):hover { border-color: var(--color-brand-light); color: var(--color-brand); }
}

/* Journal timeline shared by dive logs and personal trips:
   navigator (finder) → year → month → entry on a vertical date line.
   Change the rhythm here once; .my-log-* below only adds what dive logs need. */
/* One content group: finder → timeline → load more, closer than surface groups. */
.my-journal { display: grid; min-width: 0; gap: var(--space-10); }
.my-journal-navigator,
.my-journal-year,
.my-journal-empty,
.my-log-load-more { width: 100%; max-width: var(--container-lg); margin-inline: auto; }
.my-journal-navigator { display: grid; min-width: 0; gap: var(--space-4); }
.my-journal-finder { min-width: 0; }
.my-journal-finder > summary { list-style: none; }
.my-journal-finder > summary::-webkit-details-marker { display: none; }
/* Only the toggle button opens the finder; the scope text beside it is not a hit target. */
.my-journal-finder__summary { display: flex; min-width: 0; min-height: var(--control-height-sm); flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-5); pointer-events: none; }
.my-journal-finder__summary:focus-visible { outline: none; }
.my-journal-finder__summary:focus-visible .my-journal-finder__toggle { outline: .1875rem solid var(--color-focus); outline-offset: .1875rem; }
.my-journal-finder__scope { display: flex; min-width: 0; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); color: var(--color-text-secondary); font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; }
.my-journal-finder__scope strong { color: var(--color-text); font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-tight); overflow-wrap: anywhere; }
.my-journal-finder__toggle { flex: 0 0 auto; cursor: pointer; pointer-events: auto; }
.my-journal-finder__open-label,
.my-journal-finder[open] .my-journal-finder__close-label { display: inline-flex; align-items: center; gap: var(--space-2); }
.my-journal-finder__close-label,
.my-journal-finder[open] .my-journal-finder__open-label { display: none; }
.my-journal-finder__form { display: grid; min-width: 0; gap: var(--form-stack-gap); padding-top: var(--space-5); }
.my-journal-finder__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.my-journal-timeline { display: grid; min-width: 0; }
.my-journal-year { display: grid; min-width: 0; gap: var(--space-10); }
.my-journal-year + .my-journal-year { margin-top: var(--space-20); }
.my-journal-year__heading h3 { color: var(--color-text); font-size: var(--font-size-3xl); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-tight); line-height: var(--line-height-tight); font-variant-numeric: tabular-nums; }
.my-journal-year__months { display: grid; min-width: 0; gap: var(--space-20); }
.my-journal-month { display: grid; min-width: 0; gap: var(--space-6); }
.my-journal-month__heading { width: 100%; color: var(--color-brand); font-size: calc(var(--font-size-2xl) + var(--space-1)); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-tight); line-height: var(--line-height-tight); text-align: left; font-variant-numeric: tabular-nums; }
.my-journal-month__entries { position: relative; display: grid; min-width: 0; gap: var(--space-8); }
.my-journal-month__entries::before { position: absolute; top: var(--space-3); bottom: var(--space-3); left: calc(var(--space-10) + var(--space-3)); width: var(--border-width); background: var(--color-border); content: ""; }
.my-journal-entry { position: relative; display: grid; min-width: 0; grid-template-columns: var(--space-10) var(--space-6) minmax(0, 1fr); align-items: start; }
.my-journal-entry__date { z-index: 1; display: grid; justify-items: end; color: var(--color-text-secondary); line-height: var(--line-height-tight); }
.my-journal-entry__day { color: var(--color-text); font-family: var(--font-gauge); font-size: var(--font-size-3xl); font-weight: var(--font-weight-semibold); line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.my-journal-entry__weekday { margin-top: var(--space-1); color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.my-journal-entry__marker { z-index: 1; width: var(--space-2); height: var(--space-2); justify-self: center; margin-top: var(--space-3); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-pill); background: var(--color-surface); }
/* 같은 날의 연속 다이빙은 첫 항목에만 날짜를 보이고 간격을 좁혀 하루 묶음으로 읽히게 한다. 날짜는 aria-label로 계속 읽힌다. */
.my-journal-entry--same-day { margin-top: calc(-1 * var(--space-3)); }
.my-journal-entry--same-day .my-journal-entry__date > * { visibility: hidden; }
.my-journal-entry__content { min-width: 0; grid-column: 3; }
.my-journal-entry__header { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.my-journal-entry__heading { min-width: 0; flex: 1 1 auto; }
.my-journal-entry__title-row { display: flex; min-width: 0; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.my-journal-entry__title { min-width: 0; font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-tight); line-height: var(--line-height-tight); overflow-wrap: anywhere; }
.my-journal-entry__location { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin-top: var(--space-2); color: var(--color-text-secondary); font-size: var(--font-size-sm); overflow-wrap: anywhere; }
.my-journal-entry__metrics { display: flex; min-width: 0; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-4); color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.my-journal-entry__metrics > div { display: inline-flex; min-width: 0; align-items: center; gap: var(--space-2); }
.my-journal-entry__metrics dt { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-text-muted); font-size: var(--font-size-xs); }
.my-journal-entry__metrics dd { color: var(--color-text); font-weight: var(--font-weight-semibold); white-space: nowrap; }

/* Dive log additions: year navigation, load more, story/compact entries and quiet icon actions. */
.my-log-finder__fields { display: grid; min-width: 0; gap: var(--form-stack-gap) var(--space-5); }
.my-log-year-nav { min-width: 0; border-bottom: var(--border-width) solid var(--color-border); }
.my-log-year-nav__wide { display: none; }
.my-log-year-picker { position: relative; width: 100%; }
.my-log-year-picker > summary { display: flex; min-height: var(--control-height); align-items: center; justify-content: space-between; gap: var(--space-3); color: var(--color-brand); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); list-style: none; cursor: pointer; font-variant-numeric: tabular-nums; }
.my-log-year-picker > summary::-webkit-details-marker { display: none; }
.my-log-year-picker__chevron { flex: 0 0 auto; transition: transform var(--duration-fast) var(--ease-standard); }
.my-log-year-picker[open] .my-log-year-picker__chevron { transform: rotate(180deg); }
.my-log-year-picker__panel { position: absolute; z-index: var(--z-dropdown); top: calc(100% + var(--space-2)); left: 0; display: grid; width: min(var(--panel-width-sm), calc(100vw - var(--gutter) - var(--gutter))); max-height: min(60dvh, 24rem); gap: var(--space-1); overflow-y: auto; overscroll-behavior: contain; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); padding: var(--space-2); box-shadow: var(--shadow-md); }
.my-log-year-picker__panel > a { display: flex; min-height: var(--control-height-sm); align-items: center; border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); color: var(--color-text-secondary); font-size: var(--font-size-sm); text-decoration: none; font-variant-numeric: tabular-nums; }
.my-log-year-picker__panel > a[aria-current="page"] { background: var(--color-brand-soft); color: var(--color-brand); font-weight: var(--font-weight-semibold); }
.my-log-load-more { display: grid; justify-items: center; gap: var(--space-2); }
.my-log-entry--compact .my-journal-entry__heading,
.my-log-entry--compact .my-log-entry__body { max-width: var(--container-md); }
.my-log-entry--story .my-journal-entry__content { padding-bottom: var(--space-4); }
.my-log-entry__number { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.my-log-entry__eyebrow { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin-top: var(--space-1); color: var(--color-text-muted); font-size: var(--font-size-xs); }
.my-log-entry__eyebrow > span { display: inline-flex; align-items: center; gap: var(--space-1); }
.my-log-entry__eyebrow > span + span::before { margin-right: var(--space-2); color: var(--color-border-strong); content: "·"; }
.my-log-entry--story .my-journal-entry__title { font-size: var(--font-size-2xl); }
.my-log-entry__body,
.my-log-entry__copy { display: grid; min-width: 0; }
.my-log-entry__story { display: -webkit-box; overflow: hidden; margin-top: var(--space-4); color: var(--color-text-secondary); font-size: var(--font-size-base); line-height: var(--line-height-loose); white-space: pre-line; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.my-log-entry__story-highlights { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.my-log-entry__story-highlights p { display: grid; gap: var(--space-1); border-left: var(--border-width-accent) solid var(--color-memory-soft); padding-left: var(--space-3); }
.my-log-entry__story-highlights strong { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-memory); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); }
.my-log-entry__story-highlights span { display: -webkit-box; overflow: hidden; color: var(--color-text-secondary); font-size: var(--font-size-sm); line-height: var(--line-height-body); white-space: pre-line; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.my-log-entry--compact .my-journal-entry__metrics { margin-top: var(--space-3); }
.my-log-entry__details { margin-top: var(--space-6); }
.my-log-entry__details > summary { display: flex; min-height: var(--control-height-sm); align-items: center; gap: var(--space-2); color: var(--color-text-secondary); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); list-style: none; }
.my-log-entry__details > summary::-webkit-details-marker { display: none; }
.my-log-entry__details > summary .my-log-entry__details-chevron { margin-left: auto; color: var(--color-text-secondary); transition: transform var(--duration-fast) var(--ease-standard); }
.my-log-entry__details[open] > summary .my-log-entry__details-chevron { transform: rotate(180deg); }
.my-log-entry__details-body { display: grid; gap: var(--space-6); padding-top: var(--space-4); }

/* 다이빙 로그 "선택"(x-my.log-select-*, js/log-select.js): MY 다이빙 로그 목록과 투어 다이빙 로그 탭이 함께 쓴다.
   목록 위 "선택" → 카드 체크박스 → 화면 아래 고정 바(N개 선택 · 행동). 바가 떠 있는 동안 본문 끝이 가리지 않게 아래 여백을 둔다. */
.my-log-select-toolbar { display: flex; width: 100%; max-width: var(--container-lg); justify-content: flex-end; margin-inline: auto; }
.my-log-select-check { display: none; flex: 0 0 auto; align-items: center; align-self: center; cursor: pointer; }
.my-log-select--active .my-log-select-check { display: inline-flex; }
.my-log-select-check--inline { margin-right: var(--space-2); vertical-align: middle; }
.my-log-select--active { padding-bottom: calc(var(--control-height-lg) + var(--space-10)); }
.my-log-select-bar { position: fixed; right: 0; bottom: 0; left: 0; z-index: var(--z-sticky); display: flex; width: min(100% - var(--space-8), var(--container-md)); align-items: center; justify-content: space-between; gap: var(--space-3); margin: 0 auto max(var(--space-4), env(safe-area-inset-bottom)); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--header-glass-background); padding: var(--space-3) var(--space-4); box-shadow: var(--shadow-toast); -webkit-backdrop-filter: var(--header-glass-blur); backdrop-filter: var(--header-glass-blur); }
.my-log-select-bar[hidden] { display: none; }
.my-log-select-bar__count { color: var(--color-text-secondary); font-size: var(--font-size-sm); white-space: nowrap; }
.my-log-select-bar__count > strong { color: var(--color-brand); font-weight: var(--font-weight-semibold); }
.my-log-select-bar__actions { display: flex; align-items: center; gap: var(--space-2); }

/* 아이템 행동: MY 목록 아이템 오른쪽 위의 "···" 메뉴 자리(x-my.item-actions). 메뉴 모양은 common.css "더보기 메뉴". */
.my-item-actions { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: var(--space-1); margin-inline-start: auto; }
.my-item-actions--overlay { position: absolute; z-index: 1; top: var(--space-2); right: var(--space-2); border-radius: var(--radius-pill); background: var(--color-surface); box-shadow: var(--shadow-sm); }

.my-datepicker.air-datepicker {
    --adp-font-family: var(--font-sans);
    --adp-font-size: var(--font-size-sm);
    --adp-width: min(var(--panel-width-sm), calc(100vw - var(--space-8)));
    --adp-z-index: var(--z-modal);
    --adp-padding: var(--space-2);
    --adp-border-radius: var(--radius-lg);
    --adp-border-color: var(--color-border);
    --adp-border-color-inner: var(--color-border);
    --adp-background-color: var(--color-surface);
    --adp-background-color-hover: var(--color-brand-soft);
    --adp-background-color-active: var(--color-brand-soft);
    --adp-background-color-selected-other-month: var(--color-brand);
    --adp-background-color-selected-other-month-focused: var(--color-brand-hover);
    --adp-color: var(--color-text);
    --adp-color-secondary: var(--color-text-secondary);
    --adp-color-other-month: var(--color-text-muted);
    --adp-color-other-month-hover: var(--color-text-secondary);
    --adp-color-current-date: var(--color-brand);
    --adp-color-disabled: var(--color-text-muted);
    --adp-accent-color: var(--color-brand);
    --adp-day-name-color: var(--color-memory);
    --adp-day-name-color-hover: var(--color-memory);
    --adp-cell-border-radius: var(--radius-md);
    --adp-cell-background-color-selected: var(--color-brand);
    --adp-cell-background-color-selected-hover: var(--color-brand-hover);
    --adp-days-name-height: var(--space-7);
    --adp-day-cell-height: var(--control-height-sm);
    --adp-month-cell-height: var(--control-height);
    --adp-year-cell-height: var(--control-height);
    --adp-nav-height: var(--control-height);
    --adp-nav-color-secondary: var(--color-text-secondary);
    --adp-nav-arrow-color: var(--color-text-secondary);
    --adp-nav-action-size: var(--control-height-sm);
    --adp-btn-height: var(--control-height-sm);
    --adp-btn-color: var(--color-brand);
    --adp-btn-color-hover: var(--color-brand-hover);
    --adp-btn-background-color-hover: var(--color-brand-soft);
    --adp-mobile-font-size: var(--font-size-base);
    --adp-mobile-width: min(var(--panel-width-sm), calc(100vw - var(--space-8)));
    --adp-mobile-nav-height: var(--control-height-lg);
    --adp-mobile-day-cell-height: var(--control-height-sm);
    --adp-mobile-month-cell-height: var(--control-height);
    --adp-mobile-year-cell-height: var(--control-height);
    --adp-transition-duration: var(--duration-slow);
    --adp-transition-ease: var(--ease-standard);
    box-shadow: var(--shadow-md);
}
/* 시각 선택(data-air-timepicker): 기본 슬라이더는 손잡이·트랙이 작아 PC에서도 잡기 어려워 크게 키운다. */
.my-datepicker--time.air-datepicker {
    --adp-width: min(18rem, calc(100vw - var(--space-8)));
    --adp-mobile-width: min(20rem, calc(100vw - var(--space-8)));
    --adp-time-track-height: .25rem;
    --adp-time-track-color: var(--color-brand-light);
    --adp-time-track-color-hover: var(--color-brand-mid);
    --adp-time-padding-inner: var(--space-3);
}
.my-datepicker--time .air-datepicker-time { padding-block: var(--space-3); }
.my-datepicker--time .air-datepicker-time--current-hours,
.my-datepicker--time .air-datepicker-time--current-minutes { font-family: inherit; font-size: var(--font-size-xl); font-variant-numeric: tabular-nums; }
.my-datepicker--time .air-datepicker-time--row { height: var(--space-6); border-radius: var(--radius-pill); }
.my-datepicker--time .air-datepicker-time--row:first-child { margin-bottom: var(--space-2); }
.my-datepicker--time .air-datepicker-time--row input[type=range]::-webkit-slider-thumb { width: 1.125rem; height: 1.125rem; border: var(--border-width-accent) solid var(--color-brand); border-radius: var(--radius-pill); background: var(--color-surface); }
.my-datepicker--time .air-datepicker-time--row input[type=range]::-moz-range-thumb { width: 1.125rem; height: 1.125rem; border: var(--border-width-accent) solid var(--color-brand); border-radius: var(--radius-pill); background: var(--color-surface); }
.my-shell .air-datepicker-overlay { --adp-overlay-background-color: var(--color-overlay); --adp-overlay-z-index: var(--z-overlay); }

/* Inbox: 편지 목록 행(my/inbox)과 편지 한 통(my/inbox-show). */
.my-mail-list.card { margin: 0; padding: 0; list-style: none; }
.my-mail-list > :first-child > .my-mail-item { border-start-start-radius: var(--radius-card); border-start-end-radius: var(--radius-card); }
.my-mail-list > :last-child > .my-mail-item { border-end-start-radius: var(--radius-card); border-end-end-radius: var(--radius-card); }
.my-mail-row + .my-mail-row { border-top: var(--border-width) solid var(--color-border); }
.my-mail-item { display: flex; min-width: 0; align-items: flex-start; gap: var(--space-3); padding: var(--space-5); color: var(--color-text); text-decoration: none; }
.my-mail-item > .navigation-arrow { flex: 0 0 auto; align-self: center; color: var(--color-text-muted); }
.my-mail-item--unread { background: var(--color-brand-soft); }
.my-mail-item__copy { display: grid; min-width: 0; flex: 1 1 auto; justify-items: start; gap: var(--space-2); }
.my-mail-item__copy strong { max-width: 100%; overflow-wrap: anywhere; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.my-mail-item__copy > span:not(.badge) { max-width: 100%; overflow-wrap: anywhere; color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.my-mail-item__copy small { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.my-letter { display: grid; gap: var(--space-4); }
.my-letter__head { display: grid; gap: var(--space-2); }
.my-letter__title { margin: 0; overflow-wrap: anywhere; font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }
.my-letter__meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.my-letter__meta div { display: flex; gap: var(--space-1); }
.my-letter__meta dt { color: var(--color-text-muted); }
.my-letter__meta dd { margin: 0; }
.my-letter__body { margin: 0; white-space: pre-line; overflow-wrap: anywhere; font-size: var(--font-size-sm); line-height: var(--line-height-loose); }
.my-letter__quote { display: grid; gap: var(--space-2); border-inline-start: var(--border-width-accent) solid var(--color-border); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-soft); }
.my-letter__quote h3 { margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); }
.my-letter__note { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-xs); }


/* 마이페이지 > 강사 전환 단계(1 강사 정보 입력 → 2 프로 인증). data-state: done · current · pending · locked.
   진행 중(current·pending) 표시는 숫자 대신 말줄임 아이콘이고, 1단계 입력 폼은 아래 패널로 여닫는다(아코디언).
   그룹 제목 아래 위쪽 여백은 my-forms.css의 폼 그룹 공통 규칙이 준다. */
.my-instructor-steps { display: grid; min-width: 0; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.my-instructor-step { display: grid; min-width: 0; gap: var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); padding: var(--space-3) var(--space-4); }
.my-instructor-step__row { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.my-instructor-step__mark { display: inline-flex; flex: none; width: var(--control-height-xs); height: var(--control-height-xs); align-items: center; justify-content: center; border-radius: var(--radius-pill); background: var(--color-brand-soft); color: var(--color-brand); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.my-instructor-step__copy { display: grid; min-width: 0; flex: 1 1 auto; }
.my-instructor-step__copy strong { font-size: var(--font-size-sm); }
.my-instructor-step__copy small { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.my-instructor-step__row > :is(.badge, .btn) { flex: none; }
.my-instructor-step__toggle .icon { transition: transform var(--duration-fast) var(--ease-standard); }
.my-instructor-step__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.my-instructor-step__panel { display: grid; min-width: 0; gap: var(--form-stack-gap); border-top: var(--border-width) solid var(--color-border); padding-top: var(--space-4); }
.my-instructor-step[data-state="current"],
.my-instructor-step[data-state="pending"] { border-color: var(--color-brand-light); background: var(--color-brand-soft); }
.my-instructor-step[data-state="current"] .my-instructor-step__mark,
.my-instructor-step[data-state="pending"] .my-instructor-step__mark { background: var(--color-brand); color: var(--color-surface); }
.my-instructor-step[data-state="done"] .my-instructor-step__mark { background: var(--color-success-soft); color: var(--color-success); }
.my-instructor-step[data-state="locked"] { background: var(--color-surface-soft); }
.my-instructor-step[data-state="locked"] :is(.my-instructor-step__mark, .my-instructor-step__copy strong) { color: var(--color-text-muted); }
.my-instructor-step[data-state="locked"] .my-instructor-step__mark { background: var(--color-surface); box-shadow: inset 0 0 0 var(--border-width) var(--color-border); }
.my-instructor-step[data-state="locked"] .badge { background: var(--color-surface); color: var(--color-text-muted); }
@media (max-width: 39.999rem) {
    /* 좁은 화면에서 토글이 한 줄을 다 차지하면 글자는 가운데, 화살표는 오른쪽 끝에 둔다. */
    .my-instructor-step__row > .my-instructor-step__toggle { position: relative; flex-basis: 100%; }
    .my-instructor-step__toggle .icon { position: absolute; inset-block: 0; inset-inline-end: var(--space-4); margin-block: auto; }
}

/* 마이페이지 > 강사 인증 > 프로 인증: 등록한 인증 카드(단체 마크 · 번호 · 상태)와 새 신청 폼(소속 단체 · 프로번호 · 제거 줄).
   프로번호 하나하나가 자격이므로 구분선 나열이 아니라 카드로 두고, 아래의 점선 추가 버튼과도 떨어져 보이게 한다. */
.my-professional-list { display: grid; min-width: 0; gap: var(--space-2); margin: 0; padding: 0; list-style: none; container-type: inline-size; }
.my-professional-card { min-width: 0; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); }
.my-professional-card:has(> .my-professional-card__edit:not([hidden])) { border-color: var(--color-brand-light); box-shadow: var(--shadow-sm); padding: var(--space-4); }
/* 인라인 수정이 열리면 같은 카드 자리에서 읽기 영역을 입력칸으로 바꾼다. */
.my-professional-card:has(> .my-professional-card__edit:not([hidden])) > .my-professional-card__read { display: none; }
/* 목록 폭 기준(화면 폭이 아니라 카드가 놓인 칸 폭)으로 배치한다. 좁으면 윗줄에 단체 마크와 상태·메뉴, 그 아래 번호·메타를 카드 전체 폭으로 둔다(3열이면 번호 칸이 몇 글자 폭으로 줄어든다). */
.my-professional-card__read { display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "mark side" "copy copy" "meta meta"; align-items: center; gap: var(--space-2) var(--space-3); }
.my-professional-card__meta { grid-area: meta; }
/* 단체 배지: 단체 공식 로고는 쓰지 않는다(제3자 사용 허락이 없다). 단체 이름 글자와 아래 짧은 선만으로 우리 토큰 색의 배지를 만든다.
   테두리·선은 currentColor라 상태(신청 중 브랜드색, 인증 완료 success색)를 color 하나로 바꾼다. */
.my-professional-card__mark { display: inline-flex; width: 3.5rem; height: 3.5rem; grid-area: mark; flex-direction: column; align-items: center; justify-content: center; gap: .3125rem; border-radius: var(--radius-lg); background: var(--color-brand-soft); box-shadow: inset 0 0 0 var(--border-width) color-mix(in srgb, currentColor 22%, transparent); color: var(--color-brand); padding: var(--space-1); font-size: var(--font-size-xs); font-weight: 800; line-height: 1; letter-spacing: .04em; text-align: center; overflow-wrap: anywhere; }
.my-professional-card__mark::after { width: 1rem; height: .125rem; border-radius: var(--radius-pill); background: currentColor; content: ""; opacity: .45; }
.my-professional-card[data-state="approved"] .my-professional-card__mark { background: var(--color-success-soft); color: var(--color-success); }
/* 추가 인증 카드(계정·인증 #trust): 단체 글자 대신 항목 아이콘. 반려·취소·기한 지남은 흐리게. */
.my-professional-card--trust .my-professional-card__mark { font-size: var(--font-size-lg); }
.my-professional-card--trust .my-professional-card__mark::after { content: none; }
.my-professional-card--trust .my-professional-card__number { font-size: var(--font-size-base); letter-spacing: 0; }
.my-professional-card[data-state="closed"] .my-professional-card__mark { background: color-mix(in srgb, var(--color-border) 60%, var(--color-surface)); color: var(--color-text-muted); }
.my-professional-card__copy { display: grid; min-width: 0; grid-area: copy; }
.my-professional-card__label,
.my-professional-card__meta { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.my-professional-card__number { font-size: var(--font-size-lg); font-variant-numeric: tabular-nums; letter-spacing: .02em; overflow-wrap: anywhere; }
/* 상태 칸은 내용 폭만 차지해 오른쪽에 붙인다. 칸이 늘어나면 ··· 메뉴의 margin-inline-start: auto가 배지와 메뉴를 떨어뜨린다(좁은 2열 배치). */
.my-professional-card__side { display: flex; grid-area: side; align-items: center; gap: var(--space-1); align-self: start; justify-self: end; }
/* 넓으면 마크 | 번호 | 상태·메뉴 3열, 메타는 번호 아래에서 오른쪽 끝까지 쓴다. */
@container (min-width: 28rem) {
    .my-professional-card__read { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "mark copy side" "mark meta meta"; gap: var(--space-1) var(--space-3); }
}
.my-professional-card__edit,
.my-professional-apply { display: grid; min-width: 0; gap: var(--form-stack-gap); }
.my-professional-card__note { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-xs); }
/* 새 신청 폼은 등록한 카드와 같은 모양에 강조 테두리를 둔 작성 카드다. */
.my-professional-apply { border: var(--border-width) solid var(--color-brand-light); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); padding: var(--space-4); }
.my-professional-rows { display: grid; min-width: 0; gap: var(--form-stack-gap); }
.my-professional-row { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--space-2) var(--space-3); }
.my-professional-row > .form-field:first-child,
.my-professional-row > .form-field:nth-child(2) { grid-column: 1 / -1; }
/* 입력칸 옆 버튼은 가운데를 입력칸 rest-line(상자 가운데)에 맞춘다. */
.my-professional-row > .btn { margin-top: calc(var(--form-field-rest-line) - var(--button-height) / 2); }
/* Shared editors use the common form-field component for every control. */
.my-content .action-group { justify-content: flex-end; align-items: center; }

/* A field with its own in-place action (이메일 인증 메일, 연락처 저장). Field messages stay under the input
   without shifting the action; on phones the action drops below the field, right-aligned. */
.my-input-group { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--space-2) var(--space-3); }
.my-input-group__actions { display: flex; justify-content: flex-end; align-items: flex-start; gap: var(--space-2); }

@media (min-width: 40rem) {
    .my-home-entries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .my-input-group { grid-template-columns: minmax(0, 1fr) auto; }
    /* 넓은 화면에서는 버튼 가운데를 입력칸 rest-line(상자 가운데)에 맞춘다. */
    .my-input-group__actions > .btn { margin-top: calc(var(--form-field-rest-line) - var(--button-height) / 2); }
    .my-professional-row { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1.25fr) auto; }
    .my-professional-row > .form-field:first-child,
    .my-professional-row > .form-field:nth-child(2) { grid-column: auto; }
}
/* 다이빙 로그 편집: 기본 그룹·상세 섹션·폼 끝이 surface 그룹 간격을 쓴다. 편집 중 묶음은 .my-content-group--sections. */
.my-log-editor,
.my-log-editor__sections { display: grid; min-width: 0; gap: var(--my-group-gap); }
/* 프리다이빙 로그에서는 스쿠버 전용 칸과, 그 칸만 있는 묶음을 숨긴다(config dive_log_fields.scuba_only). */
.my-log-editor[data-log-discipline="freediving"] .form-section[data-scuba-only],
.my-log-editor[data-log-discipline="freediving"] .form-field:has([data-scuba-only]) { display: none; }
/* 폼 끝 시그니처: 앞 그룹 → 시그니처 → 버튼 간격을 같은 값(--my-ending-gap)으로 둔다.
   이 블록은 부모 grid(--my-group-gap)의 자식이라, 시그니처가 있을 때는 위쪽을 그 차이만큼 당겨 아래 간격과 맞춘다. */
.my-editor-ending { --my-ending-gap: var(--section-ending-gap); display: grid; gap: var(--my-ending-gap); }
.my-editor-ending[data-section-ending] { margin-top: calc(var(--my-ending-gap) - var(--my-group-gap)); }
/* 저장 줄 왼쪽 끝 행동(x-my.form-ending start 슬롯). */
.my-editor-ending__start { display: flex; margin-right: auto; }
/* 내 정보 아래 회원 탈퇴 패널(x-my.confirm-panel). 버튼은 오른쪽 끝, surface 그룹 간격 대신 저장 줄과 같은 간격으로 띄운다. */
.my-withdraw-panel { display: grid; gap: var(--form-stack-gap); margin-top: calc(var(--section-ending-gap) - var(--my-group-gap)); }
.my-withdraw-panel[hidden] { display: none; }
.my-withdraw-panel > .action-group { justify-content: flex-end; }
.instructor-detail-grid { display: grid; min-width: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: var(--space-4); }
.instructor-detail-grid > div { display: grid; min-width: 0; align-content: start; gap: var(--space-1); }
.instructor-detail-grid dt { color: var(--color-text-secondary); font-size: var(--font-size-xs); }
.instructor-detail-grid dd { min-width: 0; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); overflow-wrap: anywhere; }
/* Shared interaction states and responsive layout. */
@media (hover: hover) {
    .my-journal-finder__toggle:hover { border-color: var(--color-brand-light); background: var(--color-brand-soft); }
    .my-log-year-nav__wide > a:hover,
    .my-log-year-picker__panel > a:hover { color: var(--color-brand); }
    .my-log-year-picker__panel > a:hover { background: var(--color-brand-soft); }
    :where(.my-page-actions[data-collapsed] > .my-page-actions__panel) .btn:hover { background: var(--color-brand-soft); }
    .my-account__trigger:hover .my-account__avatar { box-shadow: 0 0 0 var(--border-width-accent) var(--color-surface), 0 0 0 calc(var(--border-width-accent) * 2) var(--color-brand-light); }
    .my-header__inbox:hover,
    a.my-mail-item:hover { background: var(--color-brand-soft); color: var(--color-brand); }
    .my-title-link:hover { color: var(--color-brand); text-decoration: underline; }
    .my-sub-nav > a:hover { color: var(--color-text); }
}

@media (min-width: 40rem) {
    .my-log-finder__fields { grid-template-columns: minmax(7rem, .5fr) minmax(0, 1fr); }
    .my-log-finder__fields > .form-field:last-child { grid-column: 1 / -1; }
    .my-log-year-picker { display: none; }
    .my-log-year-nav__wide { display: flex; min-width: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; }
    .my-log-year-nav__wide > a { display: flex; min-width: max-content; min-height: var(--control-height); align-items: center; border-bottom: var(--border-width-accent) solid transparent; padding: var(--space-2) var(--space-4); color: var(--color-text-secondary); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); text-decoration: none; font-variant-numeric: tabular-nums; }
    .my-log-year-nav__wide > a:first-child { padding-inline-start: 0; }
    .my-log-year-nav__wide > a[aria-current="page"] { border-bottom-color: var(--color-brand); color: var(--color-brand); font-weight: var(--font-weight-semibold); }
    .my-journal-month__entries { gap: var(--space-10); }
    .my-journal-month__entries::before { left: calc(var(--space-12) + var(--space-4)); }
    .my-journal-entry { grid-template-columns: var(--space-12) var(--space-8) minmax(0, 1fr); }
    .my-detail-list > div { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: var(--space-4); }
}

@media (min-width: 48rem) {
    .my-shell { --my-shell-max-width: var(--container-lg); }
    .my-nav { display: flex; }
    .my-shell .public-footer__inner { display: flex; }
    .my-content { max-width: none; }
    .my-home-entries { gap: var(--space-4); }
}

@media (min-width: 64rem) {
    .my-home-hello { grid-template-columns: auto minmax(0, 1fr) minmax(0, 24rem); }
    .my-home-hello__metrics { grid-column: auto; }
    .my-log-finder__fields { grid-template-columns: minmax(7rem, .4fr) minmax(0, 1fr) minmax(0, 1.5fr); }
    .my-log-finder__fields > .form-field:last-child { grid-column: auto; }
}

/* Divided stack: one form whose parts are separated by a rule instead of separate group titles (tour settlement). */
.my-divided { display: grid; min-width: 0; gap: var(--space-8); }
.my-divided > * + * { border-top: var(--border-width) solid var(--color-border); padding-top: var(--space-8); }

/* Real tour operations reuse the MY shell while keeping each responsibility on its own page. */
.tour-card-list,
.tour-expense-list { display: grid; min-width: 0; gap: var(--space-4); }
/* Groups the tour form sections so a completed tour can be disabled as a whole without changing the form rhythm. */
.tour-form-fieldset { display: contents; }
.tour-card { display: grid; min-width: 0; gap: var(--space-5); }
.tour-expense-card__heading { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.tour-expense-card__heading > :first-child { min-width: 0; flex: 1 1 auto; }
/* 투어 카드 제목 줄: 상태 배지와 메뉴가 첫 줄, 제목은 그 아래 카드 전체 폭. */
.tour-card__heading { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-3); }
.tour-card__heading > h2 { grid-column: 1 / -1; }
/* 첫 칸의 상태 배지(드롭다운 없이 배지만 그리는 진행 중·종료·보관됨 포함)는 grid 칸에 늘어나지 않고 글자 폭만 차지한다. */
.tour-card__heading > :first-child { justify-self: start; }
/* 투어 관리 목록의 상태 배지 드롭다운(x-tour.status-menu). 패널은 "···" 메뉴(.item-menu__panel)를 왼쪽 정렬로 쓴다. */
/* 화살표는 배지 안 글자 뒤에 둬서 한 덩어리로 보이게 하고, 눌림 범위·hover도 배지 하나로 맞춘다. */
.tour-status-menu > .tour-status-menu__trigger { display: inline-flex; border-radius: var(--radius-pill); letter-spacing: normal; list-style: none; cursor: pointer; }
.tour-status-menu__badge { padding-right: .5rem; transition: filter var(--duration-fast) var(--ease-standard); }
.tour-status-menu__trigger:hover .tour-status-menu__badge,
.tour-status-menu[open] .tour-status-menu__badge { filter: brightness(.96); }
.tour-status-menu__trigger:focus-visible { outline: .1875rem solid var(--color-focus); outline-offset: .125rem; }
.tour-status-menu__trigger::-webkit-details-marker { display: none; }
.tour-status-menu__chevron { opacity: .7; transition: transform var(--duration-fast) var(--ease-standard); }
.tour-status-menu[open] .tour-status-menu__chevron { transform: rotate(180deg); }
.tour-status-menu__panel { right: auto; left: 0; width: max-content; min-width: calc(var(--space-20) + var(--space-20)); }
.tour-card__heading h2 { margin-top: var(--space-2); font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); }
.my-option-list { display: grid; min-width: 0; gap: var(--space-2); }
/* 투어 참가 이력: 사람 줄과 다른 세로선 타임라인. 시각 · 사건 배지 · 계정 배지 + 닉네임 · 가린 이메일. */
.tour-history-scroll { max-height: min(24rem, 50dvh); overflow-y: auto; overscroll-behavior: contain; }
.tour-history-log { position: relative; display: grid; min-width: 0; margin: 0; padding: var(--space-2) 0 var(--space-1) var(--space-5); list-style: none; }
.tour-history-log::before { position: absolute; top: var(--space-4); bottom: var(--space-4); left: calc(var(--space-2) + 3px); border-left: var(--border-width) solid var(--color-border); content: ""; }
.tour-history-log > li { position: relative; display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-2) 0; color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.tour-history-log > li::before { position: absolute; top: calc(var(--space-2) + .75em - 3.5px); left: calc(var(--space-2) - var(--space-5)); width: 7px; height: 7px; border-radius: 50%; background: var(--color-text-muted); content: ""; }
.tour-history-log time { color: var(--color-text-muted); font-size: var(--font-size-xs); font-variant-numeric: tabular-nums; }
.tour-history-log__who { display: inline-flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); overflow-wrap: anywhere; }
.tour-history-log .badge { flex-shrink: 0; white-space: nowrap; }
.tour-history-log__name { color: var(--color-text); font-weight: var(--font-weight-medium); }
.tour-complete-list { display: grid; gap: var(--space-2); margin: 0; padding-left: var(--space-5); font-size: var(--font-size-sm); }
.tour-expense-card { display: grid; gap: var(--space-3); }
.tour-expense-card__heading h2 { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); }
.tour-expense-card__heading > strong { color: var(--color-brand); font-size: var(--font-size-lg); font-variant-numeric: tabular-nums; }
/* Tour settlement tab: summary, allocation under each list-builder item (js/tour-settlement.js), deposit notice. */
.tour-settlement-summary,
.tour-settlement-deposit { display: grid; min-width: 0; gap: var(--space-3); }
/* 정산 요약은 이 화면의 슬레이트(.slate)다. 합계는 계기판 숫자. */
.tour-settlement-summary dl { display: grid; min-width: 0; margin: 0; padding-bottom: var(--space-3); }
.tour-settlement-summary dl > div { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-2); }
.tour-settlement-summary dl > div + div { border-top: var(--border-width) solid var(--color-border); }
.tour-settlement-summary dt { min-width: 0; overflow-wrap: anywhere; font-size: var(--font-size-sm); }
.tour-settlement-summary dd { flex: 0 0 auto; font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; text-align: right; }
.tour-settlement-summary__total dt,
.tour-settlement-summary__total dd { color: var(--color-brand); font-weight: var(--font-weight-semibold); }
.tour-settlement-summary__total dd { font-family: var(--font-gauge); font-size: var(--font-size-2xl); line-height: 1; }
.tour-settlement-allocation__toggle { justify-self: start; font-variant-numeric: tabular-nums; }
.tour-settlement-allocation__toggle > .icon { transition: transform var(--duration-fast) var(--ease-standard); }
.tour-settlement-allocation__toggle.is-open > .icon { transform: rotate(180deg); }
.tour-settlement-allocation__toggle.is-mismatch { border-color: var(--color-danger); color: var(--color-danger); }
.tour-settlement-allocation { display: grid; min-width: 0; gap: var(--space-2); border-radius: var(--radius-lg); background: var(--color-surface-soft); padding: var(--space-3); }
.tour-settlement-allocation[hidden] { display: none; }
.tour-settlement-allocation__list { display: grid; min-width: 0; gap: var(--space-1); }
.tour-settlement-allocation__row { display: flex; min-width: 0; align-items: center; gap: var(--space-2); }
.tour-settlement-allocation__who { min-width: 0; flex: 1 1 auto; }
.tour-settlement-allocation__who strong,
.tour-settlement-allocation__who small { display: block; overflow-wrap: anywhere; }
.tour-settlement-allocation__who strong { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.tour-settlement-allocation__who small { color: var(--color-text-secondary); font-size: var(--font-size-xs); }
.tour-settlement-allocation__row > .my-list-builder__field { flex: 0 1 9rem; }
.tour-settlement-allocation__row input { text-align: right; font-variant-numeric: tabular-nums; }
.tour-settlement-allocation__tools { justify-content: flex-start; }
.tour-settlement-allocation__add { width: auto; min-height: var(--control-height-sm); padding-block: 0; font-size: var(--font-size-sm); }
.tour-settlement-allocation__message { color: var(--color-success); font-size: var(--font-size-xs); }
.tour-settlement-allocation__message[data-state="mismatch"] { color: var(--color-danger); }
.tour-settlement-allocation__message[data-state="empty"] { color: var(--color-text-secondary); }
/* MY 화면 링크 탭과 흐름 단계 */
.my-sub-nav { display: flex; min-width: 0; gap: var(--space-1); overflow-x: auto; overscroll-behavior-inline: contain; border-bottom: var(--border-width) solid var(--color-border); }
.my-sub-nav > a { position: relative; flex: 0 0 auto; padding: var(--space-2) var(--space-3); color: var(--color-text-secondary); font-size: var(--font-size-sm); white-space: nowrap; }
.my-sub-nav > a[aria-current="page"] { color: var(--color-brand); font-weight: var(--font-weight-semibold); }
/* 현재 탭은 곧은 밑줄 대신 물결(docs/ui/design-style.md 01). */
.my-sub-nav:not(.my-sub-nav--minor, .my-sub-nav--filter) > a[aria-current="page"]::after { position: absolute; top: var(--wave-line-top); right: var(--space-3); left: var(--space-3); height: .3125rem; background: var(--color-brand); content: ""; -webkit-mask: var(--wave-line); mask: var(--wave-line); }
/* PC·태블릿: 첫 탭 글자를 시트 본문 왼쪽 선에 맞춘다(폰은 앱 상단 탭이라 시트 끝까지 붙이고 여백을 따로 준다). */
@media (min-width: 48rem) {
    .my-sub-nav:not(.my-sub-nav--minor, .my-sub-nav--filter) > a:first-child { padding-left: 0; }
    .my-sub-nav:not(.my-sub-nav--minor, .my-sub-nav--filter) > a:first-child::after { left: 0; }
}
.my-sub-nav__count { color: var(--color-text-muted); font-family: var(--font-gauge); font-size: 1.125em; font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; }
.my-sub-nav > a[aria-current="page"] .my-sub-nav__count { color: var(--color-brand-mid); }
/* Filter: 같은 목록을 상태로 거르는 탭(투어 관리 목록). 고른 칸을 청록으로 채우고 나침반 바늘을 둔다(02). */
.my-sub-nav--filter { gap: var(--space-1); align-self: flex-start; width: fit-content; max-width: 100%; border: 0; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--color-border) 45%, var(--color-surface)); padding: var(--space-1); }
.my-sub-nav--filter > a { display: inline-flex; align-items: center; gap: .3em; border-radius: var(--radius-pill); padding: var(--space-2) var(--space-4); font-weight: var(--font-weight-semibold); }
.my-sub-nav--filter > a[aria-current="page"] { background: var(--color-brand); color: var(--color-surface); padding-left: var(--space-3); }
.my-sub-nav--filter > a[aria-current="page"]::before { width: .625rem; height: 1.125rem; margin-right: .2em; background: var(--compass-needle) center / contain no-repeat; content: ""; }
.my-sub-nav--filter > a[aria-current="page"] .my-sub-nav__count { color: var(--color-brand-light); }
/* Minor: tabs inside a tab page (tour checklist audiences), pills so they read as one level below the tabs above. */
.my-sub-nav--minor { gap: var(--space-2); border-bottom: 0; }
.my-sub-nav--minor > a { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-pill); padding: var(--space-1) var(--space-3); }
.my-sub-nav--minor > a[aria-current="page"] { border-color: var(--color-brand); background: var(--color-brand-soft); }
/* 사진 관리(x-my.photo-manager): 여행·로그 사진 격자. 손잡이를 끌거나 화살표 키로 순서를 바꾸고, 첫 번째 칸이 대표 사진이다. */
.photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.photo-card { position: relative; margin: 0; }
.photo-card__media { position: relative; }
.photo-card img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-md); pointer-events: none; user-select: none; }
.photo-card__caption { margin: var(--space-2) 0 0; font-size: var(--font-size-sm); overflow-wrap: anywhere; }
.photo-card__badge { position: absolute; bottom: var(--space-2); left: var(--space-2); }
.photo-card__badge[hidden] { display: none; }
.photo-card__handle { position: absolute; z-index: 1; top: var(--space-2); left: var(--space-2); display: inline-flex; width: var(--control-height-sm); height: var(--control-height-sm); align-items: center; justify-content: center; border: 0; border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text-secondary); box-shadow: var(--shadow-sm); cursor: grab; touch-action: none; }
.photo-card__handle:focus-visible { outline: var(--border-width-accent) solid var(--color-brand-mid); outline-offset: var(--border-width); }
.photo-card.is-dragging { opacity: .55; }
.photo-card.is-dragging .photo-card__handle { cursor: grabbing; }

@media (min-width: 40rem) {
    .photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


@media (min-width: 48rem) {
    /* 종목 | 날짜 / 여행 지역 | 시간대 / 횟수 | 포인트(선택) (datalist는 grid 칸을 차지하지 않는다) */
    .my-quick-log__fields { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .my-quick-log__fields > .form-field:nth-of-type(1),
    .my-quick-log__fields > .form-field:nth-of-type(2) { grid-column: span 3; }
    .my-quick-log__fields > .form-field:nth-of-type(3),
    .my-quick-log__fields > .form-field:nth-of-type(6) { grid-column: span 4; }
    .my-quick-log__fields > .form-field:nth-of-type(4),
    .my-quick-log__fields > .form-field:nth-of-type(5) { grid-column: span 2; }
}

/* 공개 프로필 관리(my.public-profile): 강사 자격 배지 줄, 연도별로 접은 로그 고르기. */
.public-profile-credentials { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; list-style: none; }
.public-profile-years { border-bottom: var(--border-width) solid var(--color-border); }
.public-profile-years:first-of-type { border-top: var(--border-width) solid var(--color-border); }
.public-profile-years > summary { display: flex; min-height: var(--control-height); align-items: center; gap: var(--space-3); list-style: none; cursor: pointer; }
.public-profile-years > summary::-webkit-details-marker { display: none; }
.public-profile-years__year { color: var(--color-brand); font-family: var(--font-gauge); font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }
.public-profile-years__count { margin-left: auto; color: var(--color-text-secondary); font-size: var(--font-size-xs); }
.public-profile-years__chevron { flex: 0 0 auto; color: var(--color-text-muted); transition: transform var(--duration-fast) var(--ease-standard); }
.public-profile-years[open] .public-profile-years__chevron { transform: rotate(180deg); }
.public-profile-years > .my-option-list { padding-bottom: var(--space-4); }