/* ==========================================================================
   MyForum — Windows 3.1 Theme
   --------------------------------------------------------------------------
   단일 소스. 모든 페이지가 이 테마를 공유.
   색·테두리·그림자·타이포그래피를 CSS 변수로 노출해서
   페이지별 디자인이 아니고 "테마 스위치"로 일관성 유지.
   ========================================================================== */

:root {
    /* 윈도우 3.1 표준 회색조 팔레트 */
    --win31-bg-base:      #c0c0c0;   /* 기본 회색 */
    --win31-bg-light:     #dcdcdc;   /* 밝은 회색 (체크보드) */
    --win31-bg-dark:      #808080;   /* 어두운 회색 */
    --win31-bg-white:     #ffffff;
    --win31-bg-black:     #000000;

    /* 타이틀바 그라데이션 (파랑) */
    --win31-titlebar-1:   #000080;
    --win31-titlebar-2:   #1084d0;

    /* 액센트 */
    --win31-accent-blue:  #000080;
    --win31-accent-cyan:  #00ffff;
    --win31-accent-red:   #ff0000;
    --win31-accent-yellow:#ffff00;

    /* 텍스트 */
    --win31-text:         #000000;
    --win31-text-muted:   #404040;
    --win31-text-invert:  #ffffff;

    /* 테두리 (raised 3D 효과) */
    --win31-border-raised-light:  #ffffff;
    --win31-border-raised-dark:   #808080;
    --win31-border-raised-width:  2px;
    --win31-border-raised-style:  solid;

    /* 테두리 (sunken/inset) */
    --win31-border-sunken-light:  #808080;
    --win31-border-sunken-dark:   #ffffff;

    /* 그림자/입체감 */
    --win31-shadow:       none;       /* 3.1은 그림자 없음, flat */
    --win31-radius:       0;          /* 3.1은 각짐 */

    /* 타이포그래피 */
    --win31-font-stack:   "MS Sans Serif", "Microsoft Sans Serif", Tahoma, Geneva, sans-serif;
    --win31-font-mono:    "Courier New", Courier, monospace;
    --win31-font-size-base: 15px;   /* 12px × 1.25 */
    --win31-font-size-sm:   14px;   /* 11px × 1.25 */
    --win31-font-size-lg:   18px;   /* 14px × 1.25 */
    --win31-font-size-xl:   23px;   /* 18px × 1.25 */
    --win31-font-weight-bold: 700;

    /* 간격 (8의 배수 권장) */
    --win31-space-1: 6px;
    --win31-space-2: 12px;
    --win31-space-3: 18px;
    --win31-space-4: 24px;
    --win31-space-6: 32px;
    --win31-space-8: 48px;
}

/* ==========================================================================
   Base
   ========================================================================== */
* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--win31-font-stack);
    font-size: var(--win31-font-size-base);
    color: var(--win31-text);
    background-color: var(--win31-bg-base);
    background-image: linear-gradient(45deg,
        var(--win31-bg-base) 25%,
        var(--win31-bg-light) 25%,
        var(--win31-bg-light) 50%,
        var(--win31-bg-base) 50%,
        var(--win31-bg-base) 75%,
        var(--win31-bg-light) 75%);
    background-size: 8px 8px;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--win31-font-stack);
    font-weight: var(--win31-font-weight-bold);
    margin: var(--win31-space-3) 0;
    color: var(--win31-text);
}

a {
    color: var(--win31-accent-blue);
    text-decoration: underline;
}
a:hover { color: var(--win31-accent-red); }

/* ==========================================================================
   윈도우 컨테이너 (3D raised 테두리)
   ========================================================================== */
.win31-window {
    background-color: var(--win31-bg-base);
    border: var(--win31-border-raised-width) var(--win31-border-raised-style);
    border-color: var(--win31-border-raised-light) var(--win31-border-raised-dark)
                  var(--win31-border-raised-dark) var(--win31-border-raised-light);
    box-shadow: var(--win31-shadow);
    border-radius: var(--win31-radius);
}

.win31-window-sunken {
    background-color: var(--win31-bg-base);
    border: var(--win31-border-raised-width) var(--win31-border-raised-style);
    border-color: var(--win31-border-sunken-light) var(--win31-border-sunken-dark)
                  var(--win31-border-sunken-dark) var(--win31-border-sunken-light);
    border-radius: var(--win31-radius);
}

/* ==========================================================================
   타이틀바 (파란 그라데이션 + 흰색 bold)
   ========================================================================== */
.win31-titlebar {
    background: linear-gradient(90deg,
        var(--win31-titlebar-1) 0%,
        var(--win31-titlebar-2) 50%,
        var(--win31-titlebar-1) 100%);
    color: var(--win31-text-invert);
    padding: var(--win31-space-1) var(--win31-space-2);
    font-weight: var(--win31-font-weight-bold);
    font-size: var(--win31-font-size-base);
    display: flex;
    align-items: center;
    gap: var(--win31-space-2);
    justify-content: flex-start;
}

.win31-titlebar a {
    color: var(--win31-text-invert);
    text-decoration: none;
}
.win31-titlebar a:hover {
    color: var(--win31-accent-yellow);
    text-decoration: none;
}
.win31-titlebar-back {
    display: inline-block;
    margin-right: var(--win31-space-2);
    font-size: 1.1em;
    line-height: 1;
}
.win31-titlebar-back:hover {
    color: var(--win31-accent-yellow);
}
.win31-titlebar-text {
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================================================
   버튼 (raised 3D)
   ========================================================================== */
.win31-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    text-align: center;
    line-height: normal;
    height: 28px;
    background-color: var(--win31-bg-base);
    border: var(--win31-border-raised-width) var(--win31-border-raised-style);
    border-color: var(--win31-border-raised-light) var(--win31-border-raised-dark)
                  var(--win31-border-raised-dark) var(--win31-border-raised-light);
    color: var(--win31-text);
    padding: var(--win31-space-1) var(--win31-space-3);
    font-family: var(--win31-font-stack);
    font-size: var(--win31-font-size-base);
    cursor: pointer;
    min-width: 75px;
    user-select: none;
}
.win31-btn:hover { background-color: var(--win31-bg-light); }
.win31-btn:active {
    border-color: var(--win31-border-sunken-light) var(--win31-border-sunken-dark)
                  var(--win31-border-sunken-dark) var(--win31-border-sunken-light);
    padding: calc(var(--win31-space-1) + 1px) calc(var(--win31-space-3) + 1px)
             var(--win31-space-1) var(--win31-space-3);
}
.win31-btn:disabled { color: var(--win31-bg-dark); cursor: not-allowed; }
.win31-btn-danger {
    background-color: #c0c0c0;
    color: #800000;
    font-weight: bold;
}
.win31-btn-danger:hover { background-color: #d8d8d8; color: #a00000; }

.win31-btn-primary {
    font-weight: var(--win31-font-weight-bold);
}

/* ==========================================================================
   입력 (sunken 3D)
   ========================================================================== */
.win31-input,
.win31-textarea,
.win31-select {
    background-color: var(--win31-bg-white);
    border: var(--win31-border-raised-width) var(--win31-border-raised-style);
    border-color: var(--win31-border-sunken-light) var(--win31-border-sunken-dark)
                  var(--win31-border-sunken-dark) var(--win31-border-sunken-light);
    color: var(--win31-text);
    padding: var(--win31-space-1) var(--win31-space-2);
    font-family: var(--win31-font-stack);
    font-size: var(--win31-font-size-base);
    width: 100%;
    box-sizing: border-box;
}
.win31-textarea { min-height: 120px; resize: vertical; }
.win31-input-sm { width: auto; min-width: 130px; }

.win31-input:focus,
.win31-textarea:focus,
.win31-select:focus { outline: 1px dotted var(--win31-text); outline-offset: -4px; }

.win31-label {
    display: block;
    font-size: var(--win31-font-size-base);
    margin-bottom: var(--win31-space-1);
    color: var(--win31-text);
}

/* ==========================================================================
   패널 / 카드
   ========================================================================== */
.win31-panel {
    background-color: var(--win31-bg-base);
    border: var(--win31-border-raised-width) var(--win31-border-raised-style);
    border-color: var(--win31-border-raised-light) var(--win31-border-raised-dark)
                  var(--win31-border-raised-dark) var(--win31-border-raised-light);
    padding: var(--win31-space-3);
}

/* 같은 윈도우 안 panel 사이 간격 */
.win31-panel + .win31-panel {
    margin-top: var(--win31-space-3);
}

/* 윈도우(스택의 단위)끼리는 좁은 간격 */
.win31-window + .win31-window {
    margin-top: var(--win31-space-3);
}

.win31-panel-title {
    font-weight: var(--win31-font-weight-bold);
    font-size: var(--win31-font-size-lg);
    margin-bottom: var(--win31-space-2);
}

/* ==========================================================================
   테이블
   ========================================================================== */
.win31-table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--win31-bg-white);
    font-size: var(--win31-font-size-base);
}
.win31-table th,
.win31-table td {
    border: 1px solid var(--win31-bg-dark);
    padding: var(--win31-space-1) var(--win31-space-2);
    text-align: left;
}
.win31-table th {
    background-color: var(--win31-bg-base);
    font-weight: var(--win31-font-weight-bold);
}
.win31-table tr:nth-child(even) td { background-color: var(--win31-bg-light); }
.win31-table tr.win31-clickable-row { cursor: pointer; }
.win31-table tr.win31-clickable-row:hover td { background-color: var(--win31-accent); }

/* ==========================================================================
   알림
   ========================================================================== */
.win31-alert {
    background-color: var(--win31-bg-white);
    border: var(--win31-border-raised-width) var(--win31-border-raised-style);
    border-color: var(--win31-border-sunken-light) var(--win31-border-sunken-dark)
                  var(--win31-border-sunken-dark) var(--win31-border-sunken-light);
    padding: var(--win31-space-2) var(--win31-space-3);
    margin-bottom: var(--win31-space-3);
    font-size: var(--win31-font-size-sm);
}
.win31-alert-error {
    color: var(--win31-accent-red);
    font-weight: var(--win31-font-weight-bold);
}
.win31-alert-success {
    color: var(--win31-text);
    background-color: var(--win31-bg-light);
}

/* ==========================================================================
   레이아웃
   ========================================================================== */
.win31-container {
    width: 90%;
    max-width: 1600px;
    margin: 0 auto;
    padding: var(--win31-space-4);
}

.win31-main { margin: var(--win31-space-4) 0; }

.win31-stack > * + * { margin-top: var(--win31-space-3); }

.win31-row {
    display: flex;
    gap: var(--win31-space-2);
    align-items: center;
}

.win31-helper {
    color: var(--win31-text-muted);
    font-size: var(--win31-font-size-sm);
    margin-top: var(--win31-space-1);
}

.win31-footer {
    text-align: center;
    padding: var(--win31-space-4);
    font-size: var(--win31-font-size-sm);
    color: var(--win31-text);
}

/* ==========================================================================
   메뉴바 (옵션, 필요 시 사용)
   ========================================================================== */
.win31-menubar {
    background-color: var(--win31-bg-base);
    border-bottom: 1px solid var(--win31-bg-dark);
    padding: 2px 4px;
    font-size: var(--win31-font-size-base);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--win31-space-2);
}
.win31-menubar-left,
.win31-menubar-right {
    display: flex;
    align-items: center;
    gap: var(--win31-space-1);
}
.win31-menubar-right {
    margin-left: auto;
}
.win31-menubar-user {
    color: var(--win31-text-muted);
    font-weight: var(--win31-font-weight-bold);
    padding: 2px 8px;
}
.win31-menubar a {
    color: var(--win31-text);
    text-decoration: none;
    padding: 2px 8px;
    display: inline-block;
}
.win31-menubar a:hover {
    background-color: var(--win31-accent-blue);
    color: var(--win31-text-invert);
}

/* ==========================================================================
   상태바
   ========================================================================== */
.win31-statusbar {
    background-color: var(--win31-bg-base);
    border-top: 1px solid var(--win31-bg-dark);
    padding: 2px 6px;
    font-size: var(--win31-font-size-sm);
    display: flex;
    gap: var(--win31-space-2);
}
.win31-statusbar .field {
    border: 1px solid var(--win31-bg-dark);
    padding: 1px 6px;
    background-color: var(--win31-bg-base);
}

/* ==========================================================================
   유틸리티
   ========================================================================== */
.win31-text-muted   { color: var(--win31-text-muted); }
.win31-text-center  { text-align: center; }
.win31-text-right   { text-align: right; }
.win31-text-bold    { font-weight: var(--win31-font-weight-bold); }
.win31-text-sm      { font-size: var(--win31-font-size-sm); }
.win31-mt-2         { margin-top: var(--win31-space-2); }
.win31-mt-3         { margin-top: var(--win31-space-3); }
.win31-mt-4         { margin-top: var(--win31-space-4); }
.win31-mb-2         { margin-bottom: var(--win31-space-2); }
.win31-mb-3         { margin-bottom: var(--win31-space-3); }
.win31-mb-4         { margin-bottom: var(--win31-space-4); }
.win31-m-0          { margin: 0; }
.win31-p-2          { padding: var(--win31-space-2); }
.win31-p-3          { padding: var(--win31-space-3); }
.win31-flex         { display: flex; }
.win31-flex-1       { flex: 1; }
.win31-justify-between { justify-content: space-between; }
.win31-gap-2        { gap: var(--win31-space-2); }
.win31-gap-3        { gap: var(--win31-space-3); }
.win31-gap-4        { gap: var(--win31-space-4); }
.win31-items-center { align-items: center; }
.win31-hr {
    border: 0;
    border-top: 1px solid var(--win31-bg-dark);
    margin: var(--win31-space-3) 0;
}
.win31-pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: var(--win31-font-stack);
    font-size: var(--win31-font-size-base);
    line-height: 1.7;
    color: var(--win31-text);
    background-color: var(--win31-bg-white);
    margin: 0;
    padding: var(--win31-space-4);
}
.win31-narrow {
    width: 90%;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}
.win31-nav-container {
    padding-top: var(--win31-space-4);
    padding-bottom: 0;
}
.win31-comment {
    background-color: var(--win31-bg-base);
    border: var(--win31-border-raised-width) var(--win31-border-raised-style);
    border-color: var(--win31-border-sunken-light) var(--win31-border-sunken-dark)
                  var(--win31-border-sunken-dark) var(--win31-border-sunken-light);
    padding: var(--win31-space-3) var(--win31-space-4);
    margin-bottom: var(--win31-space-3);
    line-height: 1.6;
}
.win31-comment-reply {
    margin-left: var(--win31-space-6);
    background-color: var(--win31-bg-light, #f0f0f0);
}
.win31-comment-children {
    margin-top: var(--win31-space-2);
}
.win31-reply-form {
    background-color: var(--win31-bg-light, #f0f0f0);
    padding: var(--win31-space-3);
    margin-top: var(--win31-space-2);
    border: 1px dashed var(--win31-bg-dark, #808080);
}
.win31-btn-sm {
    padding: 2px 8px;
    font-size: 0.85em;
}
.win31-tabs {
    display: flex;
    gap: var(--win31-space-4);
    border-bottom: 1px solid var(--win31-bg-dark);
    padding-bottom: var(--win31-space-1);
    margin-bottom: var(--win31-space-3);
}
.win31-tab {
    color: var(--win31-text-muted);
    text-decoration: none;
    padding: 2px 4px;
}
.win31-tab.is-active {
    color: var(--win31-text);
    font-weight: var(--win31-font-weight-bold);
}
.win31-tab:hover { color: var(--win31-accent-red); }
.win31-code {
    font-family: var(--win31-font-mono);
    font-size: var(--win31-font-size-sm);
    background-color: var(--win31-bg-white);
    color: var(--win31-text);
    padding: 1px 4px;
}