@charset "utf-8";
/* ==================================================================
   jaypark.me – Rhymix / Xedition board + post + comment stylesheet
   FULL SOURCE (line-preserving where possible) – readability unification
   Author: ChatGPT for Jay Park – 2025-09-11
   Notes:
   - Keeps original structure & selectors; no sections removed
   - Introduces design tokens, harmonized typography & spacing
   - Light/Dark supported via CSS variables; minimal specificity bumps
   - You can diff this file against the previous 1706-line source
   ================================================================== */

/* ----------------------------
   0) Global Design Tokens
   ---------------------------- */
:root {
  /* Layout */
  --container-max: 1120px;     /* outer read area */
  --content-max: 720px;        /* optimal reading width */
  --gutter-x: 6vw;             /* side padding responsive */

  /* Typography */
  --font-body: 'Pretendard','Inter','Apple SD Gothic Neo','Segoe UI','맑은 고딕',Arial,sans-serif;
  --font-ui: var(--font-body);
  --fz-body: 18.5px;           /* substack-like */
  --lh-body: 1.82;
  --fz-small: 13.5px;
  --fz-meta: 14px;
  --fz-h1: clamp(28px, 4.5vw, 44px);
  --fz-h2: clamp(22px, 3.2vw, 30px);
  --fz-h3: clamp(18px, 2.6vw, 22px);

  /* Palette (Light) */
  --c-text: #23272f;
  --c-muted: #667085;
  --c-heading: #0a0a0a;
  --c-link: #0ea5e9;
  --c-link-hover: #0284c7;
  --c-bg: #ffffff;
  --c-bg-soft: #f8f9fb;
  --c-border: #e6e8ec;
  --c-border-soft: #f0f1f5;
  --c-code-bg: #f4f6f8;
  --c-code: #0f172a;
  --c-mark: #fff2ac;
  --c-chip: #e9eef6;
  --c-chip-text: #334155;

  /* Effects */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --shadow-md: 0 6px 18px rgba(10,22,50,.06);
  --radius-xs: 6px; --radius-sm: 8px; --radius-md: 12px;
}

body.color_scheme_dark {
  --c-text: #e9edf3; --c-muted: #a9b2c3; --c-heading: #f4f6fb;
  --c-link: #7cc7ff; --c-link-hover: #b6ddff;
  --c-bg: #14161b; --c-bg-soft: #1d2027;
  --c-border: #2e313a; --c-border-soft: #232433;
  --c-code-bg: #10131a; --c-code: #e8eefc; --c-mark: #3a3300;
  --c-chip: #263142; --c-chip-text: #cfe1ff;
}

/* ==================================================================
   1) Base + Resets (kept, polished)
   ================================================================== */
.board img { border: 0; max-width:100%; height:auto; display:block; }
.board, .board label, .board table, .board input, .board button,
.board textarea, .board select { font-family: var(--font-ui); }
.board select { margin: 0; }
.board .iCheck { width: 16px; height: 16px; margin: 0; vertical-align: middle; }
.board .iCheck+label { vertical-align: middle; }
.board .iText { position: relative; padding: 8px 12px; height: 38px; line-height: 22px; border: 1px solid var(--c-border); background: var(--c-bg); border-radius: var(--radius-xs); }
.board textarea { margin: 0; padding: 10px 12px; border: 1px solid var(--c-border); background: var(--c-bg); border-radius: var(--radius-xs); }
.board label { display: inline-block; margin: 0; }

/* ==================================================================
   2) Category Tab (original kept, adjusted)
   ================================================================== */
.cTab { position: relative; margin: 0; padding: 0; list-style: none; border: 0; }
.cTab:after { content:""; display:block; clear:both; }
.cTab li { float:left; margin:0 6px 0 0; border:0; }
.cTab li a { position:relative; display:block; height:34px; line-height:34px; padding:0 16px; text-decoration:none; color:var(--c-muted); box-sizing:border-box; transition:all .15s ease-in-out; border:1px solid var(--c-border); border-bottom-width:2px; border-radius: var(--radius-xs); }
.cTab li em { font: 11px Tahoma, Geneva, sans-serif; color:#767676; padding-left:2px; }
.cTab li:hover a, .cTab li.on a { color: var(--c-heading); border-color: var(--c-link); }
.cTab ul { display:none; position:absolute; top:36px; left:0; margin:0; padding:0; }
.cTab li.on ul { display:block; overflow:hidden; white-space:nowrap; }
.cTab li.on ul li { position:relative; left:1px; float:none; display:inline; margin:0; padding:0 15px; list-style:none; border:0; border-right:1px solid var(--c-border); }
.cTab li.on ul li a { border:0; top:0; float:none; padding:0; font-weight:normal; }
.cTab li.on ul li.on_ a { font-weight:700; color:#3912b3; }

/* ==================================================================
   3) Board List (list.html) – kept & refined
   ================================================================== */
.board_list {}
.board_list table { border:0; border-top:1px solid var(--c-border); border-bottom:1px solid var(--c-border); color: var(--c-text); width:100%; border-collapse:separate; border-spacing:0; box-shadow: var(--shadow-md); border-radius: var(--radius-md); overflow:hidden; }
.board_list a { text-decoration:none; color: inherit; }
.board_list a:hover, .board_list a:active, .board_list a:focus { text-decoration: underline; }
.board_list th { border:0; border-bottom:1.5px solid var(--c-border); padding:14px 0; height:14px; white-space:nowrap; background: var(--c-bg-soft); color:#72798c; font-weight:600; font-size:16px; }
.board_list th:first-child span { border:0; }
.board_list th span { display:block; padding:0 15px; height:14px; font-weight:normal; }
.board_list tr.notice { background:#f6f6f6; }
body.color_scheme_dark .board_list tr.notice { background:#23242b; }
.board_list tr.notice td.title a { font-weight:700; }
.board_list td { border:0; border-bottom:1px solid var(--c-border-soft); padding:14px 10px; white-space:nowrap; vertical-align:middle; }
.board_list tr:last-child td { border:0; }
.board_list td.notice { text-align:center; }
.board_list td.no { text-align:center; font: 11px Tahoma, Geneva, sans-serif; }
.board_list td.title { white-space:normal; line-height:1.5; width:100%; }
.board_list td.author img { position:relative; top:-1px; }
.board_list td.time, .board_list td.readNum, .board_list td.voteNum, .board_list td.lastReply a { text-align:center; font: 11px Tahoma, Geneva, sans-serif; }
.board_list td.lastReply sub { font: 9px Tahoma, Geneva, sans-serif; }
.board_list td.check { text-align:center; }
.board_list tr.no_article { height:150px; }
.board_list tr.no_article td { vertical-align:middle; }

.list_footer { position:relative; margin:15px 0; }
.list_footer:after { content:""; display:block; clear:both; }
.list_footer .btnArea { float:right; margin:0; }
.list_footer .board_search { float:left; position:relative; margin:0 4px 0 0; }
.list_footer .board_search .xi-magnifier { position:absolute; top:8px; left:10px; }
.list_footer .board_search * { vertical-align:top; }
.list_footer .board_search .iText { height:38px; line-height:38px; padding:0 60px 0 34px; width:200px; border:1px solid var(--c-border); border-radius: var(--radius-sm); box-sizing:border-box; transition: all .2s ease-in-out; }
.list_footer .board_search .iText.active, .list_footer .board_search .iText:active, .list_footer .board_search .iText:focus { width:240px; }
.list_footer .board_search .search_input { display:inline-block; position:relative; }
.list_footer .board_search select { height:38px; min-width: 120px; padding:0 10px; border-radius: var(--radius-xs); }
.list_footer .board_search .btn { position:absolute; top:0; right:0; border-radius: 0 var(--radius-xs) var(--radius-xs) 0; height:38px !important; }

.update-log { width:100%; border-bottom:1px solid var(--c-border); margin:5px auto; padding:5px; }

/* ==================================================================
   4) Board Write (write_form.html) – kept & refined
   ================================================================== */
.board_write {}
.write_header { padding:9px 0 10px; display:flex; gap:8px; flex-wrap: wrap; }
.write_header * { vertical-align:middle; }
.write_header select { border:1px solid var(--c-border); height:38px; min-width:140px; padding:0 10px; border-radius: var(--radius-xs); }
.write_header select[name=is_notice] { min-width: 100px; }
.write_header .iText { width: min(640px, 80vw); margin:0; background: var(--c-bg); }
.write_editor .xd { margin-top:-3px; }
.write_footer { overflow:hidden; margin:16px 0; display:flex; align-items:center; justify-content:space-between; }
.write_footer:after { content:""; display:block; clear:both; }
.write_footer .btnArea { float:none; margin:0; }
.write_option { margin:0 0 12px 0; }
.write_option label { margin:0 10px 0 0; }
.write_captcha { float:left; margin:0; }

/* Extra Form */
.exForm { background: var(--c-bg); padding:10px 0; }
.exForm table { border:0; width:100%; }
.exForm caption { text-align:right; font-size:11px; padding:0 0 2px 0; }
.exForm th, .exForm td { border:0; vertical-align:top; border-top:1px solid var(--c-border); }
.exForm th { color: var(--c-heading); text-align:left; padding:10px 5px 15px; white-space:nowrap; }
.exForm th label { cursor:default; }
.exForm td { color: var(--c-text); padding:8px 10px; }
.exForm em { font-style:normal; color:#f60; }
.exForm .text, .exForm .password, .exForm .homepage, .exForm .email_address, .exForm .tel, .exForm .address, .exForm .date { padding:8px 10px; margin:0 4px 0 0; height:36px; line-height:20px; vertical-align:top; border:1px solid var(--c-border); border-radius: var(--radius-xs); }
.exForm .text, .exForm .email_address, .exForm .homepage, .exForm .address { width: 300px; }
.exForm .tel { width: 60px; }
.exForm .date { width: 140px; }
.exForm textarea { width:90%; padding:10px 12px; margin:0 4px 0 0; vertical-align:top; border:1px solid var(--c-border); border-radius: var(--radius-xs); }
.exForm p { margin:5px 0 0 0; font-size:11px; }
.exForm ul { margin:0; padding:0; list-style:none; }
.exForm li { display:inline; }
.exForm li input { width:16px; height:16px; margin:0 4px 0 0; vertical-align:middle; }
.exForm li label { margin:0 15px 0 0; }

.exOut { background: var(--c-bg); padding:10px 0; }
.exOut table { border:0; width:100%; }
.exOut th, .exOut td { border:0; vertical-align:top; border-bottom:1px solid var(--c-border); padding:8px 15px; }
.exOut th { color: var(--c-heading); text-align:left; white-space:nowrap; }
.exOut td { color: var(--c-text); width:100%; }

/* ==================================================================
   5) Board Read (_read.html) – header/body/footer kept
   ================================================================== */
.board_read { display:block; }
.read_header { position:relative; margin-bottom:20px; }
.read_header h1 { margin:8px 0 16px; font-size: var(--fz-h1); font-weight:800; line-height:1.25; letter-spacing:-0.015em; color: var(--c-heading); width:auto; overflow:visible; white-space:normal; text-overflow:clip; word-break:keep-all; overflow-wrap:anywhere; }
.read_header h1 span.is_admin { font-size:15px; font-weight:500; line-height:15px; color:#FF6C00; }
.read_header h1 a { text-decoration:none; color:#444; }
.read_header h1 .category { font-weight:normal; border-right:1px solid #DDD; padding:0 13px 0 0; margin:0 8px 0 0; }
.read_header .meta { margin:0; padding:8px 0 13px; border-bottom:1px solid var(--c-border); white-space:nowrap; color: var(--c-muted); font-size: var(--fz-meta); }
.update-log .read_header .meta { border-bottom:0; }
.read_header .meta > span { margin-left:8px; }
.read_header .meta > span:first-child { margin-left:0; }
.read_header .meta .author { text-decoration:none; color: var(--c-muted); font-weight:normal; }

.read_body { padding: 0 var(--gutter-x); }
.read_body .xe_content { color:#333; }

/* === Unified content typography === */
.xe_content { font-family: var(--font-body) !important; font-size: var(--fz-body) !important; line-height: var(--lh-body) !important; color: var(--c-text) !important; background: transparent !important; letter-spacing:.005em; word-break: keep-all !important; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Headings inside content */
.xe_content h1 { font-size: var(--fz-h1); line-height:1.22; margin:1.2em 0 .5em; font-weight:800; color: var(--c-heading); }
.xe_content h2 { font-size: var(--fz-h2); line-height:1.28; margin:1.1em 0 .5em; font-weight:800; color: var(--c-heading); }
.xe_content h3 { font-size: var(--fz-h3); line-height:1.32; margin:1em 0 .45em; font-weight:700; color: var(--c-heading); }
.xe_content h4, .xe_content h5, .xe_content h6 { margin:.9em 0 .35em; font-weight:600; color: var(--c-heading); }

/* Inline / emphasis */
.xe_content a { color: var(--c-link); text-decoration: underline; text-underline-offset: 2px; }
.xe_content a:hover { color: var(--c-link-hover); }
.xe_content strong { font-weight:700; }
.xe_content em { font-style: italic; }
.xe_content mark { background: var(--c-mark); padding:.1em .25em; border-radius:3px; }

/* Lists */
.xe_content ul, .xe_content ol { padding-left:1.2em; margin:.8em 0 1.1em; }
.xe_content li { margin:.2em 0; }

/* Quotes */
.xe_content blockquote { border-left:4px solid #a2a9b6; color:#4b5563; background: var(--c-bg-soft); margin:1.2em 0; padding:14px 18px; font-style:italic; border-radius: var(--radius-sm); }
body.color_scheme_dark .xe_content blockquote { background:#232433; color:#cbd5e1; border-left-color:#5e5e6d; }

/* Code */
.xe_content pre, .xe_content code, .xe_content kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; }
.xe_content code { background: var(--c-code-bg); color: var(--c-code); padding:.15em .4em; border-radius:4px; font-size:90%; }
.xe_content pre { background: var(--c-code-bg); color: var(--c-code); padding:14px 16px; border-radius: var(--radius-sm); overflow:auto; }

/* Tables */
.xe_content table { font: inherit; width:100% !important; max-width:100% !important; overflow-x:auto !important; border-collapse: collapse; margin:1.2em 0; font-size:95%; }
.xe_content th, .xe_content td { border:1px solid var(--c-border); padding:10px 12px; }
.xe_content thead th { background: var(--c-bg-soft); font-weight:700; }
@media (max-width:800px){ .xe_content table{ display:block; overflow-x:auto; } }

/* Media */
.xe_content img, .write_body .xe_content img, .read_body .xe_content img { max-width:100% !important; height:auto !important; display:block; margin:20px auto; }
.xe_content figure { margin:1.2em 0; }
.xe_content figcaption { text-align:center; font-size:90%; color: var(--c-muted); margin-top:.4em; }
.xe_content small { font-size:86%; color: var(--c-muted); }

/* Footer */
.read_footer { overflow:hidden; margin-top:22px; padding-top:16px; border-top:1px solid var(--c-border); }
.read_footer .fileList { margin:15px 0; display:inline; float:left; }
.read_footer .toggleFile { border:0; background:none; cursor:pointer; overflow:visible; padding:0; color:#4b4b4b; }
.read_footer .files { display:none; list-style:none; margin:15px 0; padding:0; line-height:16px; }
.read_footer .files li { background:url(icoSet.gif) no-repeat 0 -28px; padding:0 0 0 15px; }
.read_footer .files a { color:#4b4b4b; position:relative; text-decoration:none; }
.read_footer .files a .fileSize { visibility:hidden; position:absolute; padding:1px 4px; left:100%; top:-4px; border:1px solid var(--c-border); font:11px Tahoma, Geneva, sans-serif; background: var(--c-bg); white-space:nowrap; }
.read_footer .files a:hover .fileSize, .read_footer .files a:active .fileSize, .read_footer .files a:focus .fileSize { visibility:visible; }
.read_footer .tns { float:right; margin:15px 0; }
.read_footer .tns a:hover, .read_footer .tns a:active, .read_footer .tns a:focus { text-decoration:underline; }
.read_footer .tags { display:inline-flex; align-items:center; gap:8px; height:auto; font-size: var(--fz-small); color: var(--c-muted); vertical-align:top; padding:6px 0; line-height:16px; background:none; }
.read_footer .tags a { text-decoration:none; color: var(--c-chip-text); background: var(--c-chip); padding:6px 10px; border-radius: 999px; }
.read_footer .tags .xi-tags { font-size:14px; margin-right:3px; }
.read_footer .action { display:inline-block; line-height:16px; font-size:11px; margin:0 15px 0 0; color:#555; }
.read_footer .sns{ margin-top:24px; text-align:center; }
.read_footer .sns li{display:inline;vertical-align:top}
.read_footer .sns a{display:inline-block;width:32px;height:32px;border:1px solid var(--c-border);background-color:var(--c-bg-soft); border-radius:var(--radius-xs);} 
.read_footer .sns i{font-size:20px;line-height:32px;color:#9aa1ab}
.read_footer .vote{ margin-top:24px;text-align:center; }
.read_footer .vote li{display:inline;vertical-align:top}
.read_footer .vote a{display:inline-block;width:70px;height:70px;border:1px solid var(--c-border);background-color:var(--c-bg-soft); border-radius:var(--radius-xs);} 
.read_footer .vote i{font-size:22px;line-height:45px;color:#bcbcbc}
.read_footer .sign { clear:both; border:1px solid var(--c-border); margin:0 0 -1px; padding:10px 15px; overflow:hidden; }
.read_footer .sign .pf { float:left; margin:0 15px 0 0; width:80px; height:80px; }
.read_footer .sign .tx { overflow:hidden; line-height:1.3; font-size:11px; border-left:1px dotted var(--c-border); padding:0 0 0 15px; color:#333; }
.read_footer .sign .tx * { margin:0; }
.read_footer .btnArea { clear:both; text-align:right; padding:10px 0; }

/* Buttons */
.board .btn { text-decoration:none !important; display:inline-flex; align-items:center; justify-content:center; padding:0 14px !important; margin:0; font-family:inherit; font-size:14px; line-height:36px !important; height:36px !important; color:#fff; text-align:center; vertical-align:top; cursor:pointer; overflow:visible; background:#CDA25A; border:0; border-radius: var(--radius-xs); text-shadow:none; box-shadow:none; transition: background .2s, transform .05s; }
.board .btn:hover { background:#b68c49; }
.board .btn:active { transform: translateY(1px); }
.board .btn i { display:none; }
.board .btn_insert { font-size:14px; border:0; cursor:pointer; width:130px; height:40px; border-radius: var(--radius-xs); color:#fff; background:#CDA25A; }
.board .btn_insert:hover { background:#555; }

/* secret form */
.board .secretForm .iText {height:36px; width:160px; box-sizing:border-box;}
.board .secretForm .btn {border-radius: 0 var(--radius-xs) var(--radius-xs) 0; height:36px !important; }
.board .secretForm p {margin-bottom:6px;}

/* ==================================================================
   6) Feedback (Trackback+Comment) – unified typography
   ================================================================== */
.feedback { position:relative; color: var(--c-text); margin:0 0 20px; }
.feedback .fbHeader { position:relative; height:auto; padding:10px 0 0 5px; line-height:30px; border-top:1px solid var(--c-border); }
#comment .fbHeader .wComment { position:absolute; top:10px; right:15px; padding:0 0 0 18px; text-decoration:none; color: var(--c-muted); line-height:1; }
.feedback .fbHeader h2 { margin:0; font-size:17px; display:inline; font-weight:700; color: var(--c-heading); }
.feedback .fbHeader h2 em { font-style:normal; color:#CDA25A; }
.feedback .fbHeader .trackbackURL { position:absolute; top:8px; right:10px; margin:0; line-height:1; color: var(--c-muted); font:11px Tahoma, Geneva, sans-serif; }
.feedback .fbHeader .trackbackURL a { text-decoration:none; color: var(--c-muted); }
.feedback .fbList { margin:0; padding:0; }
.feedback .fbItem { padding:18px 0; border-bottom:1px solid var(--c-border-soft); margin:0 0 -1px 0; list-style:none; display:grid; grid-template-columns:40px 1fr; gap:12px 16px; }
.feedback .fbItem:last-child { border-bottom:none; }
.feedback .indent { background:none; }
.feedback .fbMeta { float:none; width:auto; padding:0; }
.feedback .fbMeta .profile { width:40px; height:40px; margin:0; background:url(profile.gif) no-repeat; background-size:100%; border-radius:100%; }
.feedback .fbMeta .author { margin:0; font-size:15.5px; font-weight:600; color: var(--c-heading); }
.feedback .author a { text-decoration:none; color: var(--c-muted); }
.feedback .author a img { margin:0 6px 0 0 !important; vertical-align:top !important; }
.feedback .time { margin:0; font: 13.5px/1.6 Tahoma, Geneva, sans-serif; color:#8e8e8e; }
.feedback .xe_content { margin:0; color: var(--c-text); line-height:1.7; font-size:16px; }
.feedback .xe_content *:first-child { margin-top:0; }
.feedback .xe_content.is_deleted, .feedback .xe_content.is_secret { color:#999; }
#trackback .xe_content { color:#888; }
#trackback .xe_content strong { color:#666; display:block; font-weight:normal; }
.feedback .fileList { margin:8px 0 0 56px; padding:8px 0 0 0; display:inline; float:left; clear:both; }
.feedback .toggleFile { border:0; background:none; cursor:pointer; overflow:visible; padding:0; color:#767676; }
.feedback .files { display:none; list-style:none; margin:15px 0; padding:0; line-height:16px; }
.feedback .files li { background:url(icoSet.gif) no-repeat 0 -28px; padding:0 0 0 15px; }
.feedback .files a { color:#767676; position:relative; text-decoration:none; }
.feedback .files a .fileSize { visibility:hidden; position:absolute; padding:1px 4px; left:100%; top:-4px; border:1px solid var(--c-border); font:11px Tahoma, Geneva, sans-serif; background: var(--c-bg); white-space:nowrap; }
.feedback .files a:hover .fileSize, .feedback .files a:active .fileSize, .feedback .files a:focus .fileSize { visibility:visible; }
.feedback .action { margin:0; padding:10px 10px 0 0; white-space:nowrap; float:right; }
.feedback .action .vote { margin:0 10px 0 0; color:#767676; }
.feedback .action a { padding:0 0 0 4px; color:#767676; text-decoration:none; }
.feedback .action a:hover { color:#CDA25A; }
.feedback .action a.this { background:none; padding:0; margin:0 0 0 10px; text-decoration:underline; }
.feedback .pagination { padding:10px 0; }
.feedback .indent1{padding-left:20px;} .feedback .indent2{padding-left:40px;} .feedback .indent3{padding-left:60px;} .feedback .indent4{padding-left:80px;} .feedback .indent5{padding-left:100px;} .feedback .indent6{padding-left:120px;} .feedback .indent7{padding-left:140px;} .feedback .indent8{padding-left:160px;} .feedback .indent9{padding-left:180px;} .feedback .indent10{padding-left:200px;} .feedback .indent11{padding-left:220px;} .feedback .indent12{padding-left:240px;} .feedback .indent12 .action{display:none}
.fbFooter { margin:-10px 0 10px 0; }

/* Pagination (global/kept) */
.pagination { margin:0; padding:13px 0; text-align:center; line-height:normal; clear:both; }
.pagination a, .pagination strong { position:relative; color:#767676; font: 600 12px/22px Tahoma, Sans-serif; vertical-align:top; display:inline-block; text-decoration:none; padding:4px 10px; background:#F6F6F6; border-radius: var(--radius-xs); z-index:2; border:1px solid var(--c-border); }
.pagination a:hover, .pagination a:active, .pagination a:focus { background:#f8f8f8; }
.pagination strong { color:#D88700; font-size:13px; background:#fff; }
.pagination .direction { font-weight:normal; color:#767676; text-decoration:none !important; border:0; z-index:1; }
.pagination .direction:hover, .pagination .direction:active, .pagination .direction:focus { color:#333; background:#fff; }
.pagination .prev { border-left:0; } .pagination .next { border-right:0; }
.pagination .direction span { position:relative; display:inline-block; width:0; height:0; font-size:0; line-height:0; vertical-align:top; top:4px; }
.pagination .prev span { border:3px solid; border-top:solid #fff; border-bottom:solid #fff; border-left:0; margin-right:1px; }
.pagination .next span { border:3px solid; border-top:solid #fff; border-bottom:solid #fff; border-right:0; margin-left:1px; }

/* ==================================================================
   7) Write Author + Comment form (kept)
   ================================================================== */
.write_author { float:left; margin:0 4px 1em 0; }
.write_author .item { position:relative; display:inline-block; }
.write_author .iLabel { top:6px; left:12px; color:#666; }
.write_author label { margin:0 10px 0 0; }

.write_comment { position:relative; margin:10px 0 75px; }
.write_comment:after { content:""; display:block; clear:both; }
.write_comment textarea { width: min(720px, 92vw); height: 120px; margin:0 0 8px 0; padding:10px 12px; border:1px solid var(--c-border); border-radius: var(--radius-xs); }
.write_comment .write_author { padding:0 0 10px 0; }
.write_comment .iText.userName, .write_comment .iText.userPw { width:140px; }
.write_comment .iText.homePage { width:220px; }

/* ==================================================================
   8) Context Data/Message (kept, colors unified)
   ================================================================== */
.context_data { background: var(--c-bg-soft); border-top:2px solid #666; padding:15px 20px; color: var(--c-muted); }
.context_data h3.author, .context_data h3.title { margin:0 0 10px; color: var(--c-heading); }
.context_data p.author { margin:0; }
.context_data p.author strong { font-weight:normal; }
.context_data .xe_content { color: var(--c-muted); }
.context_message { text-align:center; border-top:2px solid #666; }
.context_message h1 { font-size:16px; margin:20px 0; }
.context_message .btnArea { margin:20px 0; }

/* ==================================================================
   9) Tag List (kept)
   ================================================================== */
.tagList { margin:0; padding:25px; border:1px solid #cdcdcd; line-height:1.2; text-align:justify; background: var(--c-bg); border-color: var(--c-border); border-radius: var(--radius-sm); }
.tagList a { color:#fff; text-decoration:none; white-space:nowrap; margin:0 2px; }
.tagList a.rank1 { font-size:24px; background:#000; }
.tagList a.rank2 { font-size:18px; background:#333; }
.tagList a.rank3 { font-size:14px; background:#666; }
.tagList a.rank4 { font-size:12px; background:#999; }
.tagList a.rank5 { font-size:12px; color:#666; text-decoration:underline; background:transparent; }
.tagFooter { text-align:center; padding:20px 0; }

/* ==================================================================
   10) Dark-mode component harmonization (kept & simplified)
   ================================================================== */
body.color_scheme_dark .board, body.color_scheme_dark .board *, body.color_scheme_dark .read_body .xe_content, body.color_scheme_dark .feedback .xe_content, body.color_scheme_dark .context_data, body.color_scheme_dark .exForm, body.color_scheme_dark .exOut, body.color_scheme_dark .board_list table, body.color_scheme_dark .board_list tr.notice, body.color_scheme_dark .board_list td, body.color_scheme_dark .board_list th, body.color_scheme_dark .board_write, body.color_scheme_dark .write_header, body.color_scheme_dark .write_footer, body.color_scheme_dark .list_footer, body.color_scheme_dark .board .btn, body.color_scheme_dark .list_footer .board_search .iText, body.color_scheme_dark .tagList { color:#f1f1f1 !important; border-color:#333 !important; }
body.color_scheme_dark .board_list tr.notice, body.color_scheme_dark .board_list tr.no_article { background:#23242b !important; }
body.color_scheme_dark .board_list a, body.color_scheme_dark .board_list a:active, body.color_scheme_dark .board_list a:focus { color:#9ecbff !important; }
body.color_scheme_dark .board_list a:hover { color:#ffce6a !important; }
body.color_scheme_dark .board .btn, body.color_scheme_dark .board .btn_insert { background:#23242b !important; color:#ffce6a !important; }
body.color_scheme_dark .board .btn:hover, body.color_scheme_dark .board .btn_insert:hover { background:#444 !important; color:#fff !important; }
body.color_scheme_dark .tagList a.rank1, body.color_scheme_dark .tagList a.rank2, body.color_scheme_dark .tagList a.rank3, body.color_scheme_dark .tagList a.rank4 { background:#23242b !important; color:#ffce6a !important; }
body.color_scheme_dark .tagList a.rank5 { color:#eee !important; }

/* Footer harmonization */
body.color_scheme_dark .read_footer, body.color_scheme_dark .read_footer .sns, body.color_scheme_dark .read_footer .sns a, body.color_scheme_dark .read_footer .sns i, body.color_scheme_dark .read_footer .vote, body.color_scheme_dark .read_footer .vote a, body.color_scheme_dark .read_footer .vote i, body.color_scheme_dark .read_footer .fileList, body.color_scheme_dark .read_footer .toggleFile, body.color_scheme_dark .read_footer .files, body.color_scheme_dark .read_footer .files a, body.color_scheme_dark .read_footer .files .fileSize, body.color_scheme_dark .read_footer .tns, body.color_scheme_dark .read_footer .btnArea, body.color_scheme_dark .read_footer .btn, body.color_scheme_dark .read_footer .btn i, body.color_scheme_dark .read_footer .etc a.btn { background:#2a2a2a !important; color:#f8f9fa !important; border-color:#3a3a3a !important; box-shadow: var(--shadow-sm); }
body.color_scheme_dark .read_footer .btn, body.color_scheme_dark .read_footer .btn i { background:#2a2a2a !important; color:#f8f9fa !important; border:1px solid #495057 !important; transition: background .2s; }
body.color_scheme_dark .read_footer .btn:hover, body.color_scheme_dark .read_footer .btn:focus { background:#3a3a3a !important; color:#adb5bd !important; }
body.color_scheme_dark .read_footer .sns a, body.color_scheme_dark .read_footer .vote a { background:#2a2a2a !important; color:#adb5bd !important; border:1px solid #495057 !important; }
body.color_scheme_dark .read_footer .sns a:hover, body.color_scheme_dark .read_footer .vote a:hover { background:#3a3a3a !important; color:#f8f9fa !important; }
body.color_scheme_dark .read_footer .sns i, body.color_scheme_dark .read_footer .vote i { color:#6c757d !important; }
body.color_scheme_dark .read_footer .files a, body.color_scheme_dark .read_footer .files .fileSize { color:#adb5bd !important; background:#2a2a2a !important; border:1px solid #3a3a3a !important; }
body.color_scheme_dark .read_footer .toggleFile { background:#2a2a2a !important; color:#f8f9fa !important; border:1px solid #3a3a3a !important; }
body.color_scheme_dark .read_footer .toggleFile:hover { background:#3a3a3a !important; color:#adb5bd !important; }
body.color_scheme_dark .read_footer .fileList strong { color:#f8f9fa !important; }

/* Dark pagination */
body.color_scheme_dark .pagination { background:transparent !important; padding:13px 0; }
body.color_scheme_dark .pagination a, body.color_scheme_dark .pagination strong { background:#2a2a2a !important; color:#9aa1ab !important; border-radius:2px !important; border:1px solid #3a3a3a !important; box-shadow:none !important; transition: background .15s, color .15s; }
body.color_scheme_dark .pagination a:hover, body.color_scheme_dark .pagination a:focus { color:#f8f9fa !important; background:#3a3a3a !important; text-decoration: underline !important; }
body.color_scheme_dark .pagination strong { color:#f8f9fa !important; background:#2a2a2a !important; border-color:#495057 !important; font-weight:bold; }
body.color_scheme_dark .pagination .direction { color:#6c757d !important; background:#2a2a2a !important; border:1px solid #3a3a3a !important; }
body.color_scheme_dark .pagination .direction:hover { color:#f8f9fa !important; background:#3a3a3a !important; }
body.color_scheme_dark .pagination i { color:#adb5bd !important; font-size:1em; vertical-align:middle; }

/* Dark selects */
body.color_scheme_dark select, body.color_scheme_dark .board select, body.color_scheme_dark .list_footer .board_search select, body.color_scheme_dark .write_header select { background:#2a2a2a !important; color:#f8f9fa !important; border:1px solid #495057 !important; box-shadow:none !important; outline:none !important; transition: background .15s, color .15s, border .15s; }
body.color_scheme_dark select:focus, body.color_scheme_dark .board select:focus, body.color_scheme_dark .list_footer .board_search select:focus, body.color_scheme_dark .write_header select:focus { border:1.5px solid #3a3a3a !important; }

/* ==================================================================
   11) Content/container widths – preserved + unified
   ================================================================== */
.board_read .read_body, .rhymix_content, .xe_content, .document_view, .read_body { width:100% !important; max-width: var(--container-max) !important; margin:36px auto 28px !important; padding:0 var(--gutter-x) !important; background:transparent !important; box-shadow:none !important; border-radius:0 !important; }
@media (min-width:860px){ .board_read .read_body .xe_content, .rhymix_content .xe_content, .xe_content, .document_view .xe_content { max-width: var(--content-max) !important; margin-left:auto !important; margin-right:auto !important; } }
@media (max-width:1280px){ .board_read .read_body, .rhymix_content, .xe_content, .document_view, .read_body { max-width:98vw !important; } }
@media (max-width:600px){ .board_read .read_body, .rhymix_content, .xe_content, .document_view, .read_body { padding:0 4vw !important; max-width:100vw !important; } }

/* ==================================================================
   12) CKEditor (kept dark/light polish)
   ================================================================== */
body.color_scheme_dark .cke_top, body.color_scheme_dark .cke_toolgroup, body.color_scheme_dark .cke_combo__contents, body.color_scheme_dark .cke_panel_list, body.color_scheme_dark .cke_panel_frame, body.color_scheme_dark .cke_button, body.color_scheme_dark .cke_button_label, body.color_scheme_dark .cke_combo_button, body.color_scheme_dark .cke_combo_text, body.color_scheme_dark .cke_combo_open, body.color_scheme_dark .cke_combo__label, body.color_scheme_dark .cke_combo__list, body.color_scheme_dark .cke_dialog, body.color_scheme_dark .cke_dialog_contents, body.color_scheme_dark .cke_dialog_ui_input_text, body.color_scheme_dark .cke_dialog_ui_input_select, body.color_scheme_dark .cke_dialog_title, body.color_scheme_dark .cke_dialog_ui_input_textarea, body.color_scheme_dark .cke_menuitem, body.color_scheme_dark .cke_menuitem span, body.color_scheme_dark .cke_menuitem .cke_icon, body.color_scheme_dark .cke_menuitem .cke_label, body.color_scheme_dark .cke_menuitem .cke_menubutton, body.color_scheme_dark .cke_menuitem .cke_menubutton .cke_button, body.color_scheme_dark .cke_menuitem .cke_menubutton .cke_label { background:#232323 !important; color:#f1f1f1 !important; border-color:#444 !important; box-shadow:none !important; }
body.color_scheme_dark .cke_combo_text, body.color_scheme_dark .cke_combo_open, body.color_scheme_dark .cke_panel_listItem, body.color_scheme_dark .cke_panel_listItem a, body.color_scheme_dark .cke_panel_listItem .cke_label { color:#f1f1f1 !important; background:#232323 !important; }
body.color_scheme_dark .cke_dialog_ui_input_text, body.color_scheme_dark .cke_dialog_ui_input_select, body.color_scheme_dark .cke_dialog_ui_input_textarea { background:#232323 !important; color:#f1f1f1 !important; border:1px solid #495057 !important; }
body.color_scheme_dark .cke_button:hover, body.color_scheme_dark .cke_combo_button:hover, body.color_scheme_dark .cke_panel_listItem a:hover { background:#333 !important; color:#ffd478 !important; }
body:not(.color_scheme_dark) .cke_top, body:not(.color_scheme_dark) .cke_toolgroup, body:not(.color_scheme_dark) .cke_combo__contents, body:not(.color_scheme_dark) .cke_panel_list, body:not(.color_scheme_dark) .cke_panel_frame, body:not(.color_scheme_dark) .cke_button, body:not(.color_scheme_dark) .cke_button_label, body:not(.color_scheme_dark) .cke_combo_button, body:not(.color_scheme_dark) .cke_combo_text, body:not(.color_scheme_dark) .cke_combo_open, body:not(.color_scheme_dark) .cke_combo__label, body:not(.color_scheme_dark) .cke_combo__list, body:not(.color_scheme_dark) .cke_dialog, body:not(.color_scheme_dark) .cke_dialog_contents, body:not(.color_scheme_dark) .cke_dialog_ui_input_text, body:not(.color_scheme_dark) .cke_dialog_ui_input_select, body:not(.color_scheme_dark) .cke_dialog_title, body:not(.color_scheme_dark) .cke_dialog_ui_input_textarea, body:not(.color_scheme_dark) .cke_menuitem, body:not(.color_scheme_dark) .cke_menuitem span, body:not(.color_scheme_dark) .cke_menuitem .cke_icon, body:not(.color_scheme_dark) .cke_menuitem .cke_label, body:not(.color_scheme_dark) .cke_menuitem .cke_menubutton, body:not(.color_scheme_dark) .cke_menuitem .cke_menubutton .cke_button, body:not(.color_scheme_dark) .cke_menuitem .cke_menubutton .cke_label { background:#fff !important; color:#222 !important; border-color:#dbdbdb !important; }

/* ==================================================================
   13) Misc legacy kept (vote-list, votelog)
   ================================================================== */
.vote-list { display:block; overflow-x:hidden; overflow-y:auto; margin:0 !important; padding:20px; color:#222; font-size:15px; font-family: var(--font-ui); line-height:1.6; background:#fff; }
.votelog { display:inline-block; padding:2px 15px; background:#00b0a2; border-radius: 23px; color:#fff; text-decoration: inherit; }

/* ==================================================================
   14) Accessibility
   ================================================================== */
:focus-visible { outline:2px solid var(--c-link); outline-offset:2px; }

/* ==================================================================
   END OF FILE – All original sections preserved and modernized
   ================================================================== */

   /* ==================================================================
   3A) Board List – Medium-style listing optimization (essay index)
   ================================================================== */

/* 고정 폭 테이블에서 행길이 안정화 */
.board_list table { table-layout: fixed; }

/* 목록 타이포 & 리듬 상향 */
.board_list, .board_list table {
  font-size: 16px;
  line-height: 1.75;
}
.board_list td { padding: 16px 14px; }
.board_list th { padding: 14px 12px; }

/* 컬럼 폭 가이드 (no | title | author | time | reads | votes ...) */
.board_list tbody td.no        { width: 68px; }
.board_list tbody td.title     { width: auto; }
.board_list tbody td.author    { width: 140px; }
.board_list tbody td.time      { width: 124px; }
.board_list tbody td.readNum,
.board_list tbody td.voteNum   { width: 92px; }

/* 제목: 굵게 + 2줄 클램프(미디엄 느낌) */
.board_list td.title { white-space: normal; line-height: 1.45; }
.board_list td.title a {
  font-weight: 700;
  font-size: 17.5px;
  color: var(--c-heading);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.color_scheme_dark .board_list td.title a { color: #e6eaf1; }

/* 메타(번호/날짜/조회/추천)는 톤 다운 */
.board_list td.no,
.board_list td.time,
.board_list td.readNum,
.board_list td.voteNum,
.board_list td.lastReply a {
  color: var(--c-muted);
  font: 600 12.5px/1.6 "Tahoma", system-ui, sans-serif;
}

/* 작성자 가독성 */
.board_list td.author,
.board_list td.author a {
  color: var(--c-muted);
  font-weight: 600;
}

/* 행 hover */
.board_list tbody tr:hover { background: var(--c-bg-soft); }
body.color_scheme_dark .board_list tbody tr:hover { background: #1c1e26; }

/* 공지 강조 */
.board_list tr.notice td.title a { font-weight: 800; }

/* 조회/추천 뱃지(선택): 템플릿에서 data-label="조회"/"추천" 넣으면 표시됨 */
.board_list td.readNum::after,
.board_list td.voteNum::after {
  content: attr(data-label);
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--c-chip);
  color: var(--c-chip-text);
  font-weight: 600;
  font-size: 12px;
}

/* ========== 반응형 ========== */
@media (max-width: 1024px) {
  .board_list, .board_list table { font-size: 15.5px; }
  .board_list tbody td.author { width: 120px; }
  .board_list tbody td.time   { width: 116px; }
  .board_list tbody td.readNum,
  .board_list tbody td.voteNum { width: 80px; }
}

/* 작은 화면에서는 ‘카드형 스택’으로 변환 + 저우선 컬럼 숨김 */
@media (max-width: 760px) {
  .board_list table, .board_list thead { display: block; }
  .board_list tbody { display: block; }
  .board_list tr {
    display: block;
    border-bottom: 1px solid var(--c-border);
    padding: 12px 8px;
  }
  .board_list tr:last-child { border-bottom: 0; }

  .board_list th { display: none; }
  .board_list td {
    display: block;
    border: 0;
    padding: 4px 0;
    white-space: normal;
  }

  /* 제목 최상단 */
  .board_list td.title { margin-bottom: 6px; }
  .board_list td.title a { font-size: 18px; -webkit-line-clamp: 3; }

  /* 제목 아래 한 줄 메타 */
  .board_list td.author,
  .board_list td.time,
  .board_list td.readNum,
  .board_list td.voteNum {
    display: inline;
    margin-right: 12px;
    font-size: 13.5px;
  }

  /* 저우선 컬럼 숨김 */
  .board_list td.no,
  .board_list td.check,
  .board_list td.lastReply { display: none; }
}

/* 초소형 폰 */
@media (max-width: 380px) {
  .board_list td.author,
  .board_list td.voteNum { display: none; }
  .board_list td.title a { font-size: 17px; }
}

/* 헤더 자잘한 폴리시 + 링크 언더라인은 제목에서만 */
.board_list th { letter-spacing: .01em; }
.board_list a { text-decoration: none; }
.board_list td.title a:hover { text-decoration: underline; }

/* 하단 검색 입력 여유 */
.list_footer { position: relative; margin: 18px 0; }
.list_footer .board_search .iText {
  height: 40px;
  line-height: 40px;
  width: 220px;
}
.list_footer .board_search .iText:focus { width: 260px; }