@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=DotGothic16&family=Gowun+Dodum&family=Mrs+Saint+Delafield&family=Gaegu:wght@400;700&display=swap');

/****************************************************
	Sojeong's Wonderland  (Alice in Wonderland blue)
*****************************************************/
:root {
	--wl-blue:   #4a86d8;
	--wl-deep:   #2f63b8;
	--wl-mid:    #7fb0ea;
	--wl-soft:   #cfe1f8;
	--wl-pale:   #eaf3fd;
	--wl-paper:  #fafdff;
	--wl-ink:    #34558a;
	--wl-sub:    #7b95bd;
	--wl-line:   #b9d3f3;
	--wl-pixel:  'DotGothic16', 'Gowun Dodum', monospace;
	--wl-script: 'Mrs Saint Delafield', 'Gaegu', cursive;
	--wl-hand:   'Gaegu', 'Gowun Dodum', cursive;
}

html.single:before,
html:before { background: none; }
html { min-height: 100%; }
body {
	margin: 0;
	min-height: 100%;
	color: var(--wl-ink);
	font-family: 'Gowun Dodum', 'Nanum Gothic', sans-serif;
	font-size: 13px;
	background-color: #bcd6f4;
	/* 하늘 + 구름 */
	background-image:
		radial-gradient(ellipse 260px 120px at 12% 8%,  rgba(255,255,255,.95), transparent 70%),
		radial-gradient(ellipse 340px 140px at 40% 3%,  rgba(255,255,255,.9),  transparent 70%),
		radial-gradient(ellipse 300px 130px at 78% 10%, rgba(255,255,255,.95), transparent 70%),
		radial-gradient(ellipse 380px 160px at 95% 45%, rgba(255,255,255,.85), transparent 70%),
		radial-gradient(ellipse 320px 150px at 5% 60%,  rgba(255,255,255,.85), transparent 70%),
		radial-gradient(ellipse 420px 170px at 30% 96%, rgba(255,255,255,.95), transparent 70%),
		radial-gradient(ellipse 360px 150px at 85% 92%, rgba(255,255,255,.9),  transparent 70%),
		linear-gradient(180deg, #9cc4f0 0%, #c4dbf6 55%, #dcebfb 100%);
	background-attachment: fixed;
}
a { text-decoration: none; }

/* 바탕에 깔리는 손글씨 낙서 */
.wl-doodle {
	position: fixed; z-index: 0; pointer-events: none;
	font-family: var(--wl-hand); font-size: 17px; line-height: 1.5; color: rgba(52,85,138,.7);
}
.wl-doodle.tl { top: 18px; left: 26px; transform: rotate(-4deg); }
.wl-doodle.tr { top: 22px; right: 30px; transform: rotate(3deg); text-align: right; }
.wl-doodle.bl { bottom: 26px; left: 28px; transform: rotate(-3deg); }
.wl-doodle.br { bottom: 22px; right: 30px; transform: rotate(3deg); text-align: right; }

#wl-stage { position: relative; z-index: 1; padding: 46px 22px 40px; }

/* ---------- IE 창 ---------- */
#wl-window {
	position: relative;
	max-width: 1120px;
	margin: 0 auto;
	background: var(--wl-paper);
	border: 3px solid var(--wl-blue);
	box-shadow: 0 0 0 4px rgba(255,255,255,.55), 0 14px 40px rgba(47,99,184,.28);
}
.wl-titlebar {
	display: flex; align-items: center; gap: 8px;
	height: 34px; padding: 0 8px;
	background: linear-gradient(180deg, #6ea3e6, var(--wl-blue));
	color: #fff; font-family: var(--wl-pixel); font-size: 14px;
}
.wl-titlebar .ico { width: 18px; height: 18px; flex: none; }
.wl-titlebar .ttl { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; letter-spacing: .5px; }
.wl-titlebar .ctl { display: flex; gap: 4px; }
.wl-titlebar .ctl i {
	width: 26px; height: 22px; display: block; position: relative;
	background: var(--wl-pale); border: 2px solid #fff; box-sizing: border-box;
}
.wl-titlebar .ctl i:before, .wl-titlebar .ctl i:after { content: ""; position: absolute; background: var(--wl-deep); }
.wl-titlebar .ctl .min:before  { left: 5px; right: 5px; bottom: 4px; height: 2px; }
.wl-titlebar .ctl .max:before  { left: 5px; right: 5px; top: 3px; bottom: 3px; background: none; border: 2px solid var(--wl-deep); }
.wl-titlebar .ctl .cls:before, .wl-titlebar .ctl .cls:after { left: 50%; top: 3px; width: 2px; height: 12px; margin-left: -1px; transform: rotate(45deg); }
.wl-titlebar .ctl .cls:after { transform: rotate(-45deg); }

.wl-menubar {
	display: flex; align-items: center; gap: 18px;
	height: 30px; padding: 0 14px;
	background: var(--wl-pale); border-bottom: 1px solid var(--wl-line);
	font-family: var(--wl-pixel); font-size: 13px; color: var(--wl-deep);
}
.wl-menubar .since { margin-left: auto; color: var(--wl-sub); }
.wl-menubar .since:before { content: "\2665"; color: var(--wl-blue); margin-right: 6px; }

/* ---------- 배너 ---------- */
.wl-banner {
	position: relative; overflow: hidden;
	height: 170px; margin: 8px 8px 0;
	text-align: center;
	background:
		radial-gradient(ellipse 200px 60px at 20% 30%, rgba(255,255,255,.95), transparent 70%),
		radial-gradient(ellipse 260px 70px at 60% 20%, rgba(255,255,255,.9),  transparent 70%),
		radial-gradient(ellipse 200px 60px at 90% 60%, rgba(255,255,255,.9),  transparent 70%),
		linear-gradient(180deg, #a9cbf2, #dcebfb);
	border: 1px solid var(--wl-line);
}
.wl-banner:after { /* 레이스 하단 */
	content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 14px;
	background: radial-gradient(circle at 8px 14px, transparent 6px, #fff 6.5px) 0 0 / 16px 14px repeat-x;
}
.wl-banner h1 {
	margin: 34px 0 0; font: 400 66px/1 var(--wl-script); color: var(--wl-blue);
	text-shadow: 0 1px 0 #fff;
}
.wl-banner h1 img { max-height: 78px; }
.wl-banner .sub { margin: 4px 0 0; font-family: 'Gowun Dodum', sans-serif; font-size: 15px; color: var(--wl-deep); letter-spacing: 1px; }
.wl-banner .en  { margin: 6px 0 0; font-family: var(--wl-pixel); font-size: 11px; letter-spacing: 2px; color: var(--wl-sub); }
.wl-banner .note {
	position: absolute; left: 34px; top: 28px; width: 130px; padding: 14px 12px;
	background: #f5efe0; color: #6a6a6a; font-family: var(--wl-hand); font-size: 17px; line-height: 1.2;
	transform: rotate(-8deg); box-shadow: 0 2px 6px rgba(0,0,0,.12);
	clip-path: polygon(0 4%, 6% 0, 100% 3%, 97% 100%, 4% 97%);
}
.wl-banner .note.r { left: auto; right: 34px; top: 104px; width: 108px; font-size: 15px; transform: rotate(-9deg); }
.wl-banner .card {
	position: absolute; right: 150px; top: 8px; width: 62px; height: 88px; border-radius: 5px;
	background: #fff; border: 1px solid #cdd8e8; transform: rotate(9deg);
	box-shadow: 0 2px 6px rgba(0,0,0,.12); color: #3b4a63; font-size: 26px; line-height: 1;
}
.wl-banner .card b { position: absolute; left: 7px; top: 6px; font-size: 16px; }
.wl-banner .card span { position: absolute; left: 0; right: 0; top: 34px; text-align: center; color: var(--wl-mid); }
.wl-banner svg.watch { position: absolute; right: 60px; top: 16px; width: 118px; height: 148px; }
.wl-banner svg.bow   { position: absolute; left: 4px; top: 4px; width: 90px; height: 60px; }

/* ---------- 본문 ---------- */
#wl-body { display: flex; align-items: flex-start; gap: 14px; padding: 14px 12px 8px; }

#wl-side { flex: none; width: 158px; }
.wl-profile {
	padding: 10px 8px 12px; margin-bottom: 8px; text-align: center;
	background: var(--wl-pale); border: 1px solid var(--wl-line);
}
.wl-profile .pic {
	width: 96px; height: 110px; margin: 0 auto 6px;
	display: flex; align-items: center; justify-content: center; overflow: hidden;
	background: linear-gradient(180deg, #fff, var(--wl-soft)); border: 1px solid var(--wl-line);
	color: var(--wl-mid); font-size: 34px;
}
.wl-profile .pic img { max-width: 100%; max-height: 100%; }
.wl-profile p { margin: 0; font-family: var(--wl-pixel); font-size: 12px; line-height: 1.45; color: var(--wl-ink); text-align: left; }

ul.wl-menu { margin: 0; padding: 0; list-style: none; }
ul.wl-menu li { margin: 0 0 5px; }
ul.wl-menu a {
	display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px;
	background: var(--wl-pale); border: 1px solid var(--wl-line); color: var(--wl-deep);
	font-family: var(--wl-pixel); font-size: 13px; letter-spacing: .5px;
}
ul.wl-menu a:hover { background: var(--wl-soft); }
ul.wl-menu a.on   { background: var(--wl-blue); border-color: var(--wl-deep); color: #fff; }

.wl-auth { margin: 10px 0 0; text-align: center; }
.wl-auth .name { margin: 0 0 4px; font-family: var(--wl-pixel); font-size: 12px; }
.wl-auth .ui-btn { margin: 0 1px 3px; padding: 0 8px; background: var(--wl-paper); border-color: var(--wl-line); color: var(--wl-deep); }
.wl-auth .ui-btn.admin { background: var(--wl-deep); border-color: var(--wl-deep); color: #fff; }
.wl-alice { margin: 10px 0 0; font-family: var(--wl-pixel); font-size: 11px; line-height: 1.5; color: var(--wl-sub); }
#wl-side #bgm_box { padding-top: 8px; }

#wl-content { flex: 1; min-width: 0; }

/* ---------- 홈 위젯 ---------- */
.wl-home { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 12px; }
.wl-home .col-today { grid-column: 1; }
.wl-home .col-mid   { grid-column: 2; display: flex; flex-direction: column; gap: 12px; }
.wl-home .col-room  { grid-column: 3; }
.wl-home .row-bottom { grid-column: 1 / 3; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }

.wl-box { background: var(--wl-paper); border: 1px solid var(--wl-line); }
.wl-box > h2 {
	display: flex; align-items: center; justify-content: space-between;
	margin: 0; height: 30px; padding: 0 10px;
	background: var(--wl-soft); border-bottom: 1px solid var(--wl-line);
	font: 400 13px var(--wl-pixel); color: var(--wl-deep); letter-spacing: .5px;
}
.wl-box > h2 small { font: 400 11px var(--wl-pixel); color: var(--wl-sub); }
.wl-box > h2 a { color: var(--wl-sub); }
.wl-box .in { padding: 10px; }

.wl-today .photo {
	position: relative; height: 250px; margin: 8px;
	overflow: hidden;
	background:
		radial-gradient(ellipse 120px 40px at 22% 22%, #fff, transparent 70%),
		radial-gradient(ellipse 160px 50px at 60% 14%, #fff, transparent 70%),
		radial-gradient(ellipse 140px 44px at 84% 40%, #fff, transparent 70%),
		linear-gradient(180deg, #7fb0ea, #cfe3f9 70%, #eef5fd);
}
.wl-today .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wl-today .msg {
	position: absolute; left: 22px; top: 44px; margin: 0;
	font: 400 18px/1.7 var(--wl-hand); color: var(--wl-deep); transform: rotate(-6deg); transform-origin: left top;
}
.wl-today .sign { position: absolute; right: 14px; bottom: 10px; margin: 0; text-align: right; font: italic 400 13px/1.4 var(--wl-hand); color: var(--wl-ink); transform: rotate(-4deg); }
.wl-today .stamp {
	position: absolute; right: 12px; top: 10px; width: 92px; height: 92px; border-radius: 50%;
	border: 2px double var(--wl-deep); color: var(--wl-deep); background: rgba(255,255,255,.55);
	transform: rotate(8deg); text-align: center; font: 400 10px/1.2 var(--wl-pixel);
}
.wl-today .stamp b { display: block; margin-top: 16px; font-size: 20px; }
.wl-today .stamp span { display: block; margin-top: 30px; }

ul.wl-list { margin: 0; padding: 0; list-style: none; }
ul.wl-list li {
	display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px;
	border-bottom: 1px dashed var(--wl-line);
}
ul.wl-list li:last-child { border-bottom: 0; }
ul.wl-list li:before { content: "\2661"; color: var(--wl-blue); font-size: 13px; }
ul.wl-list li a { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--wl-ink); }
ul.wl-list li em { font: normal 11px var(--wl-pixel); color: var(--wl-sub); }

.wl-update .thumbs { display: flex; gap: 6px; padding: 8px; }
.wl-update .thumbs a { flex: 1; min-width: 0; text-align: center; color: var(--wl-ink); font-size: 12px; }
.wl-update .thumbs .th {
	display: block; height: 64px; margin-bottom: 4px; background: var(--wl-soft) center / cover no-repeat;
	border: 1px solid var(--wl-line);
}
.wl-update .thumbs em { display: block; font: normal 11px var(--wl-pixel); color: var(--wl-sub); }
.wl-update .thumbs span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.wl-room .pic { height: 138px; margin: 8px 8px 6px; background: linear-gradient(180deg, #dcebfb, #b5d0f2); border: 1px solid var(--wl-line); overflow: hidden; }
.wl-room .pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wl-room p { margin: 0 10px 10px; line-height: 1.6; }
.wl-room .go {
	display: flex; align-items: center; justify-content: space-between;
	margin: 0 8px 8px; height: 32px; padding: 0 12px; background: var(--wl-pale); border: 1px solid var(--wl-line);
	font-family: var(--wl-pixel); color: var(--wl-deep);
}
.wl-room .go:hover { background: var(--wl-soft); }

.wl-from p { margin: 0; padding: 12px 16px 14px; line-height: 1.9; font-family: var(--wl-pixel); font-size: 13px; }
.wl-quote {
	display: flex; align-items: center; justify-content: center; text-align: center; min-height: 92px;
	background:
		radial-gradient(ellipse 120px 34px at 20% 30%, #fff, transparent 70%),
		radial-gradient(ellipse 150px 40px at 75% 60%, #fff, transparent 70%),
		linear-gradient(180deg, #b5d0f2, #e3eefb);
	border: 1px solid var(--wl-line); font: 400 26px/1.3 var(--wl-script); color: var(--wl-blue);
}

#wl-footer {
	display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
	margin: 6px 12px 12px; padding: 8px 4px 0; border-top: 1px solid var(--wl-line);
	font: 400 10px var(--wl-pixel); letter-spacing: 1px; color: var(--wl-sub);
}
#wl-footer a { color: var(--wl-sub); }

/* 서브 페이지(게시판 등)를 창 안쪽 톤에 맞춤 */
#wl-content a { color: var(--wl-deep); }
#wl-content .ui-btn { background: var(--wl-pale); border-color: var(--wl-line); color: var(--wl-deep); }
#wl-content .ui-btn.point { background: var(--wl-blue); border-color: var(--wl-deep); color: #fff; }
#wl-content input[type="text"], #wl-content input[type="password"], #wl-content select, #wl-content textarea { border-color: var(--wl-line); background: #fff; color: var(--wl-ink); }

/* ---------- 반응형 ---------- */
@media all and (max-width: 1000px) {
	#wl-stage { padding: 12px 8px 20px; }
	.wl-doodle { display: none; }
	.wl-banner { height: 140px; }
	.wl-banner h1 { font-size: 48px; margin-top: 28px; }
	.wl-banner .note, .wl-banner .card, .wl-banner svg.watch { display: none; }
	#wl-body { flex-direction: column; }
	#wl-side { width: 100%; }
	.wl-profile { display: none; }
	ul.wl-menu { display: flex; flex-wrap: wrap; gap: 5px; }
	ul.wl-menu li { margin: 0; flex: 1 0 30%; }
	.wl-home { grid-template-columns: 1fr; }
	.wl-home .col-today, .wl-home .col-mid, .wl-home .col-room, .wl-home .row-bottom { grid-column: 1; }
	.wl-home .row-bottom { grid-template-columns: 1fr; }
	.wl-menubar span.m { display: none; }
}

/* UPDATE 카드가 TODAY와 같은 높이까지 늘어나도록 */
.wl-home .col-mid .wl-update { flex: 1; display: flex; flex-direction: column; }
.wl-update .thumbs { flex: 1; align-items: stretch; }
.wl-update .thumbs a { display: flex; flex-direction: column; }
.wl-update .thumbs .th { flex: 1; height: auto; min-height: 64px; }

/* 오늘의 한줄일기 */
.wl-today .msg { max-width: 62%; }
.wl-today-form { display: flex; gap: 6px; margin: 0 8px 8px; }
.wl-today-form input[type="text"] { flex: 1; min-width: 0; height: 30px; }
.wl-today-form .ui-btn { flex: none; height: 30px; background: var(--wl-blue); border-color: var(--wl-deep); color: #fff; }

/* 목록 페이지 (전체 글 / 지난 한줄일기) */
.wl-rows { margin: 0; padding: 0; list-style: none; }
.wl-rows li { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 4px 12px; border-bottom: 1px dashed var(--wl-line); }
.wl-rows li:last-child { border-bottom: 0; }
.wl-rows .bo { flex: none; min-width: 84px; font: 400 12px var(--wl-pixel); color: var(--wl-sub); }
.wl-rows a, .wl-rows .txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--wl-ink); }
.wl-rows em { flex: none; font: normal 11px var(--wl-pixel); color: var(--wl-sub); }
.wl-rows .empty { justify-content: center; color: var(--wl-sub); }
.wl-rows form { margin: 0; flex: none; }
.wl-rows .del { height: 24px; padding: 0 8px; background: var(--wl-paper); border: 1px solid var(--wl-line); color: var(--wl-sub); cursor: pointer; }
.wl-pager { display: flex; justify-content: center; gap: 4px; margin: 12px 0 4px; }
.wl-pager a, .wl-pager b { min-width: 28px; height: 28px; line-height: 26px; text-align: center; border: 1px solid var(--wl-line); background: var(--wl-pale); font: 400 12px var(--wl-pixel); color: var(--wl-deep); }
.wl-pager b { background: var(--wl-blue); border-color: var(--wl-deep); color: #fff; }

/* 배너 클릭 = 홈 */
a.wl-banner-link { display: block; color: inherit; cursor: pointer; }