/*
 * SNUAAA homepage, third edition ("3rd", design by 해리, 2008), rebuilt
 * without tables, frames or scripts. Every page is one fixed 1004px canvas,
 * as it was; phones and tablets zoom it (viewport width=1004).
 * Images under /assets/aaa/ are the original artwork.
 */

:root {
    color-scheme: light;
    /* The faces the old site was drawn with on Windows, where a visitor has
       them; elsewhere free look-alikes: 백묵 굴림/돋움 (Kim Jeong-Hwan) and
       DejaVu Sans, Bitstream Vera's heir and Verdana's near twin, whose
       condensed cut stands in for Tahoma. Hangul in Tahoma or Verdana text
       falls through to 굴림, as Windows' font linking did. */
    --gulim: Gulim, "굴림", "AAA Gulim", sans-serif;
    --dotum: Dotum, "돋움", "AAA Dotum", sans-serif;
    --tahoma: Tahoma, "AAA Tahoma", Gulim, "굴림", "AAA Gulim", sans-serif;
    --verdana: Verdana, "AAA Verdana", Gulim, "굴림", "AAA Gulim", sans-serif;
    --text: #555555;
    --link: #2f57a7;
    --hover: #ff3399;
    --theme: #0054a6;
    --line: #ccdded;
    --row: #f2f6fa;
    --sky-line: #70c0e1;
    --comment: #e66700;
}

/* ---------------------------------------------------------------- fonts */

@font-face {
    font-family: "AAA Gulim";
    src: url(fonts/baekmuk-gulim.woff2) format("woff2");
    font-display: swap;
    unicode-range: U+2010-2027, U+2030-205E, U+2100-218F, U+2190-21FF, U+2200-22FF, U+2460-24FF, U+2500-257F, U+25A0-25FF, U+2600-26FF, U+3000-303F, U+3130-318F, U+3200-32FF, U+AC00-D7A3, U+FF01-FF60, U+FFE0-FFE6;
}

/* 굴림 and 돋움 carried Arial-like Latin letters; 백묵's are monospaced. */
@font-face {
    font-family: "AAA Gulim";
    src: url(fonts/LiberationSans-Regular.woff2) format("woff2");
    font-weight: 400;
    font-display: swap;
    unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC;
}

/* 굴림 and 돋움 carried Arial-like Latin letters; 백묵's are monospaced. */
@font-face {
    font-family: "AAA Gulim";
    src: url(fonts/LiberationSans-Bold.woff2) format("woff2");
    font-weight: 700;
    font-display: swap;
    unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC;
}

@font-face {
    font-family: "AAA Dotum";
    src: url(fonts/baekmuk-dotum.woff2) format("woff2");
    font-display: swap;
    unicode-range: U+2010-2027, U+2030-205E, U+2100-218F, U+2190-21FF, U+2200-22FF, U+2460-24FF, U+2500-257F, U+25A0-25FF, U+2600-26FF, U+3000-303F, U+3130-318F, U+3200-32FF, U+AC00-D7A3, U+FF01-FF60, U+FFE0-FFE6;
}

/* 굴림 and 돋움 carried Arial-like Latin letters; 백묵's are monospaced. */
@font-face {
    font-family: "AAA Dotum";
    src: url(fonts/LiberationSans-Regular.woff2) format("woff2");
    font-weight: 400;
    font-display: swap;
    unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC;
}

/* 굴림 and 돋움 carried Arial-like Latin letters; 백묵's are monospaced. */
@font-face {
    font-family: "AAA Dotum";
    src: url(fonts/LiberationSans-Bold.woff2) format("woff2");
    font-weight: 700;
    font-display: swap;
    unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC;
}

@font-face {
    font-family: "AAA Tahoma";
    src: url(fonts/DejaVuSansCondensed.woff2) format("woff2");
    font-weight: 400;
    font-display: swap;
    unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201E, U+2022, U+2026, U+2030, U+2039-203A, U+20AC, U+2122, U+2190-2193, U+25B2-25BC;
}

@font-face {
    font-family: "AAA Tahoma";
    src: url(fonts/DejaVuSansCondensed-Bold.woff2) format("woff2");
    font-weight: 700;
    font-display: swap;
    unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201E, U+2022, U+2026, U+2030, U+2039-203A, U+20AC, U+2122, U+2190-2193, U+25B2-25BC;
}

@font-face {
    font-family: "AAA Verdana";
    src: url(fonts/DejaVuSans.woff2) format("woff2");
    font-weight: 400;
    font-display: swap;
    unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201E, U+2022, U+2026, U+2030, U+2039-203A, U+20AC, U+2122, U+2190-2193, U+25B2-25BC;
}

@font-face {
    font-family: "AAA Verdana";
    src: url(fonts/DejaVuSans-Bold.woff2) format("woff2");
    font-weight: 700;
    font-display: swap;
    unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201E, U+2022, U+2026, U+2030, U+2039-203A, U+20AC, U+2122, U+2190-2193, U+25B2-25BC;
}

/* ----------------------------------------------------------------- page */

html {
    background: #000;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html.is-day {
    background: #f3fff0;
}

body {
    width: 1004px;
    margin: 0;
    font: 9pt/1.3 var(--gulim);
    color: var(--text);
}

a:link,
a:visited {
    color: var(--link);
    text-decoration: none;
}

a:hover,
a:focus-visible {
    color: var(--hover);
}

:focus-visible {
    outline: 2px solid #ff3399;
    outline-offset: 1px;
}

img {
    border: 0;
}

h1,
h2,
h3 {
    font-size: inherit;
}

button,
input,
select,
textarea {
    font: inherit;
}

.vh {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip {
    position: absolute;
    top: -40px;
    left: 8px;
    z-index: 10;
    padding: 4px 8px;
    background: #fff;
}

.skip:focus {
    top: 8px;
}

/* --------------------------------------------------------------- header */

.top {
    position: relative;
    width: 1004px;
    height: 150px;
    background: url(aaa/night_bg_top.jpg) no-repeat;
}

.is-day .top {
    background-image: url(aaa/day_bg_top.jpg);
}

.top a {
    position: absolute;
    display: block;
}

.top__home {
    left: 4px;
    top: 0;
    width: 249px;
    height: 85px;
}

/* The star menu: each link covers the label painted on the sky and carries
   its star (::before), so hovering either lights the star. */
.star {
    left: var(--x);
    top: var(--y);
    width: var(--w);
    height: 16px;
    z-index: 2;
}

.star::before {
    content: "";
    position: absolute;
    left: calc(var(--sx) - var(--x));
    top: calc(var(--sy) - var(--y));
    width: 35px;
    height: 33px;
    background: url(aaa/star_night_none.gif) no-repeat;
}

.star:hover::before,
.star:focus-visible::before {
    background-image: url(aaa/star_night_none_over.gif);
}

.is-day .star::before {
    background-image: url(aaa/star_day_none.gif);
}

.is-day .star:hover::before,
.is-day .star:focus-visible::before {
    background-image: url(aaa/star_day_none_over.gif);
}

/* 히트 갤러리 has no label of its own; 추억 만들기 lies over its area. */
.star--hit {
    z-index: 1;
}

.star--pic {
    z-index: 3;
}

.is-night .star--free { --x: 449px; --y: 44px; --w: 57px; --sx: 459px; --sy: 16px; }
.is-night .star--diary { --x: 508px; --y: 79px; --w: 75px; --sx: 540px; --sy: 51px; }
.is-night .star--pic { --x: 652px; --y: 11px; --w: 75px; --sx: 668px; --sy: 24px; }
.is-night .star--hit { --x: 700px; --y: 20px; --w: 75px; --sx: 635px; --sy: 38px; }
.is-night .star--data { --x: 695px; --y: 61px; --w: 42px; --sx: 739px; --sy: 55px; }
.is-night .star--staff { --x: 680px; --y: 93px; --w: 43px; --sx: 724px; --sy: 87px; }

.is-day .star--free { --x: 560px; --y: 51px; --w: 57px; --sx: 578px; --sy: 20px; }
.is-day .star--diary { --x: 640px; --y: 74px; --w: 75px; --sx: 659px; --sy: 42px; }
.is-day .star--pic { --x: 671px; --y: 11px; --w: 75px; --sx: 705px; --sy: 22px; }
.is-day .star--hit { --x: 700px; --y: 20px; --w: 75px; --sx: 745px; --sy: 35px; }
.is-day .star--data { --x: 787px; --y: 32px; --w: 46px; --sx: 806px; --sy: 47px; }
.is-day .star--staff { --x: 807px; --y: 89px; --w: 43px; --sx: 775px; --sy: 77px; }

.tab {
    top: 128px;
    height: 22px;
}

.tab--info { left: 366px; width: 106px; }
.tab--starfind { left: 486px; width: 106px; }
.tab--astropic { left: 606px; width: 69px; }
.tab--clan { left: 689px; width: 126px; }
.tab--astroevent { left: 829px; width: 88px; }
.tab--guest { left: 930px; width: 64px; }

.tab:focus-visible,
.star:focus-visible,
.top__home:focus-visible,
.top__admin:focus-visible {
    outline-color: #fff;
}

/* Admins could open the control panel by clicking the sun (or the moon). */
.top__admin {
    left: 890px;
    top: 28px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
}

.is-day .top__admin {
    left: 898px;
    top: 32px;
    width: 80px;
    height: 74px;
}

.login {
    position: absolute;
    left: 10px;
    top: 126px;
    display: flex;
    align-items: center;
    width: 305px;
    height: 24px;
    margin: 0;
}

.login label img,
.login a img,
.login input[type="image"] {
    display: block;
}

.login .top a,
.login a {
    position: static;
}

.login__input {
    box-sizing: border-box;
    width: 70px;
    height: 18px;
    margin: 0;
    padding: 0 2px;
    border: 1px solid #767676;
    border-radius: 0;
    background: #fff;
    font: 9pt var(--gulim);
    color: #000;
}

.login label + .login__input {
    margin-right: 6px;
}

.login label[for="login-pw"] + .login__input {
    margin-right: 5px;
}

.login__keep {
    width: 13px;
    height: 13px;
    margin: 0 3px 0 0;
}

.login--in .login__name {
    width: 198px;
    margin: 0;
    padding-left: 4px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.login--in form {
    width: 64px;
    margin: 0;
}

/* --------------------------------------------------------- middle frame */

.ground {
    width: 1004px;
    background: #545686 url(aaa/night_bg.jpg) repeat-x;
}

.is-day .ground {
    background: #f99d2c url(aaa/day_bg.jpg) repeat-x;
}

.cols {
    display: grid;
    grid-template-columns: 150px 818px;
    column-gap: 20px;
    align-items: start;
    padding: 10px 8px 0;
}

.horizon {
    display: flex;
    align-items: flex-end;
    height: 110px;
}

.horizon img {
    display: block;
}

/* The left column's white boxes with a light blue inner rule. */
.lbox {
    box-sizing: border-box;
    width: 150px;
    margin: 0 0 20px;
    border: 10px solid transparent;
    border-image: url(aaa/lbox.png) 10 fill / 10px stretch;
    color: #626262;
}

.lbox h2,
.lbox p,
.lbox dl,
.lbox dd,
.lbox ul {
    margin: 0;
    padding: 0;
}

.lbox img {
    vertical-align: baseline;
}

.astro {
    text-align: center;
    font-family: var(--dotum);
    color: var(--text);
}

.astro__body {
    display: flex;
    justify-content: center;
    gap: 2px;
    margin-top: 2px;
    text-align: left;
}

.astro__times {
    width: 66px;
    padding: 1px 2px;
    line-height: 22px;
}

.astro__times div {
    display: flex;
}

.astro__times dt::after {
    content: "-";
}

.astro__moon {
    width: 60px;
    padding-top: 1px;
    line-height: 21px;
    white-space: nowrap;
}

.astro__moon img {
    display: block;
}

.menu li {
    margin: 3px 0;
    list-style: none;
}

.menu li::before,
.menu summary::before,
.loged__title img {
    vertical-align: baseline;
}

.menu li::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 4px;
    background: url(aaa/bul_love.gif);
}

.menu .menu__has-group::before {
    content: none;
}

.menu__group summary::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 4px;
    background: url(aaa/bul_love.gif);
}

/* A group's name was a link around <font color="blue">, so it stayed blue
   under the pointer; its items, bullets and all, sat between two <hr>s. */
.menu__group summary {
    display: inline;
    color: blue;
    cursor: pointer;
    list-style: none;
}

.menu__group summary::-webkit-details-marker {
    display: none;
}

.menu__group hr {
    height: 0;
    margin: 8px 0;
    border: 0;
    border-top: 1px solid #a0a0a0;
    border-bottom: 1px solid #fff;
}

.menu__group ul {
    margin: 0;
    padding: 0;
}

/* menudata(): <font color="red">AAA Toolbar!</font> */
.menu a.menu__toolbar:link,
.menu a.menu__toolbar:visited,
.menu a.menu__toolbar:hover {
    color: red;
}

.loged {
    line-height: 18px;
}

.loged__title {
    font-weight: normal;
}

.loged dl div {
    display: flex;
    padding-left: 10px;
}

.loged dt {
    width: 60px;
}

.loged dt::after {
    content: ":";
    float: right;
    width: 10px;
    text-align: center;
}

.loged dd {
    min-width: 50px;
    text-align: right;
}

.cygnus {
    margin: 20px 0 0;
    text-align: center;
}

.cygnus img {
    display: inline-block;
}

/* The white boxes of the centre column. */
.box {
    box-sizing: border-box;
    margin: 0 0 20px;
    border: 10px solid transparent;
    border-image: url(aaa/box.png) 10 fill / 10px stretch;
}

.copy {
    margin-bottom: 0;
}

.copy p {
    margin: 0;
    text-align: center;
    line-height: 15px;
}

/* 전광판 */
.sign {
    display: flex;
    height: 23px;
    background: url(aaa/sign_bg.gif) repeat-x;
}

.sign img {
    display: block;
    flex: none;
}

.sign__text {
    flex: 1;
    margin: 0;
    font: 12px/23px var(--gulim);
    color: #000;
    white-space: nowrap;
    overflow: hidden;
}

.sign__text img {
    display: inline;
    vertical-align: 1px;
}

/* 천문현상 & 일정: yesterday and the week after */
.week {
    width: 770px;
    margin: 0 auto;
    color: #626262;
}

.week__head,
.week__month {
    display: inline-block;
    margin: 0;
    padding: 8px 8px 7px 16px;
}

.week__month {
    float: right;
    padding: 8px 16px 7px 8px;
}

.week a:link,
.week a:visited {
    color: #626262;
}

.week a:hover {
    color: var(--link);
}

.week__grid {
    clear: both;
    /* The old cells were 110px wide and pushed the 770px table to 786px. */
    width: 786px;
    margin: 0 -8px;
    border: 1px solid var(--sky-line);
    border-spacing: 0;
    table-layout: fixed;
}

.week__grid th,
.week__grid td {
    border: 1px solid var(--sky-line);
    font-weight: normal;
    text-align: center;
}

.week__grid th {
    height: 18px;
    padding: 0;
}

.week__grid td {
    height: 78px;
    padding: 0;
}

.week__grid td p {
    margin: 5px 0;
}

.week__grid .is-today {
    background: #ccffff;
}

.week__grid .is-sat {
    color: blue;
}

.week__grid .is-sun {
    color: red;
}

/* The main box keeps the old 798px content width. */
.main {
    min-height: 120px;
}

.main > :first-child {
    margin-top: 0;
}

/* ----------------------------------------------------------------- home */

.home-top {
    display: grid;
    grid-template-columns: 390px 390px;
    column-gap: 18px;
    margin-bottom: 15px;
}

.home-boxes {
    display: grid;
    grid-template-columns: repeat(3, 254px);
    gap: 15px 18px;
}

.astrobox,
.noticebox,
.latest {
    color: #626262;
}

.astrobox a:link,
.astrobox a:visited,
.noticebox a:link,
.noticebox a:visited,
.latest a:link,
.latest a:visited {
    color: #626262;
}

.astrobox a:hover,
.latest a:hover {
    color: var(--link);
}

.noticebox a:hover {
    color: #a6003b;
}

.astrobox__head,
.noticebox__head {
    height: 28px;
    margin: 0;
    padding-left: 10px;
    line-height: 30px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    background: url(aaa/latest/astro_title_bg.gif) repeat-x;
}

.noticebox__head {
    background-image: url(aaa/latest/notice_title_bg.gif);
}

/* print_astro's title cell: a long title wraps and the row grows. */
.astrobox__head {
    display: table-cell;
    box-sizing: border-box;
    width: 390px;
    vertical-align: middle;
    line-height: 15px;
    white-space: normal;
    background-repeat: repeat;
}

.astrobox__body,
.noticebox__body {
    box-sizing: border-box;
    /* The old script set 138px plus padding and the bottom border. */
    height: 149px;
    padding: 5px;
    overflow: auto;
    border: 1px solid var(--sky-line);
    border-top: 0;
    background: #ccffff;
    color: var(--text);
}

.noticebox__body {
    border-color: #a6003b;
    background: #fff5f9;
}

.astrobox__body p {
    margin: 12px 0;
    color: #222;
    line-height: 15px;
    white-space: pre-line;
}

/* [notice_memo]: the notice's own HTML, in <p style="color:#222222">. */
.noticebox__body {
    color: #222;
    line-height: 15px;
}

.noticebox__body p {
    margin: 12px 0;
}

.noticebox__body img {
    max-width: 100%;
    height: auto;
}

.latest__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 28px;
    padding: 2px 12px 0 10px;
    box-sizing: border-box;
    background: url(aaa/latest/bbs_title_bg.gif) repeat-x;
}

.latest__head h2 {
    margin: 0;
}

.latest__list,
.latest__thumbs {
    margin: 0;
    padding: 0;
    list-style: none;
}

.latest__list li {
    display: flex;
    align-items: center;
    height: 24px;
}

.latest__list li::before {
    content: "";
    flex: none;
    width: 9px;
    height: 9px;
    margin-right: 6px;
    background: url(aaa/latest/bbs_left_old.gif);
}

.latest__list a {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
}

.latest__thumbs {
    display: flex;
    gap: 4px;
    padding: 13px 0 0 3px;
}

.latest__thumbs li {
    width: 82px;
    text-align: center;
}

.latest__thumbs img,
.latest__nothumb {
    display: block;
    box-sizing: border-box;
    width: 82px;
    height: 82px;
    border: 1px solid #000;
    object-fit: cover;
}

.latest__nothumb {
    overflow: hidden;
    padding: 4px;
    font-size: 11px;
    line-height: 1.2;
    color: #999;
    background: #fff;
}

.latest__thumbs .cmt {
    display: block;
    margin-top: 5px;
}

.cmt {
    font: 10px var(--tahoma);
    color: var(--comment);
}

.latest .cmt {
    flex: none;
    padding-left: 4px;
}

/* 오늘의 별밤 365 (etc_skin/sn365) */
.sn365 {
    margin: 0 0 25px;
    color: #626262;
}

.sn365 a:link,
.sn365 a:visited {
    color: #626262;
}

.sn365 a:hover {
    color: var(--link);
}

.sn365__title {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 45px;
    margin: 0;
}

.sn365__title img {
    display: block;
}

.sn365__head,
.sn365__near {
    display: flex;
    align-items: center;
    height: 28px;
    margin: 0;
    padding: 0 0 0 10px;
    background: url(aaa/sn365/title_bg.gif) repeat-x;
    font-weight: normal;
}

.sn365__near {
    justify-content: space-between;
}

.sn365__body {
    box-sizing: border-box;
    height: 110px;
    padding: 5px;
    overflow-y: auto;
}

.sn365__body p {
    margin: 12px 0;
    color: #222;
    white-space: pre-line;
}

/* ------------------------------------------- jaemanstyle_b02_blue boards */

.zb {
    width: 750px;
    margin: 0 auto;
    /* Where the RSS and login icons sat above the list. */
    padding-top: 16px;
    font-family: var(--tahoma);
    color: var(--text);
}

.zb a:link,
.zb a:visited,
.zb a:hover {
    color: var(--text);
}

.zb a:focus-visible {
    color: var(--theme);
}

.zb-num,
.zb .zb-stamp {
    font: 8pt var(--tahoma);
}

.zb-cats {
    padding: 5px 0 12px;
    text-align: center;
    font-family: var(--gulim);
}

.zb-cats a {
    display: inline-block;
    padding: 0 4px;
    white-space: nowrap;
}

.zb-cats a[aria-current] {
    font-weight: bold;
}

.zb-list {
    width: 750px;
    border-collapse: collapse;
    table-layout: fixed;
}

.zb-list__no { width: 30px; }
.zb-list__name { width: 80px; }
.zb-list__date { width: 62px; }
.zb-list__hit { width: 30px; }
col.zb-list__board { width: 110px; }

.zb-list th {
    height: 28px;
    padding: 0;
    background: url(aaa/jaeman/title_bg.gif) repeat-x;
    font: 11px var(--gulim);
}

.zb-list th img {
    display: block;
    margin: 0 auto;
}

.zb-list td {
    height: 28px;
    padding: 0;
    border-bottom: 1px solid var(--line);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zb-list tbody tr:hover {
    background: var(--row);
}

.zb-list .is-notice {
    background: var(--row);
}

.zb-list .is-notice:hover {
    background: transparent;
}

.zb-list__notice {
    font: 7pt var(--tahoma);
}

.zb-list__notice span,
.zb-view th span {
    color: var(--theme);
}

td.zb-list__subject {
    padding-left: 4px;
    text-align: left;
}

.zb-icon {
    vertical-align: 0;
}

.zb-list td.zb-list__name {
    font-family: var(--gulim);
}

.zb-list td.zb-list__board {
    font-family: var(--gulim);
}

.zb-list__empty {
    color: #999;
}

.zb .cmt {
    font: 7pt var(--tahoma);
}

.zb-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 5px 0 0;
}

.zb-buttons > div,
.zb-buttons > p {
    display: flex;
    gap: 4px;
    margin: 0;
}

.zb-buttons img,
.zb-search summary img {
    display: block;
}

.zb-search {
    position: relative;
}

.zb-search summary {
    list-style: none;
    cursor: pointer;
}

.zb-search summary::-webkit-details-marker {
    display: none;
}

.zb-search__panel {
    position: absolute;
    right: 0;
    top: 46px;
    z-index: 2;
    display: grid;
    justify-items: end;
    gap: 10px;
    padding: 6px 0;
    background: #fff;
    white-space: nowrap;
}

.zb-search form {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    margin: 0;
}

/* The old search box opened below the page numbers and pushed the rest down. */
.zb:has(.zb-search[open]) .zb-credit {
    margin-top: 110px;
}

.zb-search__date {
    align-items: center !important;
    gap: 2px !important;
    font: 9pt var(--gulim);
}

.zb-search__date select {
    font: 9pt var(--tahoma);
}

.zb-search__date button {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: #00f;
    cursor: pointer;
}

.zb-search input[type="search"],
.zb-find input[type="search"],
.gb-search input[type="search"] {
    width: 150px;
    padding: 1px 2px;
    border: 0;
    border-bottom: 1px solid var(--theme);
    border-radius: 0;
    background: transparent;
    font: 12px var(--gulim);
}

.zb-pages {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    margin: 6px 0 0;
    font: bold 7pt var(--verdana);
}

.zb-pages a,
.zb-pages__now {
    padding: 1px 4px;
}

.zb-pages__now {
    background: var(--theme);
    color: #fff;
}

.zb-pages img {
    display: block;
    margin: 0 2px;
}

.zb-credit {
    margin: 40px 0 10px;
    text-align: right;
    font: 8pt var(--tahoma);
}

.zb-credit b {
    color: var(--theme);
}

/* Reading a post */
.zb-view {
    width: 750px;
    border-spacing: 1px;
    background: var(--line);
}

.zb-view .zb-view__bar {
    height: 10px;
    padding: 0;
    background: var(--theme);
}

.zb-view th {
    width: 72px;
    height: 22px;
    padding: 0 8px 0 0;
    background: var(--row);
    text-align: right;
    font: bold 8pt var(--tahoma);
    white-space: nowrap;
}

.zb-view td {
    padding: 0 8px;
    background: #fff;
    font-family: var(--gulim);
}

.zb-view td.zb-num {
    font-family: var(--tahoma);
}

.zb-view__title {
    margin: 0;
    font-weight: normal;
}

.zb-view a:link,
.zb-view a:visited {
    color: var(--link);
}

.zb-images {
    margin: 10px 0 0;
    text-align: center;
}

.zb-images img {
    display: block;
    max-width: 750px;
    height: auto;
    margin: 10px auto 0;
}

.zb-body,
.zb-comment__body {
    font-family: var(--gulim);
    line-height: 160%;
    overflow-wrap: anywhere;
}

.zb-body {
    margin: 17px 0 0;
    padding: 10px;
}

.zb-body img,
.zb-comment__body img,
.dq-view__body img,
.gb-body img {
    max-width: 100%;
    height: auto;
}

.zb-body table {
    max-width: 100%;
}

.zb-body a:link,
.zb-body a:visited,
.zb-comment__body a:link,
.zb-comment__body a:visited {
    color: var(--link);
    text-decoration: underline;
}

.zb-stamp {
    margin: 0;
    padding: 0 10px 10px;
    text-align: right;
}

.zb-comments {
    margin-top: 0;
}

.zb-comment {
    border-top: 11px solid var(--line);
}

/* view_comment.php: three rows of a table with cellpadding 5. */
.zb-comment > * {
    margin: 0;
    padding: 5px;
    line-height: 16px;
}

.zb-comment.depth-1 { margin-left: 20px; }
.zb-comment.depth-2 { margin-left: 40px; }
.zb-comment.depth-3,
.zb-comment.depth-4,
.zb-comment.depth-5,
.zb-comment.depth-6 { margin-left: 60px; }

.zb-comment__name {
    font: 9pt/16px var(--gulim);
}

.zb-comment .zb-comment__body {
    line-height: 16px;
}

.zb-comment__body p {
    margin: 0;
}

.is-hidden {
    color: #999;
}

.zb-buttons--view {
    margin: 8px 0 5px;
    border-top: 1px solid var(--line);
    padding-top: 3px;
}

.zb-near p {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 20px;
    margin: 0;
    padding-left: 6px;
    font-family: var(--gulim);
}

.zb-near a {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zb-near__name {
    flex: none;
    width: 80px;
    margin-left: auto;
    text-align: center;
}

.zb-heading {
    margin: 0 0 10px;
    font: bold 12px var(--gulim);
    color: var(--theme);
}

.zb-find {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    margin: 0 0 12px;
    font-family: var(--gulim);
}

.zb-find input[type="search"] {
    width: 220px;
}

.zb-find a:link,
.zb-find a:visited {
    color: var(--link);
}

.zb-found,
.zb-hint {
    margin: 0 0 8px;
    font-family: var(--gulim);
}

.zb-list--search .zb-list__board a:link,
.zb-list--search .zb-list__board a:visited {
    color: var(--link);
}

/* --------------------------------------------- goodmonster_calendar */

.cal {
    width: 660px;
    font-family: var(--verdana);
}

.cal__years,
.cal__months {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.cal__years {
    margin-bottom: 10px;
}

.cal__years img {
    display: block;
}

.cal__year {
    padding: 3px;
    background: var(--theme);
    font: 7pt var(--verdana);
    color: #fff;
}

.cal__months {
    gap: 0;
    height: 28px;
}

.cal__months a {
    width: 50px;
    text-align: center;
    font-family: var(--verdana);
}

.cal__months a[aria-current] {
    font-weight: bold;
}

.cal__grid {
    width: 660px;
    border-spacing: 1px;
    table-layout: fixed;
}

.cal__grid th {
    height: 28px;
    padding: 0;
    background: url(aaa/jaeman/title_bg.gif) repeat-x;
    font: 9pt var(--tahoma);
    font-weight: normal;
}

/* The old calendar left a 10px gap under the weekday names. */
.cal__grid tbody tr:first-child td {
    height: 85px;
    border-top: 10px solid #fff;
    background-clip: padding-box;
}

.cal__grid td {
    box-sizing: border-box;
    height: 75px;
    padding: 3px;
    vertical-align: top;
    font: 12px var(--tahoma);
    overflow: hidden;
}

.cal__day { background: #dde7e7; }
.cal__day--0 { background: #e2a6b4; }
.cal__day--6 { background: #448ccb; }
.cal__day.is-today { border: 1px solid #616264; }
.cal__day--0.is-today { border-color: #c23352; }
.cal__day--6.is-today { border-color: #0b6db7; }

.cal__date {
    display: block;
    margin-bottom: 1px;
    font: 9px var(--verdana);
}

.cal__ev {
    display: block;
    line-height: 13px;
    white-space: nowrap;
    overflow: hidden;
}

.cal__list {
    margin: 12px 0 0;
    text-align: right;
    font-family: var(--gulim);
}

/* ------------------------------------------ DQ'Revolution Gallery (white) */

.dq {
    width: 750px;
    margin: 0 auto;
    padding-top: 20px;
    font-family: var(--gulim);
    color: #707070;
}

.dq a:link,
.dq a:visited {
    color: #707070;
}

.dq a:hover {
    color: #000;
}

.dq-cats {
    padding: 4px 0 6px 11px;
}

.dq-cats a {
    white-space: nowrap;
}

.dq-cats a[aria-current] {
    color: #363636;
}

.dq-dot {
    margin: 0 2px 0 8px;
    color: #a6a6a6;
}

.dq-rule {
    height: 0;
    margin: 4px 0 10px;
    border: 0;
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #f0f0f0;
}

.dq-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    row-gap: 30px;
    margin: 0;
    padding: 5px 15px 0;
    list-style: none;
}

.dq-thumb {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 122px;
    padding: 0 10px;
}

.dq-thumb img {
    display: block;
    max-width: 120px;
    max-height: 120px;
    border: 1px solid #606060;
}

.dq-thumb__none {
    display: block;
    width: 120px;
    height: 90px;
    border: 1px solid #ccc;
    background: #fafafa;
}

.dq-cap {
    margin: 0;
    padding: 6px 10px 0;
    text-align: center;
    font: 11px/120% var(--dotum);
    overflow-wrap: anywhere;
}

.dq-cap__title { color: #959595; }
.dq-cap__name { color: #606060; }
.dq-cap__cate { color: #959595; }

.dq-cap__eng {
    font: 11px/12px var(--tahoma);
    color: #a6a6a6;
}

.dq-cap__c {
    color: var(--comment);
}

.dq-grid__empty {
    grid-column: 1 / -1;
    padding: 40px 0;
    text-align: center;
}

.dq-pages {
    margin: 30px 0 10px;
    text-align: center;
    font-size: 12px;
}

.dq-pages a,
.dq-pages b {
    padding: 0 3px;
}

.dq-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 10px;
    padding: 0 10px;
}

.dq-buttons p {
    margin: 0;
}

.dq .dq-button,
.dq-button {
    display: inline-block;
    padding: 2px 6px;
    border: 1px solid #ccc;
    background: #e5e5e5;
    font: 12px var(--gulim);
    color: #585858;
    cursor: pointer;
}

.dq-search {
    display: flex;
    gap: 2px;
}

.dq-input {
    box-sizing: border-box;
    width: 102px;
    height: 22px;
    padding: 3px;
    border: 1px solid #c9c9c9;
    color: #252525;
}

.dq-credit {
    margin: 10px 0;
    text-align: right;
    font: 8pt var(--tahoma);
}

.dq-view__info {
    padding: 10px 12px;
    background: #f5f5f5 linear-gradient(#fff, #f2f2f2);
    border-bottom: 1px solid #eaeaea;
    line-height: 1.7;
}

.dq-view__info p {
    margin: 0;
}

.dq-view__cate {
    color: #959595;
}

.dq-view__files {
    margin-top: 6px !important;
    font-size: 11px;
}

.dq-view__title {
    margin: 20px 0 16px;
    text-align: center;
    font: bold 16px var(--gulim);
    color: #909090;
}

.dq-view__body {
    padding: 0 10px;
    text-align: center;
    line-height: 160%;
    overflow-wrap: anywhere;
}

.dq-view__photo {
    margin: 20px 0;
    text-align: center;
}

.dq-view__photo img {
    display: block;
    max-width: 750px;
    height: auto;
    margin: 0 auto;
}

.dq-view__photo figcaption {
    margin-top: 10px;
    font: 11px Georgia, var(--tahoma);
}

.dq-comments {
    padding: 0 10px;
}

.dq-comment {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}

.dq-comment:last-child {
    border-bottom: 0;
}

.dq-comment.depth-1,
.dq-comment.depth-2,
.dq-comment.depth-3,
.dq-comment.depth-4,
.dq-comment.depth-5,
.dq-comment.depth-6 {
    padding-left: 20px;
}

.dq-comment__name {
    margin: 0 0 2px;
    font: 12px var(--gulim);
    color: #404040;
}

.dq-comment__body p {
    margin: 0;
}

.dq-comment time {
    flex: none;
    text-align: right;
    font: 11px var(--tahoma);
}

.dq-near {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
}

/* --------------------------------------------- change_simpleguest2_white */

.gb {
    width: 750px;
    margin: 0 auto;
    padding-top: 20px;
    font-family: var(--gulim);
    line-height: 160%;
    color: #000;
}

.gb a:link,
.gb a:visited {
    color: #000;
}

.gb a:hover {
    color: gray;
}

.gb-entry,
.gb-notice {
    margin: 0 0 21px;
}

.gb-notice {
    width: 90%;
    margin: 0 auto 21px;
    border: 1px solid #e7e7e7;
}

.gb-head {
    display: flex;
    justify-content: space-between;
    padding: 1px 4px;
    border: 1px solid;
    border-color: #e7e7e7 #fff #fff #e7e7e7;
    box-shadow: inset -1px -1px 0 #e7e7e7, 1px 1px 0 #e7e7e7;
    font: 8pt/1.6 var(--tahoma);
}

.gb-notice .gb-head {
    background: #f9f9f9;
}

.gb-head h2 {
    margin: 0;
    font-weight: normal;
}

.gb-title {
    color: #777;
}

.gb-body {
    padding: 5px;
    overflow-wrap: anywhere;
}

.gb-notice .gb-body {
    padding: 10px;
}

.gb-body p:first-child {
    margin-top: 0;
}

.gb-body p:last-child {
    margin-bottom: 0;
}

.gb-reply {
    width: 90%;
    margin: 0 0 10px auto;
    border: 1px solid #e7e7e7;
}

.gb-foot {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #000;
    font: 8pt var(--tahoma);
}

.gb-pages a,
.gb-pages b {
    margin-left: 2px;
}

.gb-search {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 4px;
    margin: 6px 0 0;
}

.gb-search input[type="search"] {
    width: 100px;
    border-bottom-color: #000;
}

.gb-empty {
    padding: 40px 0;
    text-align: center;
}

/* --------------------------------------------- nownuri frame, pcskin31 */

html.nownuri {
    background: #000066;
}

.nownuri body {
    width: 780px;
    font: 12px/1.3 var(--gulim);
    color: #fff;
}

.nownuri a:link,
.nownuri a:visited,
.nownuri a:hover {
    color: #fff;
}

.nn {
    display: grid;
    grid-template-columns: 1fr 2px 600px;
    min-height: 600px;
}

.nn::before {
    content: "";
    grid-column: 2;
    grid-row: 1;
    background: #fff;
}

.nn__menu {
    grid-column: 1;
    grid-row: 1;
    padding: 5px;
}

.nn__home {
    display: block;
    height: 50px;
    padding-left: 10px;
    font-size: 11px;
    line-height: 30px;
    opacity: 0.6;
}

.nn__menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nn__menu li {
    padding-left: 10px;
    line-height: 25px;
}

.nn__menu li li {
    padding-left: 10px;
}

.nn__menu a {
    display: block;
    border: 1px solid transparent;
}

.nn__menu a:hover {
    border-color: #b8b8b8 #000 #000 #b8b8b8;
}

.nn__menu a:active {
    border-color: #000 #b8b8b8 #b8b8b8 #000;
}

.nn__main {
    grid-column: 3;
    grid-row: 1;
    padding: 10px;
}

.pc__title {
    margin: 4px 0 14px;
    text-align: center;
    font-weight: normal;
}

.pc__list,
.pc__view {
    width: 600px;
    border-collapse: collapse;
    table-layout: fixed;
    border-top: 2px solid #fff;
}

.pc__no { width: 50px; }
.pc__name,
.pc__date { width: 80px; }
.pc__hit { width: 50px; }

.pc__list th {
    height: 30px;
    font-weight: bold;
}

.pc__subject-head {
    letter-spacing: 30px;
}

.pc__list td {
    height: 22px;
    padding: 0;
    border: 1px solid transparent;
    border-width: 1px 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pc__list tbody tr:hover td {
    border-color: #b8b8b8 transparent #000;
}

td.pc__subject {
    padding-left: 30px;
    text-align: left;
}

.pc__pages {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 2px solid #fff;
    text-align: center;
}

.pc__search {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 2px;
    margin-top: 8px;
}

.pc__search input {
    width: 100px;
    margin-right: 10px;
    border: 0;
    border-bottom: 1px solid #fff;
    border-radius: 0;
    background: #000066;
    color: #fff;
}

.pc__search button,
.pc__button {
    padding: 1px 6px;
    border: 1px solid #fff;
    background: #000;
    font-size: 12px;
    color: #fff;
}

.pc__foot {
    margin: 0;
    padding: 0 0 8px 6px;
    border-bottom: 2px solid #fff;
}

.pc__credit {
    margin: 6px 0;
    text-align: right;
    font: 10px var(--tahoma);
}

.pc__view th {
    width: 60px;
    height: 30px;
    padding: 0;
    text-align: right;
    font-weight: bold;
}

.pc__view td {
    padding-left: 30px;
}

.pc__from {
    display: flex;
    justify-content: space-between;
    padding-right: 20px !important;
}

.pc__body {
    min-height: 300px;
    padding: 10px;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
    line-height: 1.6;
    overflow-wrap: anywhere;
    white-space: normal;
}

.pc__body img {
    max-width: 100%;
    height: auto;
}

.pc__comment {
    padding: 6px 10px;
    border-bottom: 1px solid #446;
}

.pc__comment h2 {
    margin: 0 0 4px;
    font-weight: bold;
}

.pc__near {
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    height: 30px;
    margin-top: 14px;
}

/* -------------------------------------------------------------- sitemap */

.smap h1 {
    margin: 0 0 22px 20px;
}

.smap img {
    display: block;
}

.smap__group {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.smap__group li {
    display: grid;
    grid-template-columns: 37px 163px 1fr;
    align-items: center;
    min-height: 33px;
    margin-bottom: 10px;
}

.smap__group h2 {
    margin: 0;
}

.smap__text {
    margin: 0;
    padding-right: 4px;
    font: 14px var(--gulim);
    color: #626262;
}

.smap__links a {
    font-size: 15px;
}

.smap__more summary {
    position: absolute;
    right: 4px;
    margin-top: -20px;
    font: 12px var(--dotum);
    color: var(--link);
    cursor: pointer;
    list-style: none;
}

.smap__more summary::-webkit-details-marker {
    display: none;
}

.smap__more summary:hover {
    color: var(--hover);
}

.smap__more p {
    margin: 6px 0 0;
    font-size: 13px;
}

.smap__text {
    position: relative;
}

.smap__legend {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 30px 0 10px;
    font-size: 14px;
    color: #626262;
}

/* ------------------------------------------------------- 동아리 소개 */

.info {
    padding: 0 20px;
    font-size: 13px;
    line-height: 15px;
    color: #333399;
}

.info h1 {
    margin: 0 -20px 6px;
    line-height: 0;
}

.info__toc ul {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    font-size: 12px;
    line-height: 15px;
}

.info__part {
    margin: 0 0 20px;
}

.info__part h2 {
    display: inline-block;
    margin: 0 4px 0 -20px;
    vertical-align: bottom;
}

.info__part h2 img {
    display: block;
}

.info__top {
    font-size: 12px;
}

.info__part > h2 + .info__top {
    display: inline-block;
    margin-bottom: 25px;
}

.info p {
    margin: 0;
    text-align: justify;
    text-indent: 0.5em;
}

.info__intro {
    position: relative;
    min-height: 390px;
    padding-right: 258px;
    line-height: 16px;
}

.info__intro p + p {
    margin-top: 16px;
}

.info__photo {
    position: absolute;
    top: 0;
    right: 0;
}

.info h3 {
    margin: 0 0 15px 20px;
    font: normal 16px/21px var(--gulim);
}

.info p + h3 {
    margin-top: 30px;
}

.info__table {
    width: 758px;
    border: 3px double pink;
    border-spacing: 2px;
}

.info__table th,
.info__table td {
    padding: 5px;
    border: 1px solid pink;
    text-align: center;
    font-weight: normal;
}

.info__table--history col:first-child,
.info__table--history td:first-child {
    width: 50px;
}

.info__table--history td:nth-child(2) {
    width: 150px;
}

.info__table--staff td:first-child {
    width: 50px;
    white-space: nowrap;
}

.info__table--staff td:nth-child(2) {
    width: 70px;
}

.info__table--staff td:last-child {
    text-align: left;
}

/* Zeroboard 4's error box */
.zb-error {
    width: 200px;
    margin: 0 auto;
    padding: 38px 0 32px;
    font: 9pt var(--tahoma);
    color: var(--text);
}

.zb-error__box {
    padding: 0 0 1px;
    border: 1px solid #efefef;
    border-top: 11px solid var(--theme);
    background: #fff;
    text-align: center;
}

.zb-error__box h1,
.zb-error__box p {
    margin: 0;
    padding: 15px 4px;
    font: inherit;
}

.zb-error__box .zb-error__detail {
    margin-top: -10px;
    padding-top: 0;
    font-size: 8pt;
    color: #888;
}

.zb-error__go {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 50px;
    margin: 0;
}

.zb-error__go a {
    display: block;
}

.zb-error__move:link,
.zb-error__move:visited {
    margin: 0 auto;
    padding: 1px 17px;
    border: 1px solid #767676;
    border-radius: 2px;
    background: linear-gradient(#f6f6f6, #dddddd);
    font: 13px Arial, var(--tahoma);
    color: #000;
}

.zb-error__move:hover {
    background: #e5e5e5;
    color: #000;
}

/* ------------------------------------------------------- 전광판 내용관리 */

/* 3rd/signboard.php's view(): 780px tables, a #ebd9d9 rule over each row. */
.signs {
    width: 780px;
    padding-top: 15px;
    font: 9pt var(--gulim);
    color: var(--text);
}

.signs a:link,
.signs a:visited {
    font: 12px var(--gulim);
    color: var(--link);
}

.signs a:hover {
    color: var(--hover);
}

.signs__modes {
    margin: 0 0 15px 30px;
    font: 12px var(--gulim);
}

.signs__list {
    width: 740px;
    margin: 0 20px;
    border-spacing: 3px;
    text-align: center;
}

.signs__list th {
    font-weight: normal;
}

.signs__list th:nth-child(1) { width: 30px; }
.signs__list th:nth-child(2) { width: 70px; }
.signs__list th:nth-child(3) { width: 410px; }

.signs__list td {
    padding-top: 4px;
    border-top: 1px solid #ebd9d9;
}

.signs__gone {
    color: red;
}

.signs__pages {
    margin: 15px 0 0;
    text-align: center;
    font: 7pt var(--tahoma);
    color: #cc0000;
}

.signs__pages a:link,
.signs__pages a:visited {
    font: 7pt var(--tahoma);
}

.signs__foot {
    margin: 5px 0 0 33px;
    font: 12px var(--gulim);
}

/* ---------------------------------------------------------- 링크 모음 */

/* 3rd/link.php and style_link.css: a 560px table with 5px cell spacing,
   3px #ccdded bars between links and a 1px rule under each address. */
.links {
    width: 590px;
    font: 8pt var(--tahoma);
    color: #555;
}

.links__head {
    display: grid;
    grid-template-columns: 200px 190px 180px;
    align-items: center;
    min-height: 26px;
    padding-top: 2px;
}

.links h1 {
    grid-column: 2;
    margin: 0;
    text-align: center;
    font: bold 18px var(--gulim);
    color: #666;
}

.links__order {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    padding-right: 6px;
    font: 9pt var(--gulim);
}

/* The sort select submits itself on change (app.js); without the script a
   button shows. */
.links__order {
    margin: 0;
}

.links__order select {
    font: 9pt var(--gulim);
    color: var(--text);
}

.links__list {
    width: 550px;
    margin: 14px 0 0 20px;
    padding: 0;
    border-top: 3px solid var(--line);
    list-style: none;
}

.links__list li {
    padding: 5px 14px 5px 14px;
    border-bottom: 3px solid var(--line);
}

.links__list h2 {
    margin: 0 0 0 2px;
    font: 15px/18px var(--gulim);
}

.links__list a {
    color: #626262;
}

.links__list a:hover {
    color: var(--link);
}

.links__url {
    margin: 0;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--line);
    font: 11px/13px var(--gulim);
}

.links__memo {
    margin: 5px 0 0 20px;
    white-space: pre-wrap;
    word-break: break-all;
    font: 13px/16px var(--gulim);
    color: #626262;
}

.links__reg {
    margin: 5px 0 0;
    text-align: right;
    font: 9px/12px var(--tahoma);
    color: #626262;
}

.links__find {
    display: flex;
    align-items: center;
    gap: 3px;
    width: 530px;
    height: 20px;
    margin-left: 15px;
    padding: 5px 0 1px 30px;
    border-bottom: 3px solid var(--line);
}

.links__find select,
.links__find input:not([type="image"]) {
    box-sizing: border-box;
    height: 20px;
    font: 9pt var(--gulim);
}

.links__find select {
    width: 74px;
}

.links__find input[type="search"] {
    width: 100px;
}

.links__find img,
.links__find input[type="image"] {
    display: block;
}

.links__size {
    margin-left: auto;
    padding-right: 10px;
    font: bold 8pt var(--tahoma);
}

.links__size input {
    width: 30px;
}

.links__pages {
    width: 360px;
    margin: 5px 0 0 115px;
    text-align: center;
    font: 13px var(--gulim);
    color: #626262;
}

.links__pages a {
    color: #626262;
}

/* ------------------------------------- members' pages, messages, errors */

/* The members' pages and messages are zb4's own; see the sections below. */

.void,
.post {
    width: 600px;
    margin: 0 auto;
    padding: 20px 0 30px;
    font-family: var(--gulim);
}

.post {
    width: 750px;
}

.void h1,
.post h1 {
    margin: 0 0 14px;
    padding: 0 0 6px 10px;
    border-bottom: 2px solid var(--theme);
    font: bold 14px var(--gulim);
    color: var(--theme);
}

.void {
    text-align: center;
    padding-top: 40px;
}

.void h1 {
    border: 0;
    padding: 0;
}

.void__code {
    margin: 0 0 8px;
    font: bold 32px var(--verdana);
    color: var(--line);
}

.post__meta {
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 2px 14px;
    margin: 0 0 10px;
    padding: 6px 10px;
    background: var(--row);
}

.post__meta div {
    display: flex;
    gap: 6px;
}

.post__meta dt {
    font-weight: bold;
}

.post__meta dd {
    margin: 0;
}

.post__body {
    line-height: 160%;
    overflow-wrap: anywhere;
}

.post__body img {
    max-width: 100%;
    height: auto;
}

/* --------------------------------------- zb4 admin pages: admin_setup.php */

/* A black 1px grid over the window: the ZEROBOARD logo, the dark red bar,
   the grey group column and the dark work area. */
html.zb4.zb4-admin {
    background: #444;
}

.zba {
    display: grid;
    grid-template-columns: 159px 1fr;
    grid-template-rows: 64px 1fr;
    gap: 1px;
    box-sizing: border-box;
    min-height: 100vh;
    padding: 1px;
    background: #000;
}

.zb4 .zba a:link,
.zb4 .zba a:visited {
    color: #000;
}

.zba__logo {
    background: #fff;
}

.zba__logo img,
.zba__side img {
    display: block;
}

.zba__bar {
    position: relative;
    background: #6f080a;
    color: #fff;
}

.zb4 .zba__bar a:link,
.zb4 .zba__bar a:visited {
    color: #fff;
}

.zba__links {
    position: absolute;
    top: 5px;
    right: 10px;
    font: bold 9pt var(--gulim);
}

.zba__top {
    position: absolute;
    bottom: 0;
    left: 0;
}

.zba__who {
    position: absolute;
    right: 6px;
    bottom: 0;
    display: flex;
    align-items: center;
    height: 24px;
    font: 8pt var(--tahoma);
    white-space: nowrap;
}

.zba__who form {
    margin: 0;
}

.zba__who button {
    padding: 0;
    border: 0;
    background: none;
    font: bold 9pt var(--gulim);
    color: #fff;
    cursor: pointer;
}

.zba__side {
    background: #3f3f3f;
    color: #fff;
}

.zba__side > img:first-child {
    background: #595959;
}

.zba__group {
    height: 26px;
    margin: 0;
    padding-top: 3px;
    background: url(aaa/admin/gnamebg.gif);
    text-align: center;
    line-height: 23px;
}

.zb4 .zba__side a:link,
.zb4 .zba__side a:visited {
    color: #fff;
}

.zba__menu {
    margin: 0;
    padding: 3px;
    border-bottom: 1px solid #666;
    background: #868686;
    font: 8pt/14px var(--tahoma);
}

.zba__menu img {
    display: inline;
    vertical-align: middle;
}

.zba__copy {
    margin-top: 20px;
}

.zba__main {
    background: #3d3d3d;
    color: #fff;
    font: 9pt var(--gulim);
}

/* admin_view_member.php and admin_modify_member.php: #b0b0b0 1px lines,
   a #bbb summary, #a0a0a0 heads, #e0e0e0 rows, Tahoma 8pt. */
.zba-table {
    width: 100%;
    border-spacing: 1px;
    background: #b0b0b0;
    font: 8pt var(--tahoma);
    color: #000;
    text-align: center;
}

.zba-table__title {
    height: 30px;
    padding: 0;
    border: 1px solid #b0b0b0;
    border-bottom-color: #000;
    background: #3d3d3d;
    text-align: left;
}

.zba-table__title img {
    display: block;
    margin: 5px 0;
}

.zba-table__sum td {
    height: 25px;
    padding: 0;
    background: #bbb;
    text-align: right;
}

.zba-table th {
    height: 25px;
    padding: 0;
    background: #a0a0a0;
    font-weight: bold;
}

.zba-table td {
    height: 23px;
    padding: 0;
    background: #e0e0e0;
}

.zba-list__no {
    font-size: 7pt;
}

.zba-list__admin {
    font-weight: bold;
    color: red;
}

.zba-list__denied {
    color: #a00;
}

/* cellpadding=3, rows 22px high, or 26px around a text box or button. */
.zba-member th {
    width: 25%;
    height: 16px;
    padding: 3px 8px 3px 3px;
    text-align: right;
}

.zba-member td {
    height: 16px;
    padding: 3px;
    text-align: left;
}

.zba-member .zba-table__head td {
    height: 26px;
    background: #b0b0b0;
    text-align: center;
    font: 9pt var(--gulim);
}

.zba-member form {
    margin: 0;
}

.zba-member select,
.zba-member input {
    font: 9pt var(--gulim);
    vertical-align: middle;
}

.zba-secret {
    font: 8pt var(--tahoma);
    overflow-wrap: anywhere;
}

/* The board's dark buttons, value=' 검색 ', 20px high. */
.zba-button {
    display: inline-block;
    box-sizing: border-box;
    height: 20px;
    padding: 0 6px;
    border: 2px outset #b0b0b0;
    background: #3d3d3d;
    font: 8pt/16px var(--tahoma);
    color: #fff;
    vertical-align: middle;
    cursor: pointer;
}

.zba a.zba-button:link,
.zba a.zba-button:visited {
    color: #fff;
    text-decoration: none;
}

.zba-search {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 5px 3px;
    border: 1px solid #b0b0b0;
    border-top: 0;
    background: #666;
}

.zba-search select,
.zba-search input {
    font: 9pt var(--gulim);
}

.zba-pages {
    margin: 14px 0;
    font: 8pt var(--tahoma);
    text-align: center;
}

.zba .zba-pages a:link,
.zba .zba-pages a:visited {
    color: #fff;
}

.zba-actions {
    margin: 8px 0;
    text-align: center;
}

.zba-audit {
    margin-top: 10px;
}

.zba-audit td {
    padding: 0 4px;
}

.zba-table__name {
    padding: 0 0 4px;
    font: bold 9pt var(--gulim);
    color: #fff;
    text-align: left;
}

.zba-audit__title {
    margin: 1px 0 0;
}

/* ------------------------- zb4 member windows: join, modify, lost id */

/* zb4's member pages (board/style.css) opened in a window of their own:
   black 굴림 9pt on white, links black and underlined on hover. */
html.zb4 {
    background: #fff;
}

.zb4 body {
    width: auto;
    font: 9pt var(--gulim);
    color: #000;
}

.zb4 a:link,
.zb4 a:visited {
    color: #000;
}

.zb4 a:hover {
    color: #444;
    text-decoration: underline;
}

/* board/error.php: a 300px grey table under three blank lines, "Message"
   on a darker bar, the text, then a dark "Move Back" button. */
.zb4-msg {
    width: 298px;
    margin: 42px auto 0;
    border: 1px solid #8d8d8d;
    background: #d3d3d3;
    font: 8pt/13px var(--tahoma);
    text-align: center;
}

.zb4-msg__head {
    height: 30px;
    margin: 0;
    border-bottom: 1px solid #8d8d8d;
    background: #bbb;
    font-weight: bold;
    line-height: 30px;
}

.zb4-msg__body {
    padding: 16px 3px 18px;
}

.zb4-msg__body p {
    margin: 0;
}

.zb4-msg__body p + p {
    margin-top: 15px;
}

/* The board's dark buttons: value="   Move Back   ", 23px high. */
a.zb4-button,
button.zb4-button {
    display: inline-block;
    box-sizing: border-box;
    height: 23px;
    padding: 0 17px;
    border: 2px outset #b0b0b0;
    background: #3d3d3d;
    font: 8pt/19px var(--tahoma);
    color: #fff;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
}

.zb4 a.zb4-button:link,
.zb4 a.zb4-button:visited,
.zb4 a.zb4-button:hover {
    color: #fff;
    text-decoration: none;
}

.zb4-msg__after {
    margin: 40px 0 0;
    text-align: center;
}

/* After a failed form the box stands alone, as zb4's alert did; Move Back
   shows the form again, as it was filled in, at the field to correct. */
.zb4-msg + .is-behind:not(:target, :has(:target)) {
    display: none;
}

.zb4-msg:has(+ .is-behind:target, + .is-behind :target) {
    display: none;
}

/* member_join.php and member_modify.php: a 540px table with 1px cell
   spacing; pink (#EBD9D9) bars of 3px between parts and 1px between rows. */
.zb4-form {
    display: flex;
    flex-direction: column;
    gap: 1px;
    width: 538px;
    margin: 0 auto;
    padding: 15px 1px 1px;
}

.zb4-form__title {
    height: 49px;
    margin: 0;
}

.zb4-form__title img {
    display: block;
}

.zb4-license {
    padding: 15px 0 0;
    border-top: 3px solid #ebd9d9;
}

.zb4-license textarea {
    display: block;
    box-sizing: border-box;
    width: 511px;
    height: 174px;
    margin: 0 auto;
}

.zb4-accept {
    height: 20px;
    margin: 0;
    padding-left: 9px;
    line-height: 20px;
}

.zb4-accept input {
    margin: 0 3px 0 4px;
    vertical-align: -2px;
}

.zb4-row {
    display: grid;
    grid-template-columns: 140px 397px;
    column-gap: 1px;
    align-items: center;
    min-height: 28px;
    margin: 0;
    padding-bottom: 1px;
    border-bottom: 1px solid #ebd9d9;
}

.zb4-row > :first-child {
    padding-right: 3px;
    text-align: right;
    font: 8pt var(--tahoma);
}

.zb4-row > :last-child {
    padding-left: 3px;
}

.zb4-row--note,
.zb4-rows {
    border-top: 3px solid #ebd9d9;
    padding-top: 1px;
}

.zb4-row--note {
    min-height: 25px;
    border-bottom: 0;
    padding-bottom: 0;
}

.zb4-rows {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.zb4-row--id {
    min-height: 39.5px;
}

.zb4-row--name {
    min-height: 39px;
}

.zb4-hint {
    display: inline-block;
    margin-top: 4px;
}

/* Text boxes: border-color #d8b3b3 over the browser's 2px inset border. */
.zb4 .zb4-in {
    box-sizing: border-box;
    height: 20px;
    padding: 1px 2px;
    border: 2px inset #d8b3b3;
    background: #fff;
    font: 9pt var(--gulim);
    color: #000;
    vertical-align: middle;
}

.zb4-in--2 {
    width: 25px;
}

.zb4-in--4 {
    width: 37px;
}

.zb4-in--10 {
    width: 73px;
}

.zb4-in--17 {
    width: 115px;
}

.zb4-in--20 {
    width: 133px;
}

.zb4-in--40 {
    width: 253px;
}

.zb4-in--50 {
    width: 313px;
}

.zb4 textarea {
    padding: 2px;
    border: 1px solid #d8b3b3;
    background: #fff;
    font: 9pt var(--gulim);
    color: #000;
}

.zb4-text {
    box-sizing: border-box;
    width: 322px;
    height: 62px;
    vertical-align: middle;
}

.zb4-rows > .zb4-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.zb4-form__buttons {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin: 0;
    padding: 6px 9px 3px 0;
    border-top: 3px solid #ebd9d9;
}

.zb4-form__buttons img {
    display: block;
}

/* member_modify.php: the same table, labels at 28% in Tahoma 9pt, no blank
   lines under the title, and 회원탈퇴 under the labels at the end. */
.zb4-form--modify .zb4-form__title {
    height: 35px;
}

.zb4-form--modify .zb4-row {
    grid-template-columns: 150px 387px;
}

.zb4-form--modify .zb4-row > :first-child {
    font-size: 9pt;
}

.zb4-form--modify .zb4-rows > .zb4-row:last-child {
    padding-bottom: 1px;
    border-bottom: 1px solid #ebd9d9;
}

.zb4-text--40 {
    width: 262px;
}

.zb4-form__end {
    display: grid;
    grid-template-columns: 150px 387px;
    column-gap: 1px;
    align-items: center;
    justify-items: center;
    height: 30px;
}

.zb4-form__end img {
    display: block;
}

.zb4-form__end .zb4-form__buttons {
    justify-self: stretch;
    align-self: start;
    padding-top: 5px;
    border: 0;
}

/* member_out.php's confirm(), as zb4's box: the question, the password, then
   확인 and 취소. */
.zb4-msg--ask label {
    margin-right: 4px;
}

.zb4-msg--ask .zb4-in {
    border-color: #767676;
}

/* jaemanstyle's login.php in the homepage: a 200px box under three blank
   lines, a 10px bar in the theme colour, ID and PASS on #f9f9f9 with the
   first letter in blue, then 확인 and 취소. */
.zb-login {
    width: 200px;
    margin: 28px auto 0;
}

.zb-login__box {
    display: grid;
    gap: 1px;
    padding: 1px;
    background: #efefef;
}

.zb-login__box::before {
    content: "";
    height: 10px;
    background: var(--theme);
}

.zb-login__row {
    display: grid;
    grid-template-columns: 50px 1fr;
    column-gap: 1px;
    height: 22px;
    margin: 0;
    background: #fff;
}

.zb-login__row label {
    padding-right: 7px;
    background: #f9f9f9;
    box-shadow: 1px 0 #efefef;
    font: 8pt/22px var(--tahoma);
    text-align: right;
}

.zb-login__row label span {
    color: var(--theme);
}

.zb-login__row input {
    align-self: end;
    box-sizing: border-box;
    width: 73px;
    height: 18px;
    margin-left: 4px;
    padding: 1px 2px;
    border: 0;
    background: #fff;
    font: bold 8pt var(--tahoma);
    color: #555;
}

.zb-login__go {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 10px 0 0;
}

.zb-login__go img,
.zb-login__go input[type="image"] {
    display: block;
}

.zb-login__keep {
    margin: 0 4px 0 0;
}

/* zb4's foot(): "Copyright 1999-(this year) Zeroboard / skin by ...". */
.zb-credit--login {
    margin: 15px 0 10px;
    text-align: center;
}

.zb-credit--login small {
    font-size: 7pt;
}

/* lostid.php: the 비밀번호 자동 발급 bar (lo_title, lo_back, lo_right),
   two lines of 굴림 at 160%, 이름 and Email centred, 확인 and 취소. */
/* As wide as its longest line, as the old table was. */
.zb4-lost {
    width: fit-content;
    min-width: 400px;
    margin: 0 auto;
    padding: 5px 0;
}

.zb4-lost__title {
    height: 32px;
    margin: 0;
    background: url(aaa/member/lo_right.gif) no-repeat right top, url(aaa/member/lo_back.gif) repeat-x;
}

.zb4-lost__title img {
    display: block;
}

.zb4-lost__body {
    margin: 0 7px;
    padding: 3px;
    line-height: 160%;
}

.zb4-lost__body p {
    margin: 0;
}

.zb4-lost__fields {
    display: grid;
    grid-template-columns: 94px auto;
    justify-content: center;
    align-items: center;
    gap: 0.2px 3px;
    padding-top: 4px;
    line-height: 20px;
}

.zb4-lost__fields label {
    text-align: right;
    font: 11px/12px var(--dotum);
}

.zb4-lost__fields img {
    display: block;
}

.zb4 .zb4-lost__fields .zb4-in {
    border-color: #767676;
}

.zb4-lost__buttons {
    display: flex;
    justify-content: flex-end;
    gap: 3px;
    margin: 0 10px;
    padding: 3px 0;
}

.zb4-lost__buttons img {
    display: block;
}

/* ------------------------------------------- 옛 홈페이지의 단독 쪽 (src/Legacy) */

/* Pages that stood alone: pop-up windows and pages without the site's
   frame. White, any width, 9pt 굴림 as aaa.css and chat.css set them. */
html.window {
    background: #fff;
}

html.window body {
    width: auto;
    margin: 8px;
}

/* 3rd/aaa_account_list.php: a 780px row of selects (left) and the count
   and page size (right), then a table with 5px cell spacing, a 1px #ebd9d9
   rule above each entry, 수입 in #045b00 and 지출 in #c00. */
.acct {
    width: 780px;
    padding-top: 15px;
    font: 9pt var(--gulim);
    color: var(--text);
}

.acct a:link,
.acct a:visited {
    font: 12px var(--gulim);
    color: var(--link);
}

.acct a:hover {
    color: var(--hover);
}

.acct__sel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 750px;
    margin-left: 30px;
    font: 12px var(--gulim);
}

.acct__picks {
    display: flex;
    gap: 4px;
}

/* The 회기, 구분 and 항목 selects submit themselves (app.js). */
.acct__pick {
    font: 9pt var(--gulim);
    color: var(--text);
}

.acct__count {
    margin: 0;
}

.acct__count input {
    box-sizing: border-box;
    width: 30px;
    height: 20px;
    font: 9pt var(--gulim);
}

.acct__list {
    width: 765px;
    margin: 14px 0 0 15px;
    border-collapse: collapse;
    table-layout: fixed;
    text-align: center;
}

.acct__list th {
    padding: 0 2px 5px;
    font-weight: normal;
}

.acct__list th:nth-child(1) { width: 35px; }
.acct__list th:nth-child(2) { width: 85px; }
.acct__list th:nth-child(3) { width: 55px; }
.acct__list th:nth-child(4) { width: 105px; }
.acct__list th:nth-child(5) { width: 75px; }
.acct__list th:nth-child(7) { width: 55px; }

.acct__list td {
    padding: 5px 2px;
    border-top: 1px solid #ebd9d9;
}

.acct__in td {
    color: #045b00;
}

.acct__out td {
    color: #c00;
}

.acct__list td.acct__price {
    text-align: right;
}

.acct__list .cmt a:link,
.acct__list .cmt a:visited {
    font: 12px var(--gulim);
}

.acct__pages {
    width: 745px;
    margin: 5px 0 0 35px;
    padding-top: 5px;
    border-top: 1px solid #ebd9d9;
    text-align: center;
    font: 7pt var(--tahoma);
    color: #cc0000;
}

.acct .acct__pages a:link,
.acct .acct__pages a:visited {
    font: 7pt var(--tahoma);
}

.acct__sum {
    width: 745px;
    margin: 5px 0 0 35px;
    padding-bottom: 5px;
    border-bottom: 1px solid #ebd9d9;
}

.acct__foot {
    margin: 8px 0 0 36px;
}

/* 3rd/comment/cmt_pop.php with skin_jaeman: Tahoma 9pt, an #ccdded bar
   (a 1px cell padded 5px) over each comment. */
html.cmtpop body {
    font: 9pt/1.4 var(--tahoma);
    color: #555;
}

html.cmtpop a:link,
html.cmtpop a:visited,
html.cmtpop a:hover {
    color: #555;
}

.cmtpop__item::before {
    content: "";
    display: block;
    height: 11px;
    background: var(--line);
}

.cmtpop__who,
.cmtpop__memo,
.cmtpop__time {
    margin: 0;
    padding: 5px;
}

.cmtpop__time {
    font: 8pt var(--tahoma);
    text-align: right;
}

.cmtpop__head {
    display: grid;
    grid-template-columns: 120px 1fr 120px;
    align-items: center;
    margin-bottom: 15px;
}

.cmtpop__head p {
    margin: 0;
}

.cmtpop__pages {
    text-align: center;
    font: 7pt var(--tahoma);
    color: #cc0000;
}

.cmtpop__pages a:link,
.cmtpop__pages a:visited {
    font: 7pt var(--tahoma);
    color: #cc0000;
}

.cmtpop__pages--foot {
    margin-bottom: 15px;
    padding-top: 5px;
    border-top: 1px solid var(--line);
}

/* 3rd/chat/chat.php: "chat room list" over a border=1 table (50, 400 and
   70px), drawn as browsers draw that attribute. */
.chatlist {
    padding-top: 10px;
    font: 9pt var(--gulim);
    color: var(--text);
}

.chatlist__title {
    margin: 0;
    font: inherit;
}

.chatlist__rooms {
    border: 1px outset grey;
    border-spacing: 0;
    text-align: left;
}

.chatlist__rooms th,
.chatlist__rooms td {
    padding: 0;
    border: 1px inset grey;
    font-weight: normal;
}

.chatlist__rooms th:nth-child(1) { width: 50px; }
.chatlist__rooms th:nth-child(2) { width: 400px; }
.chatlist__rooms th:nth-child(3) { width: 70px; }

.chatlist__rooms a:link,
.chatlist__rooms a:visited {
    color: inherit;
}

.chatlist__none {
    text-align: center;
}

/* c_main.php's frames without the input row: what was said beside the
   150px member list, each in a #70c0e1 box (cellspacing and cellpadding 3).
   A <System> line stood alone, centred and red, with a blank line around. */
html.chatwin,
html.chatwin body {
    height: 100%;
}

html.chatwin body {
    margin: 0;
    font: 9pt/1.25 var(--gulim);
    color: #555;
}

.chatwin__frames {
    display: grid;
    grid-template-columns: 1fr 150px;
    height: 100%;
    background: #e8e8e8;
    gap: 6px;
}

.chatwin__disp,
.chatwin__members {
    overflow: auto;
    background: #fff;
}

.chatwin__box {
    box-sizing: border-box;
    min-height: calc(100% - 6px);
    margin: 3px;
    padding: 3px;
    border: 1px solid var(--sky-line);
    overflow-wrap: anywhere;
}

.chatwin__members .chatwin__box {
    min-height: calc(48% - 6px);
}

.chatwin__system {
    margin: 0;
    padding: 1.25em 0;
    text-align: center;
    color: red;
}

/* The chat's text colours, which the room kept per person: <font color>
   in c_disp.php, the web-safe 216 here (templates/legacy/chat_room). */
.c-000000 { color: #000000; } .c-000033 { color: #000033; } .c-000066 { color: #000066; } .c-000099 { color: #000099; } .c-0000cc { color: #0000cc; } .c-0000ff { color: #0000ff; }
.c-003300 { color: #003300; } .c-003333 { color: #003333; } .c-003366 { color: #003366; } .c-003399 { color: #003399; } .c-0033cc { color: #0033cc; } .c-0033ff { color: #0033ff; }
.c-006600 { color: #006600; } .c-006633 { color: #006633; } .c-006666 { color: #006666; } .c-006699 { color: #006699; } .c-0066cc { color: #0066cc; } .c-0066ff { color: #0066ff; }
.c-009900 { color: #009900; } .c-009933 { color: #009933; } .c-009966 { color: #009966; } .c-009999 { color: #009999; } .c-0099cc { color: #0099cc; } .c-0099ff { color: #0099ff; }
.c-00cc00 { color: #00cc00; } .c-00cc33 { color: #00cc33; } .c-00cc66 { color: #00cc66; } .c-00cc99 { color: #00cc99; } .c-00cccc { color: #00cccc; } .c-00ccff { color: #00ccff; }
.c-00ff00 { color: #00ff00; } .c-00ff33 { color: #00ff33; } .c-00ff66 { color: #00ff66; } .c-00ff99 { color: #00ff99; } .c-00ffcc { color: #00ffcc; } .c-00ffff { color: #00ffff; }
.c-330000 { color: #330000; } .c-330033 { color: #330033; } .c-330066 { color: #330066; } .c-330099 { color: #330099; } .c-3300cc { color: #3300cc; } .c-3300ff { color: #3300ff; }
.c-333300 { color: #333300; } .c-333333 { color: #333333; } .c-333366 { color: #333366; } .c-333399 { color: #333399; } .c-3333cc { color: #3333cc; } .c-3333ff { color: #3333ff; }
.c-336600 { color: #336600; } .c-336633 { color: #336633; } .c-336666 { color: #336666; } .c-336699 { color: #336699; } .c-3366cc { color: #3366cc; } .c-3366ff { color: #3366ff; }
.c-339900 { color: #339900; } .c-339933 { color: #339933; } .c-339966 { color: #339966; } .c-339999 { color: #339999; } .c-3399cc { color: #3399cc; } .c-3399ff { color: #3399ff; }
.c-33cc00 { color: #33cc00; } .c-33cc33 { color: #33cc33; } .c-33cc66 { color: #33cc66; } .c-33cc99 { color: #33cc99; } .c-33cccc { color: #33cccc; } .c-33ccff { color: #33ccff; }
.c-33ff00 { color: #33ff00; } .c-33ff33 { color: #33ff33; } .c-33ff66 { color: #33ff66; } .c-33ff99 { color: #33ff99; } .c-33ffcc { color: #33ffcc; } .c-33ffff { color: #33ffff; }
.c-660000 { color: #660000; } .c-660033 { color: #660033; } .c-660066 { color: #660066; } .c-660099 { color: #660099; } .c-6600cc { color: #6600cc; } .c-6600ff { color: #6600ff; }
.c-663300 { color: #663300; } .c-663333 { color: #663333; } .c-663366 { color: #663366; } .c-663399 { color: #663399; } .c-6633cc { color: #6633cc; } .c-6633ff { color: #6633ff; }
.c-666600 { color: #666600; } .c-666633 { color: #666633; } .c-666666 { color: #666666; } .c-666699 { color: #666699; } .c-6666cc { color: #6666cc; } .c-6666ff { color: #6666ff; }
.c-669900 { color: #669900; } .c-669933 { color: #669933; } .c-669966 { color: #669966; } .c-669999 { color: #669999; } .c-6699cc { color: #6699cc; } .c-6699ff { color: #6699ff; }
.c-66cc00 { color: #66cc00; } .c-66cc33 { color: #66cc33; } .c-66cc66 { color: #66cc66; } .c-66cc99 { color: #66cc99; } .c-66cccc { color: #66cccc; } .c-66ccff { color: #66ccff; }
.c-66ff00 { color: #66ff00; } .c-66ff33 { color: #66ff33; } .c-66ff66 { color: #66ff66; } .c-66ff99 { color: #66ff99; } .c-66ffcc { color: #66ffcc; } .c-66ffff { color: #66ffff; }
.c-990000 { color: #990000; } .c-990033 { color: #990033; } .c-990066 { color: #990066; } .c-990099 { color: #990099; } .c-9900cc { color: #9900cc; } .c-9900ff { color: #9900ff; }
.c-993300 { color: #993300; } .c-993333 { color: #993333; } .c-993366 { color: #993366; } .c-993399 { color: #993399; } .c-9933cc { color: #9933cc; } .c-9933ff { color: #9933ff; }
.c-996600 { color: #996600; } .c-996633 { color: #996633; } .c-996666 { color: #996666; } .c-996699 { color: #996699; } .c-9966cc { color: #9966cc; } .c-9966ff { color: #9966ff; }
.c-999900 { color: #999900; } .c-999933 { color: #999933; } .c-999966 { color: #999966; } .c-999999 { color: #999999; } .c-9999cc { color: #9999cc; } .c-9999ff { color: #9999ff; }
.c-99cc00 { color: #99cc00; } .c-99cc33 { color: #99cc33; } .c-99cc66 { color: #99cc66; } .c-99cc99 { color: #99cc99; } .c-99cccc { color: #99cccc; } .c-99ccff { color: #99ccff; }
.c-99ff00 { color: #99ff00; } .c-99ff33 { color: #99ff33; } .c-99ff66 { color: #99ff66; } .c-99ff99 { color: #99ff99; } .c-99ffcc { color: #99ffcc; } .c-99ffff { color: #99ffff; }
.c-cc0000 { color: #cc0000; } .c-cc0033 { color: #cc0033; } .c-cc0066 { color: #cc0066; } .c-cc0099 { color: #cc0099; } .c-cc00cc { color: #cc00cc; } .c-cc00ff { color: #cc00ff; }
.c-cc3300 { color: #cc3300; } .c-cc3333 { color: #cc3333; } .c-cc3366 { color: #cc3366; } .c-cc3399 { color: #cc3399; } .c-cc33cc { color: #cc33cc; } .c-cc33ff { color: #cc33ff; }
.c-cc6600 { color: #cc6600; } .c-cc6633 { color: #cc6633; } .c-cc6666 { color: #cc6666; } .c-cc6699 { color: #cc6699; } .c-cc66cc { color: #cc66cc; } .c-cc66ff { color: #cc66ff; }
.c-cc9900 { color: #cc9900; } .c-cc9933 { color: #cc9933; } .c-cc9966 { color: #cc9966; } .c-cc9999 { color: #cc9999; } .c-cc99cc { color: #cc99cc; } .c-cc99ff { color: #cc99ff; }
.c-cccc00 { color: #cccc00; } .c-cccc33 { color: #cccc33; } .c-cccc66 { color: #cccc66; } .c-cccc99 { color: #cccc99; } .c-cccccc { color: #cccccc; } .c-ccccff { color: #ccccff; }
.c-ccff00 { color: #ccff00; } .c-ccff33 { color: #ccff33; } .c-ccff66 { color: #ccff66; } .c-ccff99 { color: #ccff99; } .c-ccffcc { color: #ccffcc; } .c-ccffff { color: #ccffff; }
.c-ff0000 { color: #ff0000; } .c-ff0033 { color: #ff0033; } .c-ff0066 { color: #ff0066; } .c-ff0099 { color: #ff0099; } .c-ff00cc { color: #ff00cc; } .c-ff00ff { color: #ff00ff; }
.c-ff3300 { color: #ff3300; } .c-ff3333 { color: #ff3333; } .c-ff3366 { color: #ff3366; } .c-ff3399 { color: #ff3399; } .c-ff33cc { color: #ff33cc; } .c-ff33ff { color: #ff33ff; }
.c-ff6600 { color: #ff6600; } .c-ff6633 { color: #ff6633; } .c-ff6666 { color: #ff6666; } .c-ff6699 { color: #ff6699; } .c-ff66cc { color: #ff66cc; } .c-ff66ff { color: #ff66ff; }
.c-ff9900 { color: #ff9900; } .c-ff9933 { color: #ff9933; } .c-ff9966 { color: #ff9966; } .c-ff9999 { color: #ff9999; } .c-ff99cc { color: #ff99cc; } .c-ff99ff { color: #ff99ff; }
.c-ffcc00 { color: #ffcc00; } .c-ffcc33 { color: #ffcc33; } .c-ffcc66 { color: #ffcc66; } .c-ffcc99 { color: #ffcc99; } .c-ffcccc { color: #ffcccc; } .c-ffccff { color: #ffccff; }
.c-ffff00 { color: #ffff00; } .c-ffff33 { color: #ffff33; } .c-ffff66 { color: #ffff66; } .c-ffff99 { color: #ffff99; } .c-ffffcc { color: #ffffcc; } .c-ffffff { color: #ffffff; }

/* c_enter.php: 9pt text, the #0054a6 입장 button (50x20). */
html.chatwin--enter body {
    margin: 8px;
}

.chatwin__enter p {
    margin: 0 0 8px;
}

.chatwin__error {
    color: red;
}

.chatwin__submit {
    width: 50px;
    height: 20px;
    border: 0;
    background: var(--theme);
    font: 9pt var(--gulim);
    color: #fff;
    cursor: pointer;
}

/* 3rd/v2007.php: 굴림 13px #333399 in pink-bordered cells, 180px pictures. */
html.vote body {
    margin: 10px;
    font: 9pt var(--gulim);
    color: #555;
}

.vote__main p {
    margin: 0 0 16px;
}

.vote__table {
    border-spacing: 2px;
}

.vote__table td {
    padding: 1px;
    border: 1px solid pink;
    vertical-align: bottom;
    text-align: center;
    font: 13px var(--gulim);
    color: #339;
}

.vote__gap td {
    height: 48px;
}

/* ------------------------------------------- zb4 member pages (src/Legacy) */

/* 생일 상자 (etc_skin/birthday) and the names under 접속자 목록 (etc_skin/loged):
   18px rows of 12px 굴림. */
.bday {
    font: 12px/18px var(--gulim);
    color: #626262;
}

.bday__title {
    font-weight: normal;
}

.bday ul,
.loged__names {
    margin: 0;
    padding: 0;
    list-style: none;
}

.bday li {
    padding-left: 7px;
}

.bday .is-today {
    color: #3333ff;
}

.loged__names li {
    padding-left: 10px;
}

/* print_loged()'s Cloak / Decloak: centred words that sent the form. */
.loged__cloak {
    margin: 0;
    text-align: center;
}

.loged__cloak button {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
}

/* print_ZBlayer2(): a click on a name opens a white menu with a black rule. */
.zbl {
    position: relative;
    cursor: pointer;
}

.zbl__menu {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 5;
    padding: 1px;
    background: #000;
    white-space: nowrap;
}

.zbl:focus .zbl__menu,
.zbl:focus-within .zbl__menu {
    display: block;
}

/* Escape put it away (app.js nameLayers()) until focus leaves the name. */
.zbl.is-shut .zbl__menu {
    display: none;
}

.zbl__menu a:link,
.zbl__menu a:visited {
    display: block;
    padding: 3px 7px 3px 4px;
    background: #fff;
    font: 9pt/18px var(--gulim);
    color: #000;
}

.zbl__menu a:hover {
    background: #bbbbbb;
}

.zbl__menu img {
    margin-right: 8px;
    vertical-align: middle;
}

/* The boards clip their name cells; an open layer may stick out. */
.zb-list td:has(.zbl:focus-within) {
    overflow: visible;
}

/* The login box: the 쪽지 icon, then the name opening the 쪽지함. */
.login--in .login__name a:link,
.login--in .login__name a:visited {
    font: bold 12px var(--gulim);
    color: #fff;
}

.login--in .login__name a:hover {
    color: #99ffff;
}

.login__memo {
    vertical-align: middle;
}

/* zb4's small windows (head() with board/style.css): white, 9pt 굴림, black links. */
html.zb4p {
    background: #fff;
}

.zb4p body {
    font: 9pt/1.3 var(--gulim);
    color: #000;
}

.zb4p--w400 {
    width: 400px;
}

.zb4p--w450 {
    width: 450px;
}

.zb4p--w650 {
    width: 650px;
}

.zb4p a:link,
.zb4p a:visited {
    color: #000;
}

.zb4p a:hover {
    color: #444444;
    text-decoration: underline;
}

.zb4p .zb-error {
    width: auto;
    max-width: 200px;
}

/* The memo windows' 50px title bar and the 17px frame round a list. */
.zb4m__top {
    display: flex;
    align-items: center;
    height: 50px;
    margin: 0;
    padding: 2px 0 0 15px;
    box-sizing: border-box;
    background: url(zb4/memo_topleft.gif) left top no-repeat, url(zb4/memo_topright.gif) right top no-repeat, #fff url(zb4/memo_topbg.gif) repeat-x;
    font-size: 11pt;
    font-weight: bold;
}

.zb4m__top span::before {
    content: "\00a0";
}

.zb4m__top--info {
    background: url(zb4/memo_topleft.gif) left top no-repeat, url(zb4/vi_topright.gif) right top no-repeat, #fff url(zb4/memo_topbg.gif) repeat-x;
}

.zb4m__bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
}

.zb4m__bar p {
    margin: 0;
}

.zb4m__tabs {
    padding-left: 12px;
}

.zb4m__tabs img {
    vertical-align: middle;
}

.zb4m__count {
    padding: 5px 24px 0 0;
    color: #666666;
}

.zb4m__box {
    padding: 17px;
    background:
        url(zb4/memo_listtopleft.gif) left top no-repeat,
        url(zb4/memo_listtopright.gif) right top no-repeat,
        url(zb4/memo_listbottomleft.gif) left bottom no-repeat,
        url(zb4/memo_listbottomright.gif) right bottom no-repeat,
        url(zb4/memo_listtop.gif) left top repeat-x,
        url(zb4/memo_listbottom.gif) left bottom repeat-x,
        url(zb4/memo_listleftbg.gif) left top repeat-y,
        url(zb4/memo_listrightbg.gif) right top repeat-y,
        #fff;
}

.zb4m__box img {
    vertical-align: middle;
}

.zb4m__view {
    margin: 0;
}

.zb4m__view div {
    display: grid;
    grid-template-columns: 50px 1fr;
}

.zb4m__view div + div {
    border-top: 1px solid #ebd9d9;
}

.zb4m__view dt,
.zb4m__view dd {
    margin: 0;
    padding: 6px 3px 3px;
}

.zb4m__view dt {
    text-align: right;
}

.zb4m__view small {
    font-size: 8pt;
}

.zb4m__memo {
    overflow-wrap: anywhere;
}

.zb4m__list {
    width: 100%;
    border-collapse: collapse;
}

.zb4m__list th {
    font-weight: normal;
}

.zb4m__list tbody tr {
    height: 23px;
    border-top: 1px solid #ebd9d9;
}

.zb4m__list tbody tr:hover {
    background: #fff5f5;
}

.zb4m__list td {
    padding: 3px 0 0;
}

.zb4m__read {
    width: 20px;
    padding-left: 20px !important;
    text-align: center;
}

.zb4m__subject {
    text-align: left;
    overflow-wrap: anywhere;
}

.zb4m__who {
    width: 80px;
    text-align: center;
}

.zb4m__who small {
    font-size: 8pt;
    color: #999999;
}

.zb4m__date {
    width: 60px;
    text-align: center;
    font: 8pt var(--tahoma);
}

.zb4m__pages {
    margin: 0;
    padding: 5px 5px 5px 17px;
    font: 7pt var(--tahoma);
    color: #cc0000;
}

/* view_info2.php: an image label right of a quarter, the value left of it. */
.zb4i {
    margin: 0;
}

.zb4i div {
    display: grid;
    grid-template-columns: 25% 1fr;
    align-items: start;
}

.zb4i div + div {
    border-top: 1px solid #ebd9d9;
}

.zb4i dt,
.zb4i dd {
    margin: 0;
    padding-top: 3px;
}

.zb4i dt {
    padding-right: 6px;
    text-align: right;
}

.zb4i dd {
    overflow-wrap: anywhere;
}

.zb4i__photo dd img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* 3rd/member_list.php: 798px, the memo frame round a 764px table. */
.zb4l {
    color: #555555;
}

.zb4l a:link,
.zb4l a:visited {
    font: 12px var(--gulim);
    color: #2f57a7;
}

.zb4l a:hover {
    color: #ff3399;
}

.zb4l__head {
    display: grid;
    grid-template-columns: 20% 55% 25%;
    align-items: center;
    padding: 5px 0;
    color: #666666;
}

.zb4l__head h1 {
    grid-column: 2;
    margin: 0;
    font-size: 13.5pt;
    text-align: center;
}

.zb4l__head p {
    margin: 0;
    padding-right: 18px;
    text-align: right;
}

.zb4l__list {
    width: 764px;
    border-collapse: collapse;
    font: 9pt var(--tahoma);
    text-align: center;
}

.zb4l__list th {
    height: 15px;
    font-weight: normal;
}

.zb4l__list tbody tr {
    height: 23px;
    border-top: 1px solid #ebd9d9;
}

.zb4l__list tbody tr:hover {
    background: #fff5f5;
}

.zb4l__list td {
    padding: 0;
}

.zb4l__list input {
    margin: 0;
}

.zb4l__list img {
    vertical-align: middle;
}

.zb4l__c {
    color: #2f57a7;
}

.zb4l__name {
    font-family: var(--gulim);
}

.zb4l__w20 { width: 20px; }
.zb4l__w30 { width: 30px; }
.zb4l__w42 { width: 42px; }
.zb4l__w60 { width: 60px; }
.zb4l__w75 { width: 75px; }
.zb4l__w76 { width: 76px; }
.zb4l__w80 { width: 80px; }
.zb4l__w100 { width: 100px; }
.zb4l__w110 { width: 110px; }
.zb4l__w114 { width: 114px; }
.zb4l__w128 { width: 128px; }
.zb4l__w154 { width: 154px; }
.zb4l__w166 { width: 166px; }

.zb4l__tools {
    display: flex;
    align-items: center;
    height: 30px;
    padding-left: 10px;
    border-top: 1px solid #ebd9d9;
}

.zb4l__tools button {
    margin-right: 10px;
    padding: 0;
    border: 0;
    background: none;
    font: 12px var(--gulim);
    color: #2f57a7;
    cursor: pointer;
}

.zb4l__tools button:hover {
    color: #ff3399;
}

.zb4l__search {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 3px;
    margin: 0;
}

.zb4l__search select,
.zb4l__keyword {
    height: 20px;
    font-size: 9pt;
}

.zb4l__keyword {
    width: 100px;
}

.zb4l__size {
    margin-left: auto;
    font: bold 8pt var(--tahoma);
}

.zb4l__size input {
    width: 30px;
}

.zb4l__pages a:link,
.zb4l__pages a:visited {
    font: 7pt var(--tahoma);
}

/* 3rd/etc/point_rec.php: border=1 tables. */
.zb4r {
    font: 9pt var(--gulim);
    color: #000;
}

.zb4r p {
    margin: 0;
}

.zb4r h2 {
    margin: 2.6em 0 0;
    font-weight: normal;
}

.zb4r__by {
    color: blue;
}

.zb4r__table {
    border: 1px outset #808080;
    border-spacing: 2px;
    text-align: center;
}

.zb4r__table th,
.zb4r__table td {
    padding: 1px;
    border: 1px inset #808080;
    font-weight: normal;
}

.zb4r__n {
    width: 40px;
}

.zb4r__name {
    width: 80px;
}

.zb4r__num {
    width: 70px;
}

.zb4r__time {
    width: 140px;
}

.zb4r__point {
    width: 90px;
}

/* 3rd/etc/statis.php in its window. */
.zb4s {
    padding: 5px;
}

.zb4s p {
    margin: 0 0 1.2em;
}

.zb4s__alert {
    color: #cc0000;
}

/* statis.php read 3rd's html_head.php, not board/style.css: blue links. */
.zb4s a:link,
.zb4s a:visited {
    color: var(--link);
}

.zb4s__table {
    width: 600px;
    border: 1px outset #808080;
    border-spacing: 2px;
}

.zb4s__table td {
    padding: 1px;
    border: 1px inset #808080;
}

.zb4s__label {
    width: 80px;
}

.zb4s__bar {
    width: 400px;
}

.zb4s__count {
    width: 130px;
}

.zb4s__fill {
    display: block;
    fill: blue;
}

/* board/log.php: plain 10pt 굴림 lines. */
html.zb4log {
    background: #fff;
}

.zb4log body {
    width: auto;
    padding: 8px;
    font: 10pt var(--gulim);
    color: #000;
}

.zb4log p {
    margin: 0 0 1.2em;
}

.zb4log__b {
    color: blue;
}

.zb4log__red,
.zb4log__url--red {
    color: red;
}

.zb4log__url--bbbbbb {
    color: #bbbbbb;
}

.zb4log__url--green {
    color: green;
}

.zb4log__url--orange {
    color: orange;
}

.zb4log__white {
    color: #fff;
}

/* ------------------------------------------------ 잡동사니 (3rd/etc) */

/* The menu's tools: windows and frames of their own, white, aaa.css's 9pt
   굴림 in #555555 for text, fields and buttons alike. */
html.etc {
    background: #fff;
}

html.etc body {
    width: auto;
    margin: 5px;
}

.etc input,
.etc textarea,
.etc select,
.etc button {
    font: 9pt var(--gulim);
    color: var(--text);
}

.etc p {
    margin: 0;
}

/* kor_disp.php: two 400px cells framed in #0054a6 over two 350px text
   boxes, the two buttons under the left one. */
.kor {
    display: grid;
    grid-template-columns: 403px 403px;
    gap: 4px 2px;
    margin: 2px;
}

.kor__head {
    height: 16px;
    border: 1px solid #0054a6;
    line-height: 16px;
    text-align: center;
}

.kor textarea {
    box-sizing: border-box;
    width: 100%;
    height: 356px;
    margin: 0;
    resize: none;
}

.kor__buttons {
    text-align: center;
}

.kor__buttons input {
    width: 280px;
}

/* kor_input.php */
.kor-in__go {
    width: 60px;
    height: 20px;
    padding: 0;
    border: 0;
    background: #0054a6;
    color: #fff !important;
}

/* calendar.php: 30px columns ruled in pink, Tahoma 14px, Sunday and days
   off red, Saturday blue (IE coloured the columns from their <col>), today
   on #fcd9ef; the year and month boxes in 12px 굴림. */
html.ecal body,
html.calc body {
    margin: 10px;
}

.ecal__top,
.calc__top {
    margin: 3px 10px 10px;
    font: 17px var(--dotum);
    color: var(--text);
}

.ecal__top img,
.calc__top img {
    display: block;
}

.ecal__grid {
    border-collapse: separate;
    border-spacing: 0;
}

.ecal__grid td,
.ecal__grid th {
    box-sizing: border-box;
    width: 30px;
    padding: 3px;
    border: 1px solid pink;
    font: 14px var(--tahoma);
    font-weight: normal;
    color: var(--text);
    text-align: center;
}

.ecal__grid tbody td:first-child,
.ecal__week th:first-child,
.ecal__grid .is-rest {
    color: red;
}

.ecal__grid tbody td:last-child,
.ecal__week th:last-child {
    color: blue;
}

.ecal__grid tbody .is-rest:last-child {
    color: red;
}

.ecal__grid .ecal__title {
    height: 30px;
    font-size: 17px;
    color: var(--text);
}

.ecal__title img {
    vertical-align: middle;
}

.ecal__day {
    cursor: pointer;
}

.ecal__day.is-today {
    background: #fcd9ef;
}

.ecal__in {
    box-sizing: border-box;
    width: 20px;
    height: 16px;
    margin: 0;
    padding: 0;
    border: 1px solid #c3cacd;
    font: 12px var(--gulim) !important;
    color: #000 !important;
    text-align: center;
}

.ecal__in--year {
    width: 30px;
}

.ecal__pop {
    position: absolute;
    z-index: 1;
    box-sizing: border-box;
    width: 120px;
    height: 25px;
    border: 1px solid #0054a6;
    background: #fff;
    font: 12px/23px var(--gulim);
    color: #000;
    text-align: center;
}

.ecal__pop[hidden] {
    display: none;
}

/* date_cont.php: underlined boxes, cyan 계산 buttons, answers on a
   120px underline. */
.calc,
.calc__note {
    font: 12px/20px var(--gulim);
    color: var(--text);
}

.etc .calc__note {
    margin-bottom: 12px;
}

.calc__in {
    box-sizing: border-box;
    width: 18px;
    height: 16px;
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid #c3cacd;
    font: 12px var(--gulim) !important;
    color: #000 !important;
    text-align: center;
}

.calc__in[name^="y"] {
    width: 30px;
}

.calc__in[name="p2"] {
    width: 44px;
}

.calc__go {
    width: 30px;
    height: 16px;
    padding: 0;
    border: 0;
    background: #33ccff;
    color: #fff !important;
    font-size: 12px !important;
    line-height: 16px;
}

.calc__res {
    display: inline-block;
    width: 120px;
    min-height: 15px;
    border-bottom: 1px solid #c3cacd;
    font: 12px var(--gulim);
    color: #000;
    text-align: center;
    vertical-align: bottom;
}

/* get_color.php had no stylesheet: the browser's 16px 굴림 in black, an
   invisible 200x20 dialog object before 색상 선택, 80x20 swatches (the
   typed colour's starts black). */
html.gc body {
    margin: 8px;
    font: 16px var(--gulim);
    color: #000;
}

.gc input,
.gc button {
    color: #000;
}

.gc__dialog {
    position: relative;
    display: inline-block;
    width: 200px;
    height: 20px;
    vertical-align: bottom;
}

.gc__dialog input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.gc__swatch {
    display: inline-block;
    width: 80px;
    height: 20px;
    vertical-align: bottom;
}

#colfield {
    background: #000;
}

/* tb_menu.php: the empty first row where the login forms were, then a
   960px row (30px, 730px centred, 200px), and the 정회원's centred row. */
html.tb body {
    margin: 0;
}

.tb__logins {
    height: 25px;
}

.tb__row {
    display: grid;
    grid-template-columns: 730px 200px;
    align-items: center;
    width: 930px;
    margin: 0 auto;
    padding: 1px 0 1px 30px;
}

.tb__sites {
    text-align: center;
}

.tb__sites img {
    vertical-align: middle;
}

.tb select {
    color: var(--text);
}

.tb__mine {
    width: 960px;
    margin: 0 auto !important;
    text-align: center;
}

.tb a:link,
.tb a:visited {
    font: 12px var(--gulim);
}

/* The old framesets (tb_main.php, etc_kor_main.php, date_main.php) as
   iframes in the frames' places: the whole window, nothing scrolling but
   the frames themselves. */
html.fset,
html.fset body {
    height: 100%;
    background: #fff;
}

html.fset body {
    display: grid;
    width: auto;
    margin: 0;
    overflow: hidden;
}

.fset iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* rows="*,75" (60 below 정회원) border="1" bordercolor="white" */
html.fset--tb60 body {
    grid-template-rows: minmax(0, 1fr) 60px;
    row-gap: 1px;
}

html.fset--tb75 body {
    grid-template-rows: minmax(0, 1fr) 75px;
    row-gap: 1px;
}

/* cols="300,*" border="1" bordercolor="white" */
html.fset--date body {
    grid-template-columns: 300px minmax(0, 1fr);
    column-gap: 1px;
}

/* rows="450,*" with the browser's own 6px frame border. */
html.fset--kor body {
    grid-template-rows: 450px minmax(0, 1fr);
    row-gap: 6px;
    background: linear-gradient(#fff 450px, #aaa 450px 451px, #d0d0d0 451px 455px, #000 455px 456px, #fff 456px);
}

/* ---------------------------------------------- head.js (app.js) */

/* mm_in(): a 400px white box framed in #0054a6 under the pointer, the text
   in .aaa's 12px 굴림 (cellpadding and cellspacing 3). */
.mm-layer {
    position: absolute;
    z-index: 10;
    box-sizing: border-box;
    width: 400px;
    padding: 6px;
    border: 1px solid #0054a6;
    background: #fff;
    font: 12px/1.3 var(--gulim);
    color: var(--text);
    text-align: left;
    white-space: pre-line;
}

.mm-layer[hidden] {
    display: none;
}

/* head.php's special row (pmode s) under the 전광판: Tahoma 12px. */
.special {
    margin: 0;
    padding: 5px 0;
    font: 12px var(--tahoma);
    color: var(--text);
}

/* pmode i: the bottom pictures keep to the bottom of the window. */
.horizon--float {
    position: sticky;
    bottom: 0;
    left: 0;
    z-index: 1;
}

/* comment_pop.php and cmt_pop.php end with "Alt+C를 누르면 창을 닫습니다."
   on the left and the 본문보기 and 창닫기 pictures on the right. */
.cmtpop__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
}

.cmtpop__foot[hidden] {
    display: none;
}

.cmtpop__foot p {
    margin: 0;
}

.cmtpop__buttons {
    margin-left: auto !important;
}

.cmtpop__buttons img {
    vertical-align: middle;
}

/* jaemanstyle's list: the disk after a title. */
.zb-disk {
    vertical-align: middle;
}

/* member_memo.php's and view_info2.php's Close, bottom right. */
.zb4m__close,
.zb4i__close {
    margin: 5px 0;
    text-align: right;
}

.zb4m__close img,
.zb4i__close img {
    display: inline-block;
}

/* copy_id(): an MSN or NateON address copied on a click (app.js). */
.is-copy {
    cursor: pointer;
}

span.is-copy:hover {
    text-decoration: underline;
}

/* member_join.php's Check ID button. */
.zb4-check-id {
    height: 20px;
    border: 1px solid #dfb8b8;
    background: #f0f0f0;
    font: 8pt var(--tahoma);
    color: #000;
}

/* check_user_id.php: the answer and Close window in the middle of the
   200x100 window. */
.zb4-check {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 16px);
    text-align: center;
}

.zb4-check p {
    margin: 4px 0;
}

/* picopen.php and view_img.php: the picture alone at the window's corner;
   picopen's 원본 크기 / 창크기에 맞춰서 picture kept at 10, 10. */
html.picwin {
    background: #fff;
}

html.picwin.is-noscroll {
    overflow: hidden;
}

html.picwin body {
    width: auto;
    margin: 0;
}

.picwin__img {
    display: block;
    cursor: pointer;
}

.picwin__floater {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1;
    margin: 0;
}

.picwin__floater[hidden] {
    display: none;
}

.picwin__floater img {
    display: block;
}

/* zb4 and the gallery made a post's pictures open those windows (app.js). */
[data-picopen] img,
[data-view-img] img.is-shrunk {
    cursor: pointer;
}