* { box-sizing: border-box; }
body { margin: 0; background: #e9e5d8; background-image: linear-gradient(90deg,#ffffff35 1px,transparent 1px),linear-gradient(#ffffff35 1px,transparent 1px); background-size: 8px 8px; color: #5c503d; font: 12px/1.8 '돋움',Dotum,Arial,sans-serif; }
a { color: #736042; text-decoration: none; } a:hover { color: #ac582e; text-decoration: underline; } a:focus-visible { outline: 2px solid #ac582e; outline-offset: 3px; }
.page { width: 1020px; margin: 32px auto; padding: 0 24px; border: 1px solid #bfb59e; background: #fffdf6; box-shadow: 4px 5px 0 #c8c0ac66; }
.utility { padding: 9px 0; border-bottom: 1px dotted #cfc5af; color: #998a71; font-size: 9px; letter-spacing: 1px; }.utility span { float: right; letter-spacing: 0; }
.header { height: 132px; display: flex; align-items: center; gap: 17px; }.bread { font-size: 66px; line-height: 1; color: #b98047; background: #f0d6a4; border: 3px solid #986b40; border-radius: 22px 22px 6px 6px; width: 61px; height: 61px; overflow: hidden; text-align: center; transform: rotate(-8deg); }.logo { color: #6b422c; font: bold 48px/1 Georgia,serif; letter-spacing: -3px; }.logo>span { color: #a08755; }.logo small { display: block; margin-top: 13px; font: 11px '돋움',sans-serif; letter-spacing: 3px; color: #96866a; }.header p { margin-left: auto; text-align: right; color: #a3957c; font-size: 11px; }
.nav { padding: 10px 14px; background: #75694f; border: 1px solid #62573d; }.nav a { color: #fff6df; margin-right: 28px; font-weight: bold; }.nav a:first-child { color: #ffdc94; }.nav span { float: right; font: italic 12px/1.8 Georgia,serif; color: #e4d8b9; }
.notice { margin: 12px 0 20px; padding-bottom: 11px; border-bottom: 1px dotted #cfc4ab; font-size: 11px; }.notice b { color: #af774d; font: bold 10px Georgia,serif; margin-right: 13px; }.notice span { float: right; color: #a99a7e; }
.layout { width: 100%; table-layout: fixed; }.layout td { vertical-align: top; }.left { width: 172px; }.right { width: 182px; }.main { padding: 0 20px; }
.box { border: 1px solid #d4c9b2; margin-bottom: 16px; }.box h2 { margin: 0; padding: 6px 10px; background: #eee9da; border-bottom: 1px solid #d4c9b2; color: #7b6b4e; font-size: 11px; }.inside { padding: 12px; }.inside p { font-size: 11px; color: #94846b; }.online { display: block; color: #889363; font-size: 9px; margin-top: 3px; }.mood { padding-top: 8px; border-top: 1px dotted #d7cbb2; font-size: 10px; }
.portrait { margin: 13px 13px 0; padding: 8px; height: 110px; background: #f2e9d4; border: 1px solid #ddd1b5; text-align: center; color: #a18052; font: italic 10px Georgia,serif; }.portrait span { font-size: 65px; line-height: 1.15; color: #bb8a51; text-shadow: 2px 2px #f6d395; }
.menu a { display: block; padding: 7px 11px; border-bottom: 1px dotted #e2d9c7; font-size: 11px; }.menu a:last-child { border: 0; }.menu em { float: right; color: #aa9879; font-style: normal; font-size: 10px; }
.counter { padding: 5px 0 18px; text-align: center; color: #a08e70; font: 9px/1.8 Georgia,serif; }.counter strong { display: block; width: 128px; margin: 6px auto; background: #665e49; border: 2px inset #b8ad92; color: #fff3d4; font: 15px/1.6 'Courier New',monospace; }.counter small { font: 9px '돋움',sans-serif; }.banner { display: block; padding: 10px 0; border: 3px double #9c855c; background: #eee2c4; text-align: center; font: bold 20px/1.3 Georgia,serif; }.banner small { display: block; font: 8px 'Courier New',monospace; }
.welcome { padding: 23px 25px 0; background: #f3efdf; border: 1px solid #d9cfb7; }.welcome>small { font: 9px Georgia,serif; letter-spacing: 2px; color: #a38c63; }.welcome h1 { margin: 16px 0 12px; font: normal 28px/1.5 Georgia,'바탕',Batang,serif; letter-spacing: -1px; color: #675239; }.welcome p { font-size: 11px; color: #94836a; line-height: 1.95; }.welcome>div { margin-top: 23px; padding: 11px 0; border-top: 1px solid #ddd3bb; font-size: 10px; color: #a08e6c; }.welcome>div span { float: right; font-size: 18px; line-height: 1; }
.section { margin-top: 25px; padding-bottom: 6px; border-bottom: 2px solid #9d8b67; display: flex; align-items: baseline; justify-content: space-between; }.section h2 { margin: 0; font-size: 13px; }.section small { margin-left: 8px; color: #a79678; font: 9px Georgia,serif; }.section>span { color: #a3957a; font-size: 9px; }
.post { padding: 18px 0 13px; border-bottom: 1px dotted #cbbda1; }.date { color: #a48b66; font: 10px Georgia,serif; }.date span { margin-left: 8px; color: #a89b83; font: 9px '돋움',sans-serif; }.post h3 { margin: 10px 0; font-size: 13px; }.post sup { font: 8px Georgia,serif; color: #b36b3f; }.post p { font-size: 11px; color: #8f8067; line-height: 1.95; }.post-footer { margin-top: 16px; color: #ac9c7d; font-size: 9px; }.post-footer span { float: right; }
.memo { margin-top: 21px; padding: 13px 17px; border: 1px solid #e0d2a7; background: #fcf7df; transform: rotate(-1deg); color: #96805a; }.memo b { font-size: 11px; }.memo p { margin: 7px 0; font-size: 11px; }.memo small { font-size: 9px; color: #b09c73; }
.guest { padding: 13px 0; border-bottom: 1px dotted #d6cab2; font-size: 10px; }.guest span { float: right; color: #ad9e82; font: 9px Georgia,serif; }.guest p { margin: 6px 0 0; color: #94846b; }
.status { text-align: center; padding: 15px 10px; }.sun { font-size: 34px; color: #bd9553; }.status p { font-size: 10px; color: #99876a; }.status hr { border: 0; border-top: 1px dotted #d8cdb4; margin: 15px 0; }.status small { font-size: 9px; color: #aa9877; }.links { padding: 4px 12px 14px; }.links a { display: block; margin-top: 13px; font: bold 11px Georgia,serif; }.links small { display: block; margin-top: 4px; font-size: 9px; color: #a69577; }
.construction { margin: 22px 0; padding: 16px 7px; border: 1px dashed #bead8c; background: #f6f0df; text-align: center; }.construction b { font-size: 11px; }.construction p { font-size: 10px; color: #a39171; }.construction small { font: 7px 'Courier New',monospace; letter-spacing: 1px; color: #ae986f; }.ring { text-align: center; font-size: 9px; color: #a08b68; }.ring b { display: block; font: 9px/2.5 Georgia,serif; }.ring small { font-size: 8px; }
.footer { margin-top: 27px; padding: 18px 0 22px; border-top: 1px solid #cfc4aa; color: #9d8b6c; font-size: 10px; }.footer b { font: bold 12px Georgia,serif; }.footer small { font-size: 9px; color: #b2a285; }.footer a { float: right; }
@media(max-width:1040px) { .page { width: calc(100% - 24px); margin: 12px; padding: 0 16px; }.left { width: 155px; }.right { width: 160px; }.main { padding: 0 14px; }.nav a { margin-right: 17px; } }
@media(max-width:760px) { .header p,.nav span,.notice span { display: none; }.header { height: 115px; }.logo { font-size: 42px; }.nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }.nav a { margin: 0; font-size: 11px; }.layout,.layout tbody,.layout tr,.layout td { display: block; width: 100%; }.layout tr { display: flex; flex-direction: column; }.main { order: 0; padding: 0; }.left { order: 1; margin-top: 22px; }.right { order: 2; margin-top: 16px; }.welcome { padding: 22px 18px 0; }.welcome h1 { font-size: 26px; }.utility { font-size: 8px; letter-spacing: 0; }.banner { margin-bottom: 16px; } }

label { display: block; margin-bottom: 4px; }
input, textarea, button { font: inherit; }
input:not([type=hidden]):not([type=checkbox]), textarea { width: 100%; padding: 8px; color: #514737; background: #fffef9; border: 1px solid #b9aa8a; }
textarea { resize: vertical; }
button { padding: 7px 14px; border: 1px solid #998563; background: #eee4cd; color: #5c4d34; cursor: pointer; }
button:hover { background: #e3d4b5; }
.message { padding: 12px; background: #fcf7df; border: 1px solid #cfbc8a; }
.admin-content { max-width: 680px; margin: 24px auto; }
.admin-content h1 { font-size: 22px; }
.admin-content h2 { margin-top: 28px; font-size: 16px; }
.admin-row { padding: 14px 0; border-bottom: 1px dotted #cbbda1; }
.admin-row form { margin-top: 8px; }
.admin-row label { display: inline; }
.guest-form { margin-top: 20px; font-size: 11px; }
.pagination { display: flex; gap: 16px; margin: 15px 0; font-size: 11px; }

/* Guest terminal: 80 columns by 24 rows, with horizontal scroll on small screens. */
.terminal-overlay[hidden], .terminal-keys[hidden] { display: none !important; }
.terminal-is-open { overflow: hidden; }
.terminal-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 18px; background: #242016b8; }
.terminal-overlay[data-standalone=yes] { position: relative; background: transparent; padding: 28px 12px; }
.terminal-window { max-width: 100%; max-height: calc(100dvh - 36px); overflow-y: auto; border: 2px solid #6f694d; background: #131b18; box-shadow: 7px 7px 0 #171c1780; color: #c7d9a7; }
.terminal-title { display: flex; align-items: center; justify-content: space-between; padding: 5px 10px; background: #74694d; color: #fff4d4; font: 12px/1.6 'Courier New', monospace; }
.terminal-title button { border: 1px solid #bdac82; padding: 0 8px; background: #635a43; color: #fff4d4; font-size: 18px; line-height: 1.2; }
.terminal-scroll { overflow-x: auto; }
.terminal-display { box-sizing: content-box; width: 80ch; padding: 14px; font: 14px/20px 'Courier New', monospace; }
.terminal-output { height: 460px; margin: 0; padding: 0; border: 0; white-space: pre; overflow: hidden; font: inherit; color: inherit; }
.terminal-input { display: flex; align-items: center; width: 80ch; height: 20px; margin: 0; gap: 1ch; }
.terminal-input label { flex: 0 0 auto; margin: 0; color: #e3cf87; white-space: pre; }
.terminal-input input:not([type=hidden]) { flex: 1 1 auto; min-width: 0; width: 0; height: 20px; padding: 0; border: 0; border-radius: 0; outline: 0; background: transparent; color: #dfebcc; font: inherit; caret-color: #e3cf87; }
.terminal-input input:focus { box-shadow: inset 0 -1px #526048; }
.terminal-send { padding: 0 3px; border: 0; background: #28372b; color: #ccdaa8; line-height: 20px; }
.terminal-status { padding: 7px 12px; border-top: 1px solid #43503b; font: 10px/1.7 '돋움', sans-serif; color: #a4b58c; }
.terminal-keys { display: flex; gap: 7px; padding: 5px 12px 10px; }
.terminal-keys button { padding: 4px 12px; background: #29372a; border-color: #657655; color: #cfdfb6; }
@media (max-width: 760px) { .terminal-overlay { padding: 6px; }.terminal-window { max-height: calc(100dvh - 12px); }.terminal-title { font-size: 11px; }.terminal-display { padding: 10px; } }