/* mentoring 공통 스타일 — docs/specs/mentoring.md §5·§11
 * 토큰 출처: 레퍼런스 https://axmos-teamwear.netlify.app/ (2026-10-16 추출, TDS 계열).
 * base.css 변수(--primary 등)를 아래 토큰으로 재지정한다. 컴포넌트는 var()/hsl(var()) 만 쓴다.
 */
:root {
    --color-bg: #FFFFFF;
    --color-bg-secondary: #F2F4F6;
    --color-bg-tertiary: #E5E8EB;
    --color-surface: #FFFFFF;
    --color-text: #191F28;
    --color-text-secondary: #4E5968;
    --color-text-muted: rgba(2, 32, 71, .58);
    --color-text-faint: rgba(2, 32, 71, .28);
    --color-disabled: #B0B8C1;
    --color-primary: #3182F6;
    --color-primary-weak: #E8F3FF;
    --color-on-primary: #FFFFFF;
    --color-border: #E5E8EB;
    --color-border-strong: #B0B8C1;
    --color-warning: #F04452;
    --color-warning-weak: #FFF0F1;
    --color-success: #1B7F44;
    --color-success-weak: #E6F5EC;
    --color-cancelled: #B0B8C1;
    --shadow-1: 0 1px 2px rgba(2, 32, 71, .04), 0 1px 1px rgba(2, 32, 71, .04);
    --font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Apple SD Gothic Neo", "Noto Sans KR", Roboto, "Helvetica Neue", Arial, sans-serif;
    --radius-sm: 12px;
    --radius-md: 14px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 999px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --ease: cubic-bezier(.22, .61, .36, 1);
    --dur-fast: 120ms;
    --dur-base: 200ms;

    /* base.css 변수 재지정 (hsl 토큰) */
    --background: 0 0% 100%;
    --foreground: 216 22% 13%;
    --card: 0 0% 100%;
    --card-foreground: 216 22% 13%;
    --primary: 215 92% 58%;
    --primary-foreground: 0 0% 100%;
    --secondary: 210 20% 96%;
    --secondary-foreground: 216 22% 13%;
    --muted: 210 20% 96%;
    --muted-foreground: 214 14% 36%;
    --accent: 210 100% 95%;
    --accent-foreground: 216 22% 13%;
    --border: 210 13% 91%;
    --input: 210 13% 91%;
    --ring: 215 92% 58%;
    --radius: 14px;
    --destructive: 355 86% 61%;
    --destructive-foreground: 0 0% 100%;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-bg: #202027;
        --color-bg-secondary: #2C2C35;
        --color-bg-tertiary: #3C3C47;
        --color-surface: #2C2C35;
        --color-text: #FFFFFF;
        --color-text-secondary: #C3C3C6;
        --color-text-muted: #9E9EA4;
        --color-text-faint: #7E7E87;
        --color-disabled: #62626D;
        --color-primary: #3485FA;
        --color-primary-weak: #202C4D;
        --color-border: #3C3C47;
        --color-border-strong: #62626D;
        --color-warning: #F04251;
        --color-warning-weak: #3A2226;
        --color-success: #5FCB85;
        --color-success-weak: #1F3A2A;
        --color-cancelled: #62626D;
        --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
        --background: 240 10% 14%;
        --foreground: 0 0% 100%;
        --card: 240 9% 19%;
        --card-foreground: 0 0% 100%;
        --primary: 215 95% 59%;
        --secondary: 240 9% 19%;
        --secondary-foreground: 0 0% 100%;
        --muted: 240 9% 19%;
        --muted-foreground: 240 3% 62%;
        --accent: 225 41% 21%;
        --accent-foreground: 0 0% 100%;
        --border: 240 8% 26%;
        --input: 240 8% 26%;
        color-scheme: dark;
    }
}

html, body { margin: 0; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-family);
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: -0.005em;
    -webkit-font-smoothing: antialiased;
    padding: 0 16px calc(48px + env(safe-area-inset-bottom, 0px));
    word-break: keep-all;        /* 한글 어절 중간에서 끊지 않고 띄어쓰기에서만 줄바꿈 */
    overflow-wrap: anywhere;     /* 링크처럼 띄어쓰기 없는 긴 토큰만 예외로 끊는다 */
}
p, li, .m-lead, .m-help, .m-hint, .m-foot, .m-notice { text-wrap: pretty; }
/* 문장 단위 줄바꿈: common.js 가 안내문의 문장마다 .m-sent 로 감싼다 — 한 문장이 줄에 들어가면 통째로, 넘치면 띄어쓰기에서 */
.m-sent { display: inline-block; max-width: 100%; }

/* 단일 열 레이아웃 (멘티·멘토) */
.m-page {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding-top: 24px;
}
.m-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 44px;
    margin-bottom: var(--space-5);
}
.m-topbar .m-user { font-size: 13px; color: var(--color-text-secondary); }
.m-eyebrow {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
    letter-spacing: 0;
    margin-bottom: var(--space-2);
}
h1.m-title { font-size: 28px; line-height: 1.3; letter-spacing: -0.02em; font-weight: 800; margin: 0 0 var(--space-3); }
h2.m-section { font-size: 20px; line-height: 1.35; letter-spacing: -0.015em; font-weight: 700; margin: var(--space-8) 0 var(--space-3); }
h3.m-sub { font-size: 16px; font-weight: 700; margin: var(--space-5) 0 var(--space-2); }
.m-lead { color: var(--color-text-secondary); margin: 0 0 var(--space-5); }
.m-help { font-size: 13px; color: var(--color-text-muted); letter-spacing: 0; }
.m-foot { font-size: 12px; line-height: 1.6; letter-spacing: 0; color: var(--color-text-muted); margin-top: var(--space-6); }

/* 번호 규칙 3줄 */
.m-rules { display: grid; gap: 0; border-top: 1px solid var(--color-border); margin: var(--space-5) 0; padding: 0; list-style: none; }
.m-rules li {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-secondary);
}
.m-rules li b { color: var(--color-text); }
.m-rules .m-num {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--color-primary-weak); color: var(--color-primary);
    font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center;
}

/* 버튼 — base.css .btn 위에 레퍼런스 톤 */
.m-btn {
    position: relative; overflow: hidden;
    width: 100%; min-height: 48px; border-radius: var(--radius-md); border: 0; padding: 0 var(--space-3);
    font-size: 17px; font-weight: 700; line-height: 1.25; letter-spacing: -0.005em;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    white-space: nowrap;         /* 버튼 안에서는 줄바꿈하지 않는다 — 좁으면 아래 미디어 쿼리로 글자를 줄인다 */
    cursor: pointer; font-family: inherit;
    transition: opacity var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
a.m-btn, a.m-btn:hover { text-decoration: none; }
.m-btn:focus-visible { outline: 3px solid var(--color-primary-weak); outline-offset: 2px; }
.m-btn.primary { background: var(--color-primary); color: var(--color-on-primary); }
.m-btn.secondary { background: var(--color-bg-secondary); color: var(--color-text); }
.m-btn.outline { background: transparent; color: var(--color-text); border: 1px solid var(--color-border-strong); }
.m-btn.danger { background: var(--color-warning); color: #fff; }
.m-btn.text { background: transparent; color: var(--color-primary); min-height: 40px; font-size: 15px; width: auto; padding: 0 var(--space-3); }
.m-btn.sm { min-height: 40px; font-size: 15px; }
.m-btn:disabled { opacity: .45; cursor: not-allowed; }
.m-btn-row { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2); }   /* 왼쪽(보조)은 글자 폭만큼, 오른쪽(주)이 나머지 */
@media (max-width: 400px) {
    .m-btn { font-size: 16px; }
    .m-btn.sm, .m-btn.text { font-size: 14px; }
}
@media (max-width: 340px) {
    .m-btn { font-size: 15px; }
}
.m-stack { display: grid; gap: var(--space-2); }

/* 카드 */
.m-card {
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl);
    padding: var(--space-5); display: grid; gap: var(--space-3); box-shadow: var(--shadow-1);
    transition: border-color var(--dur-base) var(--ease);
}
.m-card.cancelled { opacity: .72; background: var(--color-bg-secondary); }
.m-card .m-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.m-card .m-card-time { font-size: 18px; font-weight: 800; }

/* 칩·배지 (색 + 문구 병기) */
.m-chip {
    display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px;
    border-radius: var(--radius-pill); border: 1px solid var(--color-border);
    background: var(--color-surface); color: var(--color-text-secondary); font-size: 12px; font-weight: 600; letter-spacing: 0; white-space: nowrap;
}
.m-chip.ok { background: var(--color-success-weak); color: var(--color-success); border-color: transparent; }
.m-chip.warn { background: var(--color-warning-weak); color: var(--color-warning); border-color: transparent; }
.m-chip.brand { background: var(--color-primary-weak); color: var(--color-primary); border-color: transparent; }
.m-chip.muted { background: var(--color-bg-secondary); color: var(--color-text-muted); border-color: transparent; }

/* 폼 */
.m-field { display: grid; gap: 6px; margin-bottom: var(--space-4); }
.m-field label { font-size: 14px; font-weight: 700; }
.m-field .m-req { color: var(--color-warning); margin-left: 2px; }
.m-field input[type="text"],
.m-field input[type="password"], .m-field input[type="tel"], .m-field input[type="url"], .m-field input[type="number"],
.m-field input[type="date"], .m-field input[type="datetime-local"], .m-field input[type="time"], .m-field input[type="email"],
.m-field select, .m-field textarea {
    width: 100%; min-height: 48px; padding: 12px 14px; border-radius: var(--radius-sm);
    border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text);
    font-size: 16px; font-family: inherit;
}
.m-field textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.m-field input:focus, .m-field select:focus, .m-field textarea:focus { outline: 2px solid var(--color-primary); border-color: var(--color-primary); }
.m-field .m-hint { font-size: 12px; color: var(--color-text-muted); letter-spacing: 0; }
.m-field .m-error { font-size: 12px; color: var(--color-warning); }
.m-field.has-error input, .m-field.has-error textarea, .m-field.has-error select { border-color: var(--color-warning); }
.m-radio-row { display: grid; gap: var(--space-2); }
.m-radio {
    display: flex; align-items: center; gap: var(--space-3); min-height: 48px; padding: 0 var(--space-4);
    border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer;
}
.m-radio.selected { border-color: var(--color-primary); background: var(--color-primary-weak); }
.m-check { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) 0; }
.m-check input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--color-primary); }

/* 알림줄 */
.m-notice { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--color-bg-secondary); color: var(--color-text-secondary); font-size: 14px; }
.m-notice.warn { background: var(--color-warning-weak); color: var(--color-warning); }
.m-notice.ok { background: var(--color-success-weak); color: var(--color-success); }
.m-notice.brand { background: var(--color-primary-weak); color: var(--color-primary); }
.m-toast {
    position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
    background: var(--color-text); color: var(--color-bg); padding: 12px 18px; border-radius: var(--radius-pill);
    font-size: 14px; font-weight: 600; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); z-index: 60; max-width: calc(100% - 32px);
}

/* 날짜 탭 */
.m-tabs { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: 4px; margin-bottom: var(--space-4); -webkit-overflow-scrolling: touch; }
.m-tab {
    flex: 0 0 auto; min-height: 44px; padding: 0 var(--space-4); border-radius: var(--radius-pill);
    border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text);
    font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.m-tab[aria-selected="true"] { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }

/* 슬롯 그리드: 모바일 3~4열, PC 6열, 터치 영역 ≥44px */
.m-slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
@media (min-width: 420px) { .m-slot-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 768px) { .m-slot-grid { grid-template-columns: repeat(6, 1fr); } }
.m-slot {
    min-height: 48px; border-radius: var(--radius-sm); border: 1px solid var(--color-border);
    background: var(--color-surface); color: var(--color-text); font-size: 16px; font-weight: 700; cursor: pointer; font-family: inherit;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.m-slot:hover { border-color: var(--color-primary); }
.m-slot.selected { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.m-slot:focus-visible { outline: 3px solid var(--color-primary-weak); }

/* 모달 — hidden 속성으로 여닫는다(요소 자체에 display 지정 금지) */
.m-modal-backdrop {
    position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 50;
    display: flex; align-items: flex-end; justify-content: center;
}
@media (min-width: 640px) { .m-modal-backdrop { align-items: center; } }
.m-sheet {
    width: 100%; max-width: 520px; background: var(--color-surface); color: var(--color-text);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: 24px 24px calc(24px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -2px 12px rgba(2, 32, 71, .06); display: grid; gap: var(--space-4);
}
@media (min-width: 640px) { .m-sheet { border-radius: 20px; padding-bottom: 24px; } }
.m-sheet h3 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.015em; }
.m-sheet p { margin: 0; color: var(--color-text-secondary); }

/* 카운트다운 */
.m-countdown { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--color-primary); }

/* 입장 정보 */
.m-entry { display: grid; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-primary-weak); }
.m-entry a { color: var(--color-primary); font-weight: 700; word-break: break-all; }
.m-entry .m-pw { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 16px; }

/* 접근성·모션 */
:focus-visible { outline: 3px solid var(--color-primary-weak); outline-offset: 2px; }
@keyframes m-pop { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.m-sheet { animation: m-pop var(--dur-base) var(--ease); }
@media (prefers-reduced-motion: reduce) {
    .m-sheet, .m-btn, .m-slot, .m-card { animation: none !important; transition: none !important; }
}
.m-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.m-empty { padding: var(--space-6); text-align: center; color: var(--color-text-muted); border: 1px dashed var(--color-border); border-radius: var(--radius-lg); }