/*
 * my-modern.css — 마이페이지 새 디자인 (2026-08-21)
 *
 * 좌측 snb 2단 메뉴 + .search_box 로 만들던 옛 화면을, 자료실과 같은
 * 상단 탭 + 카드 레이아웃으로 다시 만든 것. 껍데기는 skin/modern/shell_top.php.
 *
 * 토큰 블록은 studymaterials/skin/modern/pds-modern.css 와 같은 스냅샷이다
 * (/var/services/web/.design/tokens.css 의 iteach 브랜드 값). tokens.css 가
 * 웹으로 직접 서빙되면 세 파일 모두 <link> 한 줄로 교체한다.
 */
:root {
	--font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
		'system-ui', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Segoe UI', Roboto, sans-serif;

	--fs-xs: .75rem; --fs-sm: .875rem; --fs-base: 1rem; --fs-md: 1.125rem;
	--fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: 1.875rem; --fs-3xl: 2.25rem;
	--line-tight: 1.3; --line-base: 1.65;
	--letter-tight: -.02em;
	--fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

	--space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem;
	--space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;

	--radius-sm: .25rem; --radius-md: .5rem; --radius-lg: .75rem; --radius-xl: 1rem; --radius-full: 9999px;

	--shadow-xs: 0 1px 2px rgb(0 0 0 / .04);
	--shadow-sm: 0 1px 3px rgb(0 0 0 / .08), 0 1px 2px rgb(0 0 0 / .04);
	--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .10), 0 2px 4px -2px rgb(0 0 0 / .06);
	--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .10), 0 4px 6px -4px rgb(0 0 0 / .05);

	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--duration-fast: 150ms; --duration-base: 200ms;

	/* .pds-page-wrap 이 이 값을 쓴다. 예전엔 선언 없이 top2.php 의 :root 에
	 * 우연히 기대고 있어서, 헤더를 바꾸면 페이지가 조용히 full-bleed 로 퍼졌다.
	 * 스냅샷은 그 자체로 완결돼야 한다. */
	--container-max: 1400px;

	--gray-50: #f8fafc; --gray-100: #f1f5f9; --gray-200: #e2e8f0; --gray-300: #cbd5e1;
	--gray-400: #94a3b8; --gray-500: #64748b; --gray-600: #475569; --gray-700: #334155;
	--gray-800: #1e293b; --gray-900: #0f172a;

	--color-bg: #ffffff;
	--color-fg: var(--gray-900);
	--color-fg-muted: var(--gray-500);
	--color-fg-subtle: var(--gray-400);
	--color-border: var(--gray-200);
	--color-border-strong: var(--gray-300);
	--color-surface: var(--gray-50);
	--color-surface-2: var(--gray-100);

	--color-primary: #4f46e5; --color-primary-hover: #4338ca; --color-primary-active: #3730a3;
	--color-primary-fg: #fff; --color-primary-soft: #eef2ff; --color-primary-soft-fg: #3730a3;

	--color-accent: #b8893a; --color-accent-hover: #a37828;
	--color-accent-soft: #f6ecd6; --color-accent-soft-fg: #6e5018; --color-accent-fg: #fff;

	--color-success: #16a34a; --color-success-soft: #dcfce7;
	--color-danger: #dc2626; --color-danger-hover: #b91c1c; --color-danger-soft: #fee2e2;
	--color-warn: #d97706; --color-warn-soft: #fef3c7;
}

/* ─────────────────────────────────────────────────────────────
 * 페이지 래퍼 — top2.php 헤더와 짝. 레거시 #wrapper(1240px) /
 * .container article(970px) 대신 여기서 최대폭을 잡는다.
 * ───────────────────────────────────────────────────────────── */
.my-page, .my-page * { box-sizing: border-box; }
.my-page {
	font-family: var(--font-sans);
	color: var(--color-fg);
	background: var(--color-bg);
	font-size: var(--fs-base);
	line-height: var(--line-base);
}
.my-page a { color: inherit; text-decoration: none; }
.my-page img { max-width: 100%; }
.my-page-wrap {
	width: 100%; max-width: var(--container-max);
	margin: 0 auto; padding: 0 var(--space-6);
}
@media (max-width: 640px) { .my-page-wrap { padding: 0 var(--space-4); } }

/* 상단 탭 — 자료실(.pds-tabnav)과 같은 기하 */
.my-tabnav {
	display: flex; gap: var(--space-1); flex-wrap: wrap;
	border-bottom: 1px solid var(--color-border);
	margin-top: var(--space-5);
}
.my-tabnav a {
	font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-fg-muted);
	padding: var(--space-3) var(--space-4); border-bottom: 2px solid transparent; margin-bottom: -1px;
	transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.my-tabnav a:hover { color: var(--color-fg); }
.my-tabnav a.active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: var(--fw-semibold); }

.my-main { margin: var(--space-6) 0 var(--space-12); }

/* ── 히어로 (인사 + 요약) ────────────────────────────────── */
.my-hero {
	background: linear-gradient(135deg, var(--color-primary-soft), var(--color-surface));
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	padding: var(--space-6) var(--space-6);
	margin-bottom: var(--space-5);
}
.my-hero h2 {
	margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-bold);
	letter-spacing: var(--letter-tight); line-height: var(--line-tight);
}
.my-hero .my-hero-sub { margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--color-fg-muted); }
.my-hero-icons { display: inline-flex; align-items: center; gap: var(--space-1); vertical-align: -3px; }
.my-hero-icons img { height: 16px; width: auto; }

/* ── 지표 타일 (CP / 캐쉬 / 코인 …) ─────────────────────── */
.my-stats {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--space-3); margin-bottom: var(--space-5);
}
.my-stat {
	background: var(--color-bg); border: 1px solid var(--color-border);
	border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5);
	box-shadow: var(--shadow-xs);
}
.my-stat .label { font-size: var(--fs-xs); color: var(--color-fg-muted); font-weight: var(--fw-medium); }
.my-stat .value {
	margin-top: var(--space-1); font-size: var(--fs-lg); font-weight: var(--fw-bold);
	letter-spacing: var(--letter-tight); font-variant-numeric: tabular-nums; word-break: break-all;
}
.my-stat .value .unit { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-fg-muted); margin-left: 2px; }
.my-stat .note { margin-top: var(--space-1); font-size: var(--fs-xs); color: var(--color-fg-subtle); }
.my-stat.is-accent .value { color: var(--color-primary); }

/* ── 섹션 카드 ───────────────────────────────────────────── */
.my-card {
	background: var(--color-bg); border: 1px solid var(--color-border);
	border-radius: var(--radius-lg); padding: var(--space-5);
	box-shadow: var(--shadow-xs); margin-bottom: var(--space-5);
}
.my-card-title {
	display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
	margin: 0 0 var(--space-4); font-size: var(--fs-md); font-weight: var(--fw-semibold);
	letter-spacing: var(--letter-tight);
}
.my-card-title .my-sub { font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--color-fg-muted); }
.my-card-note { font-size: var(--fs-sm); color: var(--color-fg-muted); }
.my-card-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4); }

/* 라벨 + 값 목록 */
.my-dl { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--space-2) var(--space-4); margin: 0; }
.my-dl dt { font-size: var(--fs-sm); color: var(--color-fg-muted); font-weight: var(--fw-medium); }
.my-dl dd { margin: 0; font-size: var(--fs-sm); word-break: break-word; }
@media (max-width: 560px) { .my-dl { grid-template-columns: 100px minmax(0, 1fr); } }

/* 체크리스트 (1일 무료충전 조건) */
.my-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.my-checklist li {
	display: flex; align-items: flex-start; gap: var(--space-2);
	font-size: var(--fs-sm); color: var(--color-fg-muted);
}
.my-checklist li .mark {
	flex: 0 0 auto; width: 18px; height: 18px; border-radius: var(--radius-full);
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 11px; font-weight: var(--fw-bold);
	background: var(--color-surface-2); color: var(--color-fg-subtle);
}
.my-checklist li.is-on { color: var(--color-fg); }
.my-checklist li.is-on .mark { background: var(--color-success-soft); color: var(--color-success); }
.my-checklist li .gain { margin-left: auto; font-weight: var(--fw-semibold); white-space: nowrap; color: var(--color-fg-subtle); }
.my-checklist li.is-on .gain { color: var(--color-success); }

/* ── 표 ──────────────────────────────────────────────────── */
.my-table {
	width: 100%; border-collapse: collapse;
	background: var(--color-bg); border: 1px solid var(--color-border);
	border-radius: var(--radius-lg); overflow: hidden;
	font-size: var(--fs-sm);
}
.my-table thead th {
	background: var(--color-surface); border-bottom: 1px solid var(--color-border);
	padding: var(--space-3) var(--space-4);
	font-size: var(--fs-xs); font-weight: var(--fw-semibold);
	color: var(--color-fg-muted); text-align: center; white-space: nowrap;
}
.my-table td {
	padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border);
	text-align: center; vertical-align: middle; word-break: break-word;
}
.my-table tbody tr:last-child td { border-bottom: 0; }
.my-table tbody tr:hover td { background: var(--color-surface); }
.my-table td.left { text-align: left; }
.my-table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.my-table a { color: var(--color-primary); }
.my-table a:hover { text-decoration: underline; }
.my-table tr.is-me td { background: var(--color-primary-soft); font-weight: var(--fw-semibold); }
.my-table tr.is-me:hover td { background: var(--color-primary-soft); }
@media (max-width: 720px) {
	.my-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.my-table { min-width: 640px; }
}

/* 증감 배지 */
.my-delta { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.my-delta.is-plus { color: var(--color-primary); }
.my-delta.is-minus { color: var(--color-danger); }

/* ── 버튼 / 칩 / 폼 ──────────────────────────────────────── */
.my-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
	height: 38px; padding: 0 var(--space-5);
	border: 1px solid var(--color-border); border-radius: var(--radius-full);
	font-family: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold);
	background: var(--color-bg); color: var(--color-fg-muted);
	white-space: nowrap; cursor: pointer;
	transition: background var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out),
	            border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.my-btn:hover { background: var(--color-surface); color: var(--color-fg); border-color: var(--color-border-strong); }
.my-btn:focus-visible { outline: 3px solid var(--color-primary-soft); outline-offset: 2px; }
.my-btn-primary { background: var(--color-primary); color: var(--color-primary-fg); border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.my-btn-primary:hover { background: var(--color-primary-hover); color: var(--color-primary-fg); border-color: var(--color-primary-hover); box-shadow: var(--shadow-md); }
.my-btn-danger { color: var(--color-danger); border-color: var(--color-danger-soft); }
.my-btn-danger:hover { background: var(--color-danger-soft); color: var(--color-danger-hover); border-color: var(--color-danger); }

.my-toolbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.my-toolbar .spacer { flex: 1 1 auto; }
.my-select, .my-input {
	height: 38px; padding: 0 var(--space-3);
	font-family: inherit; font-size: var(--fs-sm); color: var(--color-fg);
	background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md);
}
.my-select:focus, .my-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }

.my-empty {
	text-align: center; padding: var(--space-12) var(--space-4);
	color: var(--color-fg-muted); background: var(--color-surface); border-radius: var(--radius-lg);
}
.my-footbar { display: flex; align-items: center; justify-content: center; margin-top: var(--space-5); }

/* 페이지네이션 — class/page.php 가 찍는 마크업에 맞춘다 (자료실과 동일) */
.my-page .page_nav { margin: var(--space-2) auto 0; }
.my-page .page_nav .paging { list-style: none; display: flex; justify-content: center; gap: 2px; margin: 0; padding: 0; flex-wrap: wrap; }
.my-page .page_nav .paging li a, .my-page .page_nav .paging li span {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 32px; height: 32px; padding: 0 var(--space-2);
	border: 1px solid var(--color-border); border-radius: var(--radius-md);
	font-size: var(--fs-sm); color: var(--color-fg-muted); background: var(--color-bg);
}
.my-page .page_nav .paging li a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.my-page .page_nav .paging li.on a, .my-page .page_nav .paging li a.on {
	background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-fg); font-weight: var(--fw-semibold);
}

/* 광고 슬롯 — 고정폭 <ins> 가 칸을 뚫지 않게 (자료실 .pds-ad 와 같은 처리) */
.my-ad { max-width: 100%; overflow: hidden; text-align: center; line-height: 0; margin: var(--space-5) 0; }
.my-ad ins, .my-ad iframe { max-width: 100% !important; }

/* ─────────────────────────────────────────────────────────────
 * 레거시 폼 표 (.cForm) — 정보수정(modify.php)
 *
 * 이 화면의 폼은 필드명·검증 JS 가 서버 처리와 1:1 로 묶여 있어 마크업을
 * 갈아엎지 않았다. 대신 표를 라벨/입력 2단으로 다시 그려 새 디자인에 맞춘다.
 * bgcolor 속성(#F5F5F5 등)은 표현용 속성이라 CSS 가 이긴다 — 줄무늬가 사라진다.
 * ───────────────────────────────────────────────────────────── */
.my-card table.cForm { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.my-card table.cForm td {
	padding: var(--space-3) var(--space-2);
	border-bottom: 1px solid var(--color-border);
	vertical-align: top; line-height: var(--line-base); color: var(--color-fg);
	background: transparent;
}
.my-card table.cForm tr:last-child td { border-bottom: 0; }
.my-card table.cForm td:first-child:not([colspan]) {
	width: 150px; white-space: nowrap;
	color: var(--color-fg-muted); font-weight: var(--fw-medium);
}
.my-card table.cForm td[colspan] { color: var(--color-fg-muted); font-size: var(--fs-xs); }
.my-card table.cForm a { color: var(--color-primary); }
.my-card table.cForm a:hover { text-decoration: underline; }
.my-card table.cForm font[color="#999999"], .my-card table.cForm td.ul { color: inherit; }
@media (max-width: 560px) {
	.my-card table.cForm td:first-child:not([colspan]) { width: 96px; white-space: normal; }
}

/* 폼 컨트롤 — 페이지 전체 공통 */
.my-page input[type=text], .my-page input[type=password], .my-page input[type=email],
.my-page input[type=tel], .my-page input[type=number], .my-page select, .my-page textarea {
	font-family: inherit; font-size: var(--fs-sm); color: var(--color-fg);
	background: var(--color-bg);
	border: 1px solid var(--color-border); border-radius: var(--radius-md);
	padding: var(--space-2) var(--space-3);
	max-width: 100%;
}
.my-page textarea { line-height: var(--line-base); }
.my-page input[type=text]:focus, .my-page input[type=password]:focus, .my-page input[type=email]:focus,
.my-page input[type=tel]:focus, .my-page input[type=number]:focus, .my-page select:focus, .my-page textarea:focus {
	outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.my-page input[type=submit], .my-page button[type=submit] { cursor: pointer; }

/* 툴바 우측의 건수 표시 (2026-08-21, 나의 활동·포인트 내역) */
.my-toolbar .my-note {
	font-size: var(--fs-sm);
	color: var(--color-fg-muted);
	white-space: nowrap;
}

/* ═════════════════════════════════════════════════════════════
 * 선생님 인증 (auth_teacher.php) · 2026-08-21
 * ═══════════════════════════════════════════════════════════ */

/* ── 상태 배지 ── */
.my-badge {
	display: inline-flex; align-items: center; gap: var(--space-1);
	padding: 3px 10px; border-radius: var(--radius-full);
	font-size: var(--fs-xs); font-weight: var(--fw-semibold); white-space: nowrap;
}
.my-badge.is-ok   { background: var(--color-success-soft); color: #14532d; }
.my-badge.is-wait { background: var(--color-warn-soft);    color: #78350f; }
.my-badge.is-fail { background: var(--color-danger-soft);  color: #7f1d1d; }
.my-badge.is-none { background: var(--color-surface-2);    color: var(--color-fg-muted); }

/* 실패 사유 / 보완 안내 패널 */
.my-alert {
	margin-top: var(--space-4); padding: var(--space-4) var(--space-5);
	border-radius: var(--radius-lg); font-size: var(--fs-sm); line-height: var(--line-base);
	border: 1px solid transparent;
}
.my-alert.is-fail { background: var(--color-danger-soft); border-color: #fca5a5; color: #7f1d1d; }
.my-alert.is-wait { background: var(--color-warn-soft);   border-color: #fcd34d; color: #78350f; }
.my-alert b { font-weight: var(--fw-bold); }

/* ── 인증 종류 탭 ──
 * 레거시는 파란 통짜 버튼 3개였다. 상단 .my-tabnav 와 같은 리듬으로 맞춘다. */
.my-authtabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.my-authtab {
	display: block; width: 100%; text-align: left; cursor: pointer;
	padding: var(--space-3) var(--space-4);
	background: var(--color-bg); border: 1px solid var(--color-border);
	border-radius: var(--radius-lg); font-family: inherit; color: var(--color-fg);
	transition: border-color var(--duration-fast) var(--ease-out),
	            background var(--duration-fast) var(--ease-out),
	            box-shadow var(--duration-fast) var(--ease-out);
}
.my-authtab:hover { border-color: var(--color-border-strong); background: var(--color-surface); }
.my-authtab .t { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.my-authtab .d { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--color-fg-muted); }
.my-authtab.active {
	border-color: var(--color-primary); background: var(--color-primary-soft);
	box-shadow: 0 0 0 1px var(--color-primary);
}
.my-authtab.active .t { color: var(--color-primary-soft-fg); }
.my-authtab.active .d { color: var(--color-primary-soft-fg); }
@media (max-width: 640px) { .my-authtabs { grid-template-columns: 1fr; } }

/* ── 폼 (라벨 + 입력) ── */
.my-form { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.my-form > dt {
	font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-fg);
	padding-top: 9px;
}
.my-form > dt .req { color: var(--color-danger); margin-left: 2px; }
.my-form > dd { margin: 0; min-width: 0; }
.my-form .my-input { width: 100%; max-width: 420px; }
.my-form .my-input[readonly] { background: var(--color-surface); color: var(--color-fg-muted); }
.my-form .hint { margin-top: var(--space-1); font-size: var(--fs-xs); color: var(--color-fg-muted); line-height: var(--line-base); }
.my-form .hint a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
.my-form-sep { grid-column: 1 / -1; border: 0; border-top: 1px solid var(--color-border); margin: 0; }
@media (max-width: 640px) {
	.my-form { grid-template-columns: 1fr; gap: var(--space-2); }
	.my-form > dt { padding-top: 0; }
	.my-form > dd { margin-bottom: var(--space-3); }
}

/* ── 파일 드롭존 ── */
.my-dropzone {
	border: 2px dashed var(--color-border-strong); border-radius: var(--radius-lg);
	padding: var(--space-6) var(--space-4); text-align: center; cursor: pointer;
	background: var(--color-surface); transition: border-color var(--duration-fast) var(--ease-out),
	                                              background var(--duration-fast) var(--ease-out);
}
.my-dropzone:hover, .my-dropzone.is-over { border-color: var(--color-primary); background: var(--color-primary-soft); }
.my-dropzone .ico { font-size: 30px; line-height: 1; }
.my-dropzone .t { margin-top: var(--space-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.my-dropzone .d { margin-top: var(--space-1); font-size: var(--fs-xs); color: var(--color-fg-muted); }
.my-fileinfo { margin-top: var(--space-2); font-size: var(--fs-sm); }
.my-fileinfo.is-picked { color: var(--color-success); font-weight: var(--fw-semibold); }

/* ── 접이식 안내 ──
 * 예전엔 이 안내문(서류목록·절차·권한)이 폼 위에 통째로 펼쳐져 첫 화면을 다 먹었다. */
.my-details {
	border: 1px solid var(--color-border); border-radius: var(--radius-lg);
	background: var(--color-bg); margin-bottom: var(--space-5);
}
.my-details > summary {
	list-style: none; cursor: pointer; padding: var(--space-4) var(--space-5);
	font-size: var(--fs-sm); font-weight: var(--fw-semibold);
	display: flex; align-items: center; gap: var(--space-2);
}
.my-details > summary::-webkit-details-marker { display: none; }
.my-details > summary::after {
	content: '▾'; margin-left: auto; color: var(--color-fg-subtle);
	transition: transform var(--duration-fast) var(--ease-out);
}
.my-details[open] > summary::after { transform: rotate(180deg); }
.my-details > summary:hover { background: var(--color-surface); border-radius: var(--radius-lg); }
.my-details .body {
	padding: 0 var(--space-5) var(--space-5);
	font-size: var(--fs-sm); line-height: var(--line-base); color: var(--color-fg-muted);
}
.my-details .body h4 {
	margin: var(--space-5) 0 var(--space-2); font-size: var(--fs-sm);
	font-weight: var(--fw-bold); color: var(--color-fg);
}
.my-details .body h4:first-child { margin-top: 0; }
.my-details .body ul { margin: 0; padding-left: 1.1em; }
.my-details .body li { margin: 2px 0; }
.my-details .body .warn { color: var(--color-danger); font-weight: var(--fw-semibold); }

/* ═════════════════════════════════════════════════════════════
 * 1:1 문의 · 개인게시판 (memo/index.php) · 2026-08-21
 * 글 하나 = 카드, 답글은 왼쪽 선으로 묶어 들여쓴다.
 * ═══════════════════════════════════════════════════════════ */
.my-textarea {
	width: 100%; min-height: 96px; padding: var(--space-3);
	font-family: inherit; font-size: var(--fs-sm); line-height: var(--line-base);
	color: var(--color-fg); background: var(--color-bg);
	border: 1px solid var(--color-border); border-radius: var(--radius-md);
	resize: vertical; box-sizing: border-box;
}
.my-textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }

.my-writebar { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-3); }
.my-writebar .opts { display: flex; align-items: center; gap: var(--space-4); font-size: var(--fs-sm); color: var(--color-fg-muted); }
.my-writebar .opts label { display: inline-flex; align-items: center; gap: var(--space-1); cursor: pointer; }
.my-writebar .spacer { flex: 1 1 auto; }

/* ── 글 목록 ── */
.my-thread { display: flex; flex-direction: column; gap: var(--space-3); }
.my-post {
	background: var(--color-bg); border: 1px solid var(--color-border);
	border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5);
	box-shadow: var(--shadow-xs);
}
.my-post.is-secret { background: var(--color-surface); }
.my-post-head {
	display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
	font-size: var(--fs-sm); font-weight: var(--fw-semibold);
}
.my-post-head img { height: 15px; width: auto; vertical-align: -2px; }
.my-post-head .when { margin-left: auto; font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--color-fg-subtle); white-space: nowrap; }
.my-post-body {
	margin: var(--space-2) 0 0; font-size: var(--fs-sm); line-height: var(--line-base);
	color: var(--color-fg); word-break: break-word; overflow-wrap: anywhere;
}
.my-post-body a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
.my-post-foot {
	display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
	margin-top: var(--space-3); font-size: var(--fs-xs); color: var(--color-fg-subtle);
}
.my-post-foot .spacer { flex: 1 1 auto; }
.my-linkbtn {
	background: none; border: 0; padding: 0; cursor: pointer;
	font-family: inherit; font-size: var(--fs-xs); color: var(--color-fg-muted);
	text-decoration: underline; text-underline-offset: 2px;
}
.my-linkbtn:hover { color: var(--color-primary); }
.my-linkbtn.is-danger:hover { color: var(--color-danger); }

/* ── 답글 ── */
.my-replies { margin: var(--space-3) 0 0; padding-left: var(--space-4); border-left: 2px solid var(--color-border); }
.my-reply { padding: var(--space-3) 0; border-top: 1px solid var(--color-border); }
.my-reply:first-child { border-top: 0; padding-top: var(--space-1); }
.my-replyform { margin-top: var(--space-3); padding-left: var(--space-4); border-left: 2px solid var(--color-primary-soft); }
.my-replyform[hidden] { display: none; }
.my-reply-more[hidden] { display: none; }
.my-replies > .my-linkbtn { margin-top: var(--space-2); }