/* 기존 index_fv.html 다크 테마를 유지한 스타일 */
* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; overflow-x: hidden; }

body {
	background-color: var(--bg-color, rgb(42, 42, 42));
	font-size: var(--font-size, 11px);
	line-height: 2;
	font-family: "나눔고딕", "Malgun Gothic", "Roboto Mono", sans-serif;
	color: var(--text-color, #c5c5c5);
	-webkit-text-size-adjust: none;
}

/* 배경 이미지 (페이지 설정) */
body[data-bg-mode] { background-attachment: fixed; }
body[data-bg-mode="cover"] { background-size: cover; background-repeat: no-repeat; background-position: center; }
body[data-bg-mode="tile"] { background-size: auto; background-repeat: repeat; }
body[data-bg-mode="contain"] { background-size: contain; background-repeat: no-repeat; background-position: center top; }

a:link, a:visited { color: var(--text-color, #c5c5c5); outline: none; text-decoration: none; }
a:hover, a:active { font-weight: bold; }

/* ------------------------------------------------- 상단 바 */
#topbar {
	background-color: #004225;
	min-height: 40px;
	color: #fff;
	font-size: 12px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 14px;
	flex-wrap: wrap;
	position: sticky;
	top: 0;
	z-index: 10;
}

#today, #clock { font-weight: 600; }

#page-nav { display: flex; gap: 2px; flex-wrap: wrap; }
#page-nav a {
	color: #bfe3d2;
	padding: 0 7px;
	border-radius: 3px;
}
#page-nav a.current { background-color: #2e8965; color: #fff; font-weight: bold; }
#page-nav a:hover { color: #fff; }

#top-right { margin-left: auto; display: flex; align-items: center; gap: 7px; }

/* 인사말: 메뉴바 정중앙 고정 */
#ident {
	color: #ffffff;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	white-space: nowrap;
	font-weight: 600;
}
@media (max-width: 860px) {
	#ident { display: none; }   /* 좁은 화면에서는 겹침 방지를 위해 숨김 */
}

.topbtn {
	font-size: 12px;
	color: #fff;
	background-color: #2e8965;
	border: none;
	border-radius: 3px;
	padding: 2px 10px;
	cursor: pointer;
	line-height: 1.6;
}
.topbtn:hover { background-color: #37a077; }
.topbtn.active { background-color: #c05621; }

/* ------------------------------------------------- 보드/컬럼 */
#board {
	display: flex;
	flex-wrap: wrap;          /* 화면을 넘는 컬럼은 아래 줄로 — 가로 스크롤 없음 */
	align-items: flex-start;
	padding: 0 4px 40px 4px;
}

.column {
	flex: 0 0 var(--col-width, 176px);
	width: var(--col-width, 176px);
	margin-left: 2px;
	padding: 5px;
	text-shadow: 1px 1px #231d1d;
}

.subColumn {
	background-color: var(--card-color, #191919);
	border-radius: 4px;
	margin-top: 10px;
	box-shadow: rgba(252, 251, 251, 0.13) 0 3.2px 7.2px 0,
				rgba(223, 219, 219, 0.11) 0 0.6px 1.8px 0;
}

.subTitle {
	padding: 4px 5px 2px 5px;
	border-bottom: 1px solid rgb(0, 66, 37);
	display: flex;
	align-items: baseline;
}

.subTitle h3 {
	font-size: 1.3em;
	font-weight: bold;
	color: var(--title-color, #7b4bb6);
	margin: 5px 7px;
	text-shadow: 1px 1px #000;
	flex: 1 1 auto;
}

ul.bulleted {
	margin: 5px 0 10px 0;
	padding: 0 6px 10px 24px;
}

ul.bulleted li {
	font-size: 1.1em;
	line-height: 167%;
	list-style-type: disc;
	color: #004225;
}

li.group-start { margin-top: 10px; }

li.note-line {
	list-style: none;
	margin-left: -14px;
	color: #6b6b4a;
	font-size: 1em;
	line-height: 150%;
	text-shadow: none;
}

span.red-note { color: #dc3545; }

img.site-icon {
	width: 14px;
	height: 14px;
	vertical-align: -2px;
	margin-right: 5px;
	border-radius: 3px;
}

/* 사이트 아이콘 표시 중에는 불릿 점 제거 (아이콘이 불릿 역할) */
body.icons-on ul.bulleted { padding-left: 12px; }
body.icons-on ul.bulleted li { list-style: none; }
body.icons-on li.note-line { margin-left: 0; }

/* ------------------------------------------------- 위젯 */
.widget-bar {
	display: none;
	align-items: center;
	justify-content: space-between;
	padding: 2px 6px;
	border-bottom: 1px solid rgb(0, 66, 37);
	color: #8a8a8a;
	font-size: 11px;
}
body.editing .widget-bar { display: flex; }

.widget-body { padding: 8px; }

/* 전자시계 */
.dc-time {
	font-size: 30px;
	font-weight: 700;
	text-align: center;
	letter-spacing: 2px;
	color: var(--text-color, #c5c5c5);
	font-variant-numeric: tabular-nums;
	line-height: 1.3;
}
.dc-date { text-align: center; color: #8a8a8a; }

/* 아날로그 시계 */
svg.analog { display: block; margin: 6px auto; width: 140px; height: 140px; }

/* 주간 날씨 */
.weather-title { text-align: center; color: var(--title-color, #7b4bb6); font-weight: bold; margin-bottom: 4px; }
.weather-row {
	display: flex;
	align-items: center;
	gap: 6px;
	line-height: 1.9;
	padding: 0 4px;
	border-radius: 3px;
}
.weather-row.today { background-color: rgba(255, 255, 255, 0.07); }
.weather-day { width: 2.4em; color: #9a9a9a; }
.weather-day.sun { color: #e06c75; }
.weather-day.sat { color: #61afef; }
.weather-icon { width: 1.6em; text-align: center; }
.weather-temp { margin-left: auto; font-variant-numeric: tabular-nums; }
.weather-temp .tmin { color: #61afef; }
.weather-temp .tmax { color: #e06c75; }
.weather-err { color: #8a8a8a; text-align: center; }

/* 사진 */
.widget-photo .widget-body { padding: 6px; }
.widget-photo img { width: 100%; display: block; border-radius: 4px; }
.photo-caption { text-align: center; color: #9a9a9a; margin-top: 3px; }
.photo-empty { color: #777; text-align: center; padding: 14px 0; }

/* ------------------------------------------------- 편집 모드 */
.item-tools, .cat-tools { display: none; white-space: nowrap; }

body.editing .item-tools, body.editing .cat-tools { display: inline-flex; gap: 1px; }
body.editing li:hover { background-color: rgba(255, 255, 255, 0.05); }

.tool {
	font-size: 10px;
	line-height: 1.4;
	color: #9a9a9a;
	background: transparent;
	border: 1px solid #3a3a3a;
	border-radius: 3px;
	margin-left: 2px;
	padding: 0 4px;
	cursor: pointer;
}
.tool:hover { color: #fff; border-color: #777; }
.tool.danger:hover { color: #ff6b6b; border-color: #ff6b6b; }

.add-cat, .add-col {
	display: none;
	width: 100%;
	margin-top: 10px;
	background: transparent;
	color: #7a7a7a;
	border: 1px dashed #4a4a4a;
	border-radius: 4px;
	padding: 4px;
	cursor: pointer;
	font-size: 11px;
}
body.editing .add-cat, body.editing .add-col { display: block; }
.add-cat:hover, .add-col:hover { color: #ddd; border-color: #888; }
.column.ghost { padding-top: 15px; }

/* ------------------------------------------------- 드래그 앤 드롭 */
body.editing .subTitle, body.editing .widget-bar { cursor: grab; }
body.editing .subTitle:active, body.editing .widget-bar:active { cursor: grabbing; }

.subColumn.dragging { opacity: 0.35; }
li.dragging { opacity: 0.35; }

body.editing li.drag-item { cursor: grab; }
body.editing li.drag-item:active { cursor: grabbing; }

ul.bulleted.drag-over { background-color: rgba(46, 137, 101, 0.08); border-radius: 4px; }
ul.bulleted .drop-indicator { list-style: none; margin-left: -14px; }

.drop-indicator {
	height: 3px;
	background-color: #2e8965;
	border-radius: 2px;
	margin: 3px 2px;
	box-shadow: 0 0 6px rgba(46, 137, 101, 0.8);
}

.column.drag-over { background-color: rgba(46, 137, 101, 0.06); border-radius: 4px; }
.column.ghost { min-height: 80px; }

/* ------------------------------------------------- 다이얼로그 */
dialog {
	background-color: #232323;
	color: #ddd;
	border: 1px solid #444;
	border-radius: 6px;
	min-width: 320px;
	padding: 16px 20px;
	font-size: 12px;
	font-family: inherit;
}
dialog::backdrop { background: rgba(0, 0, 0, 0.6); }

dialog h4 { margin: 0 0 12px 0; color: #fff; }

dialog label { display: block; margin-bottom: 9px; color: #aaa; }

dialog input[type="text"], dialog input[type="url"], dialog input[type="number"],
dialog input[type="password"], dialog input:not([type]), dialog select {
	width: 100%;
	background-color: #2e2e2e;
	color: #eee;
	border: 1px solid #555;
	border-radius: 4px;
	padding: 5px 8px;
	font-size: 12px;
	font-family: inherit;
}
dialog input:focus, dialog select:focus { outline: 1px solid #2e8965; }

dialog label.check { color: #ccc; }
dialog label.check input { width: auto; margin-right: 5px; }
#col-hint { color: #777; margin-left: 4px; }

.color-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; }
.color-grid input[type="color"] {
	width: 100%;
	height: 26px;
	padding: 1px;
	background-color: #2e2e2e;
	border: 1px solid #555;
	border-radius: 4px;
	cursor: pointer;
}
#form-theme input[type="range"] { width: 100%; }
#fs-val { color: #2e8965; font-weight: bold; }
.bg-upload-row { display: flex; align-items: center; gap: 6px; margin-bottom: 9px; }
.bg-upload-row .tool { font-size: 11px; padding: 2px 8px; }
#bg-upload-status { color: #2e8965; font-size: 11px; }

.dlg-buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.dlg-buttons button {
	background-color: #3a3a3a;
	color: #ddd;
	border: none;
	border-radius: 4px;
	padding: 5px 14px;
	cursor: pointer;
	font-size: 12px;
}
.dlg-buttons button.primary { background-color: #2e8965; color: #fff; }
.dlg-buttons button:hover { filter: brightness(1.2); }

/* ------------------------------------------------- 로그인 */
.login-wrap {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}
.login-box {
	background-color: #191919;
	border-radius: 6px;
	padding: 30px 34px;
	width: 300px;
	box-shadow: rgba(252, 251, 251, 0.13) 0 3.2px 7.2px 0;
}
.login-box h2 {
	margin: 0 0 18px 0;
	color: #2e8965;
	font-size: 20px;
	text-align: center;
	letter-spacing: 2px;
}
.login-box label { display: block; color: #999; font-size: 12px; margin-bottom: 10px; }
.login-box input {
	width: 100%;
	background-color: #2e2e2e;
	color: #eee;
	border: 1px solid #555;
	border-radius: 4px;
	padding: 7px 10px;
	font-size: 13px;
}
.login-box input:focus { outline: 1px solid #2e8965; }
.login-box button {
	width: 100%;
	margin-top: 8px;
	background-color: #004225;
	color: #fff;
	border: none;
	border-radius: 4px;
	padding: 8px;
	font-size: 13px;
	cursor: pointer;
}
.login-box button:hover { background-color: #2e8965; }
#login-error { color: #ff6b6b; font-size: 12px; min-height: 18px; margin-top: 8px; text-align: center; }