@charset "utf-8";

@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'KIMM_Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2212@1.0/KIMM_Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

/* ============================================================
   기본 CSS 변수 — PHP 인라인 <style>로 덮어쓰기 가능
   ============================================================ */
:root {
    --site-point:  #9700ef;
    --num-color:   #9700ef;
    --num-text:    #ffffff;
    --num-shadow:  #9700ef;
    --num-font:    'KIMM_Bold';
    --name-font:   'Pretendard-Regular';
    --hash-text:   #333333;
    --hash-back:   #ffffff;
    --hash-back2:  #333333;
    --bo-width:    80%;

    /* 코멘트/댓글 영역 — 라이트 기본값 (다크는 PHP에서 덮어씀) */
    --comment-bg:       #f9f9f9;
    --comment-border:   #eeeeee;
    --comment-text:     #333333;
    --comment-meta:     #999999;

    /* 카드 배경 (라이트 기본값) */
    --card-bg:     rgba(255, 255, 255, 0.82);
    --card-border:    rgba(255, 255, 255, 0.6);
    --notice-width:   80%;
}

/* ============================================================
   게시판 래퍼
   ============================================================ */
#page_board_content {
    width:    var(--bo-width);
    padding:  0 10px;
    margin:   0 auto;
    position: relative;
    box-sizing: border-box;
}
@media only screen and (max-width: 720px) {
    #page_board_content { width: 95%; }
}

/* ============================================================
   ★ 라공 에디션 추가 요소
   ============================================================ */

/* 상단 이미지 — 어떤 크기의 이미지도 항상 중앙 */
.ra0-top-img {
    width: 100%;
    margin-bottom: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.ra0-top-img img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
    margin: 0 auto;
}

/* 한마디 공지 — 너비 변수로 조절, 항상 중앙 */
.ra0-notice {
    width: var(--notice-width, 80%);
    margin: 0 auto 14px auto;
    padding: 10px 14px;
    background: var(--comment-bg);
    border-left: 3px solid var(--num-color);
    border-radius: 0 4px 4px 0;
    font-family: var(--name-font), sans-serif;
    font-size: 13px;
    color: var(--hash-text);
    line-height: 1.7;
    word-break: break-all;
    box-sizing: border-box;
}

/* 설정 기어 버튼 — 화면 우측 상단 고정, 항상 보이게 */
.ra0-gear-btn {
    position:      fixed;
    top:           24px;
    right:         24px;
    width:         44px;
    height:        44px;
    border-radius: 50%;
    background:    var(--site-point, #9700ef);
    color:         #fff;
    border:        none;
    cursor:        pointer;
    font-size:     18px;
    display:       flex;
    align-items:   center;
    justify-content: center;
    box-shadow:    0 4px 16px rgba(0,0,0,0.25);
    z-index:       8000;
    transition:    transform .35s ease, box-shadow .2s;
}
.ra0-gear-btn:hover {
    transform:  rotate(65deg);
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}

/* ============================================================
   검색창 — 하단 중앙 (inline-flex로 한 줄 보장)
   ============================================================ */
.search-box { clear: both; margin: 18px 0 6px; text-align: center; }
.search-inner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.search-inner input[type="text"] {
    padding: 6px 10px;
    border: 1px solid #ccc;
    height: 34px;
    min-width: 150px;
    font-size: 13px;
    box-sizing: border-box;
    flex: 1;
}
.search-inner .ui-btn {
    height: 34px; line-height: 34px;
    padding: 0 14px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ============================================================
   설정 모달
   ============================================================ */
#ra0-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.45); z-index: 9000;
}
#ra0-modal {
    display: none; position: fixed;
    top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: min(450px, 93vw); max-height: 88vh; overflow-y: auto;
    background: var(--modal-bg, #ffffff);
    color:      var(--modal-text, #333333);
    border-radius: 10px;
    box-shadow: 0 8px 36px rgba(0,0,0,.25); z-index: 9001;
    font-family: var(--name-font), sans-serif;
}
/* 다크모드: JS로 클래스 추가 방식 대신 data 속성으로 제어 */
#ra0-modal.ra0-modal-dark {
    --modal-bg:           #1e1e1e;
    --modal-text:         #e0e0e0;
    --modal-border:       #383838;
    --modal-input-bg:     #2a2a2a;
    --modal-input-border: #444444;
    --modal-footer-bg:    rgba(0,0,0,0.2);
}
.ra0-modal-hd {
    display: flex; align-items: center; justify-content: space-between;
    padding: 15px 18px 13px;
    border-bottom: 1px solid var(--modal-border, #eeeeee);
    font-weight: bold; font-size: 14px;
    color: var(--modal-text, #333);
}
.ra0-modal-hd button { background:none; border:none; cursor:pointer; font-size:22px; opacity:.45; line-height:1; color: var(--modal-text, #333); }
.ra0-modal-hd button:hover { opacity:1; }
.ra0-modal-bd { padding: 16px 18px; }
.ra0-modal-ft {
    display:flex; gap:8px; justify-content:flex-end;
    padding:12px 18px 15px;
    border-top: 1px solid var(--modal-border, #eeeeee);
    background: var(--modal-footer-bg, transparent);
}

.ra0-field { margin-bottom: 16px; }
.ra0-field > label {
    display:block; font-size:11px; font-weight:bold;
    letter-spacing:.5px; text-transform:uppercase;
    opacity:.65; margin-bottom:5px;
    color: var(--modal-text, #333);
}
.ra0-field input[type="text"], .ra0-field textarea {
    width:100%; padding:8px 10px;
    border: 1px solid var(--modal-input-border, #dddddd);
    border-radius:4px; font-size:13px; box-sizing:border-box;
    font-family: var(--name-font), sans-serif;
    background: var(--modal-input-bg, #ffffff);
    color: var(--modal-text, #333333);
}
.ra0-field input[type="text"]:focus,
.ra0-field textarea:focus {
    outline: none;
    border-color: var(--site-point, #9700ef);
}
.ra0-field textarea { resize:vertical; }
.ra0-field small {
    display:block; margin-top:4px; font-size:11px;
    opacity:.5; line-height:1.5;
    color: var(--modal-text, #333);
}

.ra0-row { display:flex; align-items:center; justify-content:space-between; }
.ra0-row > label { margin-bottom:0; }

.ra0-color-row { display:flex; align-items:center; gap:7px; }
.ra0-color-row input[type="color"] { width:36px; height:34px; border:none; border-radius:4px; cursor:pointer; padding:0; }
.ra0-color-row input[type="text"]  { width:90px; }

.ra0-width-row { display:flex; align-items:center; gap:8px; }
.ra0-width-row input[type="range"] { flex:1; accent-color:var(--site-point,#9700ef); cursor:pointer; }
.ra0-width-row input[type="text"]  { width:58px; text-align:center; }

/* 토글 스위치 */
.ra0-toggle { position:relative; display:inline-block; width:42px; height:24px; cursor:pointer; }
.ra0-toggle input { opacity:0; width:0; height:0; }
.ra0-slider { position:absolute; inset:0; background:#ccc; border-radius:24px; transition:background .25s; }
.ra0-slider::before { content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform .25s; }
.ra0-toggle input:checked + .ra0-slider { background:var(--site-point,#9700ef); }
.ra0-toggle input:checked + .ra0-slider::before { transform:translateX(18px); }

/* 미리보기 */
.ra0-preview { margin-top:7px; border:1px dashed #ddd; border-radius:4px; overflow:hidden; background:#fafafa; text-align:center; }
.ra0-preview img { max-width:100%; max-height:130px; object-fit:contain; display:block; margin:0 auto; }
.ra0-hidden { display:none !important; }

/* 저장/취소 버튼 */
.ra0-save   { padding:8px 20px; background:var(--site-point,#9700ef); color:#fff; border:none; border-radius:4px; cursor:pointer; font-size:13px; font-weight:bold; }
.ra0-save:hover { opacity:.85; }
.ra0-cancel { padding:8px 16px; background:#eee; border:none; border-radius:4px; cursor:pointer; font-size:13px; }
.ra0-cancel:hover { background:#ddd; }
#ra0-msg    { margin-top:8px; font-size:12px; min-height:16px; }
.ra0-ok { color:#2ecc71; } .ra0-err { color:#e74c3c; }

/* ============================================================
   아보카도 에디션 원본 스타일 (그대로 유지)
   ============================================================ */
.board-notice { width:264px; padding:10px; margin:0 auto; text-align:center; box-sizing:border-box; }

.ui-write-box        { margin:10px auto; width:100%; overflow:hidden; }
.ui-write-box textarea { width:100%; min-height:30px; padding:10px; box-sizing:border-box; }
.ui-control {
    display:         flex;
    align-items:     center;
    justify-content: flex-end;
    gap:             8px;
    flex-wrap:       wrap;
}

/* ── 새 입력 카드 디자인 ── */
.ra0-write-card {
    background:      var(--card-bg, rgba(255,255,255,0.88));
    border:          1px solid var(--card-border, rgba(255,255,255,0.65));
    border-radius:   12px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow:      0 4px 20px rgba(0,0,0,0.08);
    overflow:        hidden;
    margin-bottom:   18px;
}
.ra0-write-card textarea {
    width:       100%;
    min-height:  90px;
    padding:     16px;
    border:      none;
    background:  transparent;
    resize:      vertical;
    font-family: var(--name-font), sans-serif;
    font-size:   14px;
    line-height: 1.7;
    box-sizing:  border-box;
    color:       var(--hash-text);
    outline:     none;
    display:     block;
}
.ra0-write-card textarea::placeholder { opacity: .5; }

.ra0-write-footer {
    border-top:      1px solid rgba(0,0,0,0.07);
    padding:         8px 14px;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             8px;
    background:      rgba(0,0,0,0.025);
}
.ra0-write-meta {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         6px;
}
.ra0-write-meta input[type="text"],
.ra0-write-meta input[type="password"] {
    padding:       5px 10px;
    height:        30px;
    border:        1px solid rgba(0,0,0,0.13);
    border-radius: 6px;
    font-size:     12px;
    background:    rgba(255,255,255,0.7);
    color:         var(--hash-text);
    width:         100px;
    box-sizing:    border-box;
    outline:       none;
}
.ra0-write-meta input:focus {
    border-color: var(--site-point, #9700ef);
    background:   rgba(255,255,255,0.95);
}
.ra0-pw-hint {
    font-size:  10px;
    opacity:    .5;
    font-family: var(--name-font), sans-serif;
    white-space: nowrap;
}
.ra0-write-actions {
    display:     flex;
    align-items: center;
    gap:         10px;
    margin-left: auto;
}
@media (max-width: 480px) {
    .ra0-write-footer    { flex-direction: column; align-items: flex-start; }
    .ra0-write-actions   { margin-left: 0; width: 100%; justify-content: flex-end; }
    .ra0-pw-hint         { display: none; }
    .ra0-write-meta input { width: 90px; }
}

.ui-qna-list                   { position:relative; clear:both; margin-top:15px; }
.ui-qna-list .toggle_btn       { padding:0 10px; border:none; background:none; outline:none; cursor:pointer; }
.ui-qna-list .toggle_btn::after {
    display:inline-block; margin-left:6px; margin-bottom:2px; padding:2px;
    border:solid #666; border-width:0 2px 2px 0;
    transform:rotate(45deg); -webkit-transform:rotate(45deg);
    content:""; opacity:.3;
    transition:opacity .3s ease-in-out; -webkit-transition:opacity .3s ease-in-out;
}
.ui-qna-list .toggle_btn:hover::after { opacity:1; }
.ui-qna-list .toggle_btn.open::after  { margin-bottom:0; transform:rotate(-135deg); -webkit-transform:rotate(-135deg); }
.ui-qna-list .toggle_btn + div        { transition:none; }

.ui-qna-list li              { position:relative; margin-bottom:10px; padding:10px; line-height:1.8em; }

/* ── 카드 배경: 배경 이미지 위 가독성 확보 ── */
.ui-qna-list li.theme-box {
    background:        var(--card-bg,     rgba(255,255,255,0.82));
    border:            1px solid var(--card-border, rgba(255,255,255,0.6));
    border-radius:     10px;
    box-shadow:        0 2px 14px rgba(0,0,0,0.10);
    backdrop-filter:   blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color:             var(--hash-text);
}
.ui-qna-list li p            { clear:both; overflow:hidden; margin:0 10px; }
.ui-qna-list li p i          { position:relative; font-style:normal; margin-right:5px; overflow:visible; }

.number_d {
    position:relative; display:block; width:50px; height:10px; border:none;
    background-color:var(--num-color); transform:rotate(-10deg);
    float:left; top:3px; left:-25px;
    color:var(--num-text); padding-top:3px; padding-left:5px;
    font-family:var(--num-font); font-size:16px;
    text-shadow:2px -2px 0px var(--num-shadow); line-height:5px; font-weight:bold;
}
.theme-box { padding:0 10px 10px !important; }

.ui-qna-list li p i.notice_ico        { display:inline-block; overflow:hidden; width:1em; line-height:1; text-indent:-99px; vertical-align:text-bottom; }
.ui-qna-list li p i.notice_ico::before { position:absolute; right:0; content:"\E91A"; font-family:"icon"; text-indent:0; }
.ui-qna-list li p em                   { font-style:normal; font-weight:bold; font-family:var(--name-font); }
.ui-qna-list li p strong a    { display:inline-block; margin-left:10px; font-size:11px; float:right; opacity:.5; }
.ui-qna-list li .qna-content,
.ui-qna-list li .qna-comment-content  { padding:0 10px; }
.ui-qna-list .date                     { float:right; font-size:10px; opacity:.7; }
.ui-qna-list .content                  { margin:3px 0; }

@media all and (max-width:460px) {
    .ui-qna-list .ui-qna-list-password         { position:relative; padding-right:90px; }
    .ui-qna-list .ui-qna-list-password button  { position:absolute; top:0; right:0; width:90px; }
    .ui-qna-list .ui-qna-list-password input   { width:100%; }
}

.ui-qna-list .ui-qna-list-password label        { padding-right:10px; }
.ui-qna-list .ui-qna-list-password input        { position:relative; z-index:1; }
.ui-qna-list .ui-qna-list-password button       { height:30px; line-height:30px; padding:0 25px; margin-left:-5px; border-left-width:0; }

.ui-qna-list .no-data                           { text-align:center; line-height:100px; padding-bottom:50px; }

@media all and (max-width:535px) {
    .ui-control { justify-content: flex-end; }
    .ui-control button { flex-shrink: 0; }
}
@media all and (max-width:435px) {
    .ui-control input[type="text"],
    .ui-control input[type="password"] { display:block; clear:both; width:100%; margin-top:10px; }
    .ui-qna-list { padding:10px 0; }
}
@media all and (max-width:380px) { .ui-qna-list .ui-qna-list-password label { display:none; } }

/* 해시태그 */
.link_hash_tag {
    font-size:12px; position:relative; font-weight:normal;
    padding:2px 8px; color:var(--hash-text);
    background-color:var(--hash-back); border:1px solid var(--hash-back2);
    border-radius:8px; transition-duration:.2s;
}
.link_hash_tag:hover { font-weight:bold; }

.ra0-secret-label {
    display:     inline-flex;
    align-items: center;
    gap:         5px;
    font-size:   13px;
    cursor:      pointer;
    margin-right: 8px;
}

/* 댓글 폼 내 write-box: 상단 마진 제거 */
.ra0-comment-form .ui-write-box { margin: 0; }

/* 댓글 폼 컨트롤 바 */
.ra0-cmt-ctrl { margin-top: 5px; }

/* 댓글 목록 */
.ra0-comment-list { list-style: none; margin: 0; padding: 0; }
.ra0-comment-item {
    padding: 6px 8px;
    border-left: 2px solid var(--site-point, #9700ef);
    margin-bottom: 6px;
    background: rgba(0,0,0,0.03);
    border-radius: 0 4px 4px 0;
}
.ra0-comment-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    margin-bottom: 3px;
    flex-wrap: wrap;
}
.ra0-comment-name  { font-weight: bold; font-family: var(--name-font), sans-serif; }
.ra0-comment-date  { opacity: .6; }
.ra0-comment-del   { margin-left: auto; opacity: .5; font-size: 11px; }
.ra0-comment-del:hover { opacity: 1; }
.ra0-comment-body  { font-size: 13px; line-height: 1.6; color: var(--hash-text); }
.ra0-secret-msg    { font-size: 12px; opacity: .6; }
.ra0-secret-badge  { font-size: 14px; vertical-align: middle; }
.ra0-cmt-field     { height: 28px; padding: 0 8px; border: 1px solid rgba(0,0,0,0.13); border-radius: 4px; font-size: 12px; margin-bottom: 4px; box-sizing: border-box; }
.ra0-cmt-wrap      { margin-top: 8px; }

/* 페이지 */
.ui-page { text-align:center; margin:14px 0 8px; }