@charset "utf-8";

/* ============================================================
   오에카키 페인팅 게시판 스킨 - style.css
   라공(ra0)에디션 CSS 변수 기반 색상 연동
   핵심 변수 (라공 메인 CSS에서 전역 정의):
     --primary-color      : 포인트/버튼 컬러
     --card-bg-color      : 카드 배경
     --card-border-color  : 카드 테두리
     --card-border-radius : 카드 모서리
     --content-font-color : 본문 글자색
     --text-muted         : 보조 글자색
     --light-bg-color     : 연한 배경
     --bg-color           : 페이지 배경
     --danger-color       : 위험/삭제 버튼
     --btn-secondary-bg   : 보조 버튼 배경
     --btn-secondary-text : 보조 버튼 글자
     --border-light       : 연한 테두리
   ============================================================ */

/* ── 공통 초기화 ───────────────────────────────── */
* { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }

/* ── 버튼: 라공 ra0_ui_btn 스타일 참조 ──────────
   우리 .skin-btn은 라공 변수 기반으로 재정의      */
.skin-btn {
    display: inline-block;
    padding: 0 10px;
    height: 26px;
    line-height: 24px;
    font-size: 11px;
    border: 1px solid var(--card-border-color, #e0d8d0);
    /* 라공 서브 버튼 색상 사용 */
    background: var(--btn-secondary-bg, var(--light-bg-color, #f5f0eb));
    color: var(--btn-secondary-text, var(--text-muted, #666));
    border-radius: 4px;
    margin: 0 2px;
    cursor: pointer;
    vertical-align: middle;
    transition: all .15s;
    white-space: nowrap;
}
.skin-btn:hover {
    background: var(--btn-primary-bg, var(--primary-color, #c06060));
    color: var(--btn-primary-text, var(--white-color, #fff));
    border-color: var(--btn-primary-bg, var(--primary-color, #c06060));
}
.skin-btn.point {
    background: var(--btn-primary-bg, var(--primary-color, #c06060));
    color: var(--btn-primary-text, var(--white-color, #fff));
    border-color: var(--btn-primary-bg, var(--primary-color, #c06060));
    font-weight: bold;
}
.skin-btn.point:hover {
    background: var(--btn-primary-hover-bg, var(--primary-color, #a04848));
    border-color: var(--btn-primary-hover-bg, var(--primary-color, #a04848));
}
.skin-btn.continue-btn {
    background: var(--btn-secondary-bg, var(--primary-color, #c06060));
    color: var(--btn-secondary-text, var(--white-color, #fff));
    border-color: var(--card-border-color, #ddd);
}
.skin-btn.continue-btn:hover {
    background: var(--btn-primary-bg, var(--primary-color, #c06060));
    color: var(--btn-primary-text, #fff);
    border-color: var(--btn-primary-bg, var(--primary-color, #c06060));
}
.skin-btn.mod {
    color: var(--content-font-color, #333);
    border-color: var(--card-border-color, #ccc);
}
.skin-btn.mod:hover {
    background: var(--primary-color, #6a8fa0);
    color: var(--white-color, #fff);
    border-color: var(--primary-color, #6a8fa0);
}
.skin-btn.del {
    color: var(--danger-color, #c06060);
    border-color: var(--card-border-color, #ccc);
}
.skin-btn.del:hover {
    background: var(--danger-color, #c06060);
    color: var(--white-color, #fff);
}
.skin-btn.admin {
    background: var(--danger-color, #c06060);
    color: var(--white-color, #fff);
}

/* ── 상단 버튼 바 ──────────────────────────────── */
.ui-mmb-button {
    text-align: center;
    padding: 10px 0 8px;
}

/* ── 카테고리 네비 ─────────────────────────────── */
.board-notice-box {
    margin: 0 0 12px;
    padding: 10px 14px;
    background: var(--light-bg-color, #f5f0eb);
    border: 1px solid var(--card-border-color, #e0d8d0);
    border-radius: var(--card-border-radius, 6px);
    font-size: 12px;
    color: var(--text-muted, #999);
}
.board-category { text-align: center; margin-bottom: 12px; }
.board-category ul { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; justify-content:center; gap:4px; }

/* ── 리스트 레이아웃 ───────────────────────────── */
#load_log_board { padding: 0 0 40px; width: 100%; box-sizing: border-box; }
#log_list       { margin-top: 16px; }

#log_list .empty_list {
    text-align: center;
    padding: 60px 0;
    color: var(--text-muted, #999);
}

#log_list .item { margin-bottom: 20px; }

#log_list .item-inner {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;
    background: var(--card-bg-color, #fff);
    border: 1px solid var(--card-border-color, #e0d8d0);
    border-radius: var(--card-border-radius, 6px);
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,.06);
    transition: box-shadow 0.2s;
}
#log_list .item-inner:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.10);
}

/* 이미지 영역 - 카드 폭 300px 고정 */
#log_list .item .ui-pic {
    flex: 0 0 300px;
    border-right: 1px solid var(--card-border-color, #e0d8d0);
    background: var(--card-bg-color, #fff);
    display: flex;
    flex-direction: column;
}
/* pic-data: 너비 300px 고정, 높이 비율 자동 */
.pic-data img {
    width: 100%;
    height: auto;        /* 세로는 비율에 맞게 자동 */
    display: block;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
}

/* 헤더 */
#log_list .item .pic-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 8px;
    height: 30px;
    background: var(--card-bg-color, #fff);
    border-bottom: 1px solid var(--card-border-color, #e0d8d0);
    font-size: 10px;
}
.no-box {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-muted, #999);
    font-weight: bold;
}
.ico-category {
    display: inline-block;
    padding: 1px 5px;
    background: var(--light-bg-color, #f5f0eb);
    border: 1px solid var(--card-border-color, #e0d8d0);
    border-radius: 2px;
    font-size: 10px;
    color: var(--text-muted, #999);
}
.btn-box .skin-btn {
    height: 20px;
    line-height: 18px;
    padding: 0 6px;
    font-size: 10px;
}

/* 댓글 영역 */
#log_list .item .ui-comment {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
}

.item-comment-box {
    flex: 1;
    overflow-y: auto;
    max-height: 420px;
    padding: 8px;
}
.item-comment-form-box {
    border-top: 1px solid var(--card-border-color, #e0d8d0);
    padding: 6px 8px;
    background: var(--card-bg-color, #fff);
}

/* ── 게시글 본문 영역 ──────────────────────────── */
.log-post-info {
    padding: 8px 6px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--card-border-color, #e0d8d0);
}
.post-author-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}
.log-content {
    font-size: 13px;
    line-height: 1.6;
    color: var(--content-font-color, #333);
    word-break: break-all;
}
.log-content a { color: var(--primary-color, #c06060); }
.log-content a.tag-chip { color: var(--btn-primary-text, #fff); } /* tag-chip 색 유지 */

/* ── 댓글 아이템 ───────────────────────────────── */
.item-comment {
    margin-bottom: 8px;
    padding: 8px 6px;
    border-bottom: 1px solid var(--card-border-color, #e0d8d0);
    font-size: 12px;
}
.item-comment:last-child { border-bottom: none; }

.co-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
    gap: 6px;
}
/* 이름 (댓글/게시글 공통) */
.co-name, .post-author { font-size: 12px; font-weight: bold; color: var(--content-font-color, #333); }
.co-name.owner-name { color: var(--primary-color, #c06060); }
/* 날짜 (댓글/게시글 공통) */
.co-date, .post-date { font-size: 10px; color: var(--text-muted, #999); white-space: nowrap; }
.co-header .ip-addr { font-size: 10px; color: var(--text-muted, #999); flex-shrink: 0; }
.co-content { color: var(--content-font-color, #333); word-break: break-all; }
.co-content a { color: var(--primary-color, #c06060); }
.co-content a.tag-chip,
.co-text a.tag-chip { color: var(--btn-primary-text, #fff) !important; }
.co-text { word-break: break-all; }

.co-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 5px;
    padding-top: 3px;
    border-top: 1px solid var(--border-light, #eee);
}
/* 삭제/수정: 본문보다 작고 흐린 텍스트 */
.co-footer .del,
.co-footer .mod,
.co-footer .mod_comment {
    font-size: 10px;
    color: var(--text-muted, #bbb);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    text-decoration: none;
    opacity: 0.6;
    transition: opacity .15s, color .15s;
}
.co-footer .del:hover  { opacity: 1; color: var(--danger-color, #c06060); }
.co-footer .mod:hover,
.co-footer .mod_comment:hover { opacity: 1; color: var(--primary-color, #5a8fa0); }

/* 수정 영역 */
.modify_area textarea {
    width: 100%;
    border: 1px solid var(--card-border-color, #ddd);
    border-radius: 3px;
    padding: 4px 6px;
    font-size: 12px;
    resize: none;
    height: 50px;
    background: var(--card-bg-color, #fff);
    color: var(--content-font-color, #333);
}

/* ── 댓글 작성 폼 ──────────────────────────────── */
.bo_vc_w { display: block; }
.input-area {
    display: flex;
    gap: 4px;
    align-items: flex-end;
}
.input-area textarea {
    flex: 1;
    border: 1px solid var(--card-border-color, #ddd);
    border-radius: 3px;
    padding: 4px 6px;
    font-size: 12px;
    resize: none;
    height: 34px;
    font-family: inherit;
    background: var(--card-bg-color, #fff);
    color: var(--content-font-color, #333);
}
.input-area textarea:focus { border-color: var(--primary-color, #c06060); outline: none; }
.ui-comment-submit {
    height: 34px;
    padding: 0 10px;
    background: var(--primary-color, #c06060);
    color: var(--white-color, #fff);
    border: none;
    border-radius: 3px;
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
}
.ui-comment-submit:hover { opacity: 0.85; }

/* ── 페이지네이션 ──────────────────────────────── */
.ui-paging { text-align: center; margin: 16px 0 0; }


/* ── oEmbed ─────────────────────────────────────── */
.oembed-wrap {
    position: relative; width: 100%; padding-top: 56.25%;
    margin: 8px 0; border-radius: var(--card-border-radius, 6px);
    overflow: hidden; background: #000;
}
.oembed-wrap iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:0; }

/* ── 라이트박스 ────────────────────────────────── */
#oekaki-lightbox {
    display: none;
    position: fixed; top:0; left:0; width:100%; height:100%;
    background: rgba(0,0,0,.85);
    z-index: 99999;
    align-items: center; justify-content: center;
    cursor: zoom-out;
}
#oekaki-lightbox.open { display: flex; }
#oekaki-lightbox img {
    max-width: 95vw; max-height: 92vh;
    object-fit: contain; border-radius: 4px;
    image-rendering: pixelated; cursor: default;
    box-shadow: 0 4px 32px rgba(0,0,0,.6);
}
#oekaki-lightbox-close {
    position: absolute; top:16px; right:20px;
    color: #fff; font-size: 28px; cursor: pointer;
    line-height:1; text-shadow: 0 0 8px rgba(0,0,0,.8);
}

/* ── 이미지 토글 ────────────────────────────────── */
.img-toggle-btn {
    text-align: center;
    padding: 5px 10px;
    background: var(--light-bg-color, #f5f0eb);
    border: none;
    border-top: 1px solid var(--card-border-color, #e0d8d0);
    width: 100%;
    cursor: pointer;
    font-size: 11px;
    color: var(--text-muted, #999);
    transition: background 0.15s;
}
.img-toggle-btn:hover {
    background: var(--card-border-color, #e0d8d0);
    color: var(--content-font-color, #333);
}

/* ── 이어그리기 알림 ────────────────────────────── */
.continue-notice {
    margin: 0 auto 8px;
    padding: 8px 12px;
    background: var(--light-bg-color, #e8f0e8);
    border: 1px solid var(--card-border-color, #b8d4b8);
    border-radius: var(--card-border-radius, 6px);
    font-size: 11px;
    color: var(--content-font-color, #4a6a4a);
    text-align: center;
}

/* ── 오에카키 캔버스 UI ──────────────────────────── */
.oekaki-wrap {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    background: var(--light-bg-color, #f5f0eb);
    border: 1px solid var(--card-border-color, #e0d8d0);
    border-radius: var(--card-border-radius, 6px);
    padding: 10px;
    flex-wrap: wrap;
    margin: 0 auto 12px;
}

/* 툴바 버튼 */
.oekaki-toolbar { display:flex; flex-direction:column; gap:3px; flex-shrink:0; max-height:calc(100vh - 120px); overflow-y:auto; overflow-x:hidden; }
.tool-btn {
    width:32px; height:32px;
    display:flex; align-items:center; justify-content:center;
    border: 1px solid var(--card-border-color, #e0d8d0);
    border-radius: 4px;
    background: var(--card-bg-color, #fff);
    cursor: pointer;
    transition: all .12s;
    padding: 5px;
}
.tool-btn svg { width:18px; height:18px; fill:var(--text-muted, #aaa); }
.tool-btn:hover { background:var(--light-bg-color, #f0ebe5); border-color:var(--primary-color, #c06060); }
.tool-btn:hover svg { fill:var(--primary-color, #c06060); }
.tool-btn.active { background:var(--primary-color, #c06060); border-color:var(--primary-color, #c06060); }
.tool-btn.active svg { fill:#fff; }

/* 캔버스 */
.oekaki-canvas-area { flex-shrink:0; }
.canvas-size-bar {
    display:flex; align-items:center; gap:6px;
    margin-bottom:5px; font-size:11px;
    color: var(--text-muted, #999);
}
.canvas-size-bar input, .canvas-size-bar select {
    border: 1px solid var(--card-border-color, #ddd);
    border-radius: 3px; padding: 1px 4px; font-size: 11px;
    background: var(--card-bg-color, #fff);
    color: var(--content-font-color, #333);
}
.canvas-stack {
    position:relative;
    border: 1px solid var(--card-border-color, #ddd);
    overflow:hidden; background:#fff;
    touch-action:none; cursor:crosshair;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0,0,0,.1);
}
.canvas-stack canvas { position:absolute; top:0; left:0; display:block; }

/* 텍스트 입력 */
#textInputArea { display:none; position:absolute; z-index:10000; }
#realTextInput {
    background:transparent;
    border:1px dashed var(--primary-color, #c06060);
    color:inherit; font-size:14px;
    min-width:80px; min-height:28px;
    resize:both; padding:2px 4px; outline:none;
}
#textConfirmBtn {
    display:block; margin-top:2px;
    padding:1px 8px; font-size:10px;
    background:var(--card-bg-color, #fff);
    border:1px solid var(--card-border-color, #ddd);
    border-radius:2px; cursor:pointer;
}

/* 패널 */
.oekaki-panel { display:flex; flex-direction:column; gap:8px; min-width:130px; }
.panel-box {
    background:var(--card-bg-color, #fff);
    border:1px solid var(--card-border-color, #e0d8d0);
    border-radius:4px; padding:8px;
}
.panel-box .panel-title {
    font-size:10px; color:var(--text-muted, #aaa);
    font-weight:bold; margin-bottom:5px;
    text-transform:uppercase; letter-spacing:.04em;
}

/* 색상 피커 */
.color-picker-row { margin-bottom:5px; }
.color-picker-row input[type=color] {
    width:100%; height:30px;
    border:1px solid var(--card-border-color, #ddd);
    border-radius:3px; padding:1px 3px; cursor:pointer; background:none;
}
.mini-palette { display:flex; flex-wrap:wrap; gap:3px; }
.p-chip {
    width:18px; height:18px; border-radius:2px;
    border:1px solid rgba(0,0,0,.15); cursor:pointer; transition:transform .1s;
}
.p-chip:hover { transform:scale(1.2); border-color:var(--primary-color, #c06060); }

/* 슬라이더 */
.control-row { display:flex; flex-direction:column; gap:2px; margin-bottom:5px; }
.control-row label { font-size:10px; color:var(--text-muted, #aaa); }
.control-row input[type=range] { width:100%; accent-color:var(--primary-color, #c06060); height:4px; }

/* 폰트 선택 */
.font-select {
    width:100%; border:1px solid var(--card-border-color, #ddd);
    border-radius:3px; padding:2px 4px; font-size:11px;
    background:var(--card-bg-color, #fff); color:var(--content-font-color, #333);
}

/* 레이어 */
.layer-list { list-style:none; padding:0; margin:0; max-height:100px; overflow-y:auto; }
.layer-item {
    display:flex; align-items:center; justify-content:space-between;
    padding:3px 5px; border-radius:3px; font-size:10px;
    cursor:pointer; margin-bottom:2px;
    background:var(--light-bg-color, #f5f5f5);
    border:1px solid transparent;
    color:var(--content-font-color, #333);
}
.layer-item.active {
    background:var(--card-bg-color, #fff);
    border-color:var(--primary-color, #c06060);
}
.layer-btn {
    width:100%; padding:2px 4px;
    background:var(--light-bg-color, #f5f0eb);
    border:1px solid var(--card-border-color, #ddd);
    border-radius:3px; font-size:10px; cursor:pointer;
    color:var(--content-font-color, #333);
}
.layer-btn:hover { background:var(--primary-color, #c06060); color:#fff; border-color:var(--primary-color, #c06060); }
.l-del { background:none; border:none; color:var(--text-muted, #aaa); font-size:11px; cursor:pointer; padding:0 2px; }
.l-del:hover { color:var(--danger-color, #c06060); }

/* 액션 버튼 */
.action-row { display:flex; gap:4px; }
.btn-simple {
    flex:1; padding:4px 0;
    border:1px solid var(--card-border-color, #ddd);
    border-radius:3px; background:var(--card-bg-color, #fff);
    font-size:10px; cursor:pointer; color:var(--text-muted, #999);
}
.btn-simple:hover { background:var(--primary-color, #c06060); color:#fff; border-color:var(--primary-color, #c06060); }

/* 업로드 */
.upload-alt-bar {
    margin: 0 auto 8px;
    display:flex; gap:6px; flex-wrap:wrap; align-items:center;
    font-size:11px; color:var(--text-muted, #999);
}
.normal-upload-wrap {
    margin: 0 auto 10px;
    padding: 10px;
    background: var(--light-bg-color, #f5f0eb);
    border: 1px solid var(--card-border-color, #e0d8d0);
    border-radius: var(--card-border-radius, 6px);
}
.normal-upload-wrap input[type=file] { font-size:12px; }
.normal-upload-wrap p { font-size:11px; color:var(--text-muted, #999); margin:4px 0 0; }
.normal-upload-wrap label { font-size:12px; font-weight:bold; display:block; margin-bottom:4px; color:var(--content-font-color, #333); }

/* 비회원 입력 */
.guest-input-wrap { margin: 0 auto 8px; display:flex; gap:6px; }
.guest-input-wrap .frm_input {
    flex:1; height:30px;
    border:1px solid var(--card-border-color, #ddd);
    border-radius:3px; padding:0 8px; font-size:12px;
    background:var(--card-bg-color, #fff); color:var(--content-font-color, #333);
}

/* 본문 입력 */
.comments { margin: 0 auto 8px; }
.comments textarea {
    width:100%;
    border:1px solid var(--card-border-color, #ddd);
    border-radius:var(--card-border-radius, 6px);
    padding:8px; font-size:13px; resize:vertical;
    font-family:inherit;
    background:var(--card-bg-color, #fff);
    color:var(--content-font-color, #333);
}
.comments textarea:focus { border-color:var(--primary-color, #c06060); outline:none; }

/* 접기 */
.img-toggle-hide { margin-top:0; }

/* ── 반응형 ─────────────────────────────────────── */
@media screen and (max-width: 680px) {
    #log_list .item-inner { flex-direction: column; flex-wrap: wrap; }
    #log_list .item .ui-pic { width:100% !important; flex:none; border-right:none; border-bottom:1px solid var(--card-border-color, #e0d8d0); }
    #log_list .item .ui-comment { min-width:0; }
    .item-comment-box { max-height: 200px; }
    .oekaki-wrap { flex-direction:column; align-items:center; padding:8px; }
    .oekaki-toolbar { flex-direction:row; flex-wrap:wrap; justify-content:center; width:100%; }
    .oekaki-canvas-area { width:100%; overflow-x:auto; }
    .oekaki-panel { width:100%; flex-direction:row; flex-wrap:wrap; }
    .panel-box { flex:1; min-width:120px; }
}

/* 댓글 접기 버튼 */
a.fold-toggle {
    display: inline-block;
    font-size: 10px;
    color: var(--btn-secondary-text, var(--text-muted, #666));
    margin-top: 3px;
    cursor: pointer;
    text-decoration: none;
    padding: 1px 7px;
    border: 1px solid var(--card-border-color, #ddd);
    border-radius: 3px;
    background: var(--btn-secondary-bg, var(--light-bg-color, #f5f0eb));
    vertical-align: middle;
    transition: all .15s;
}
a.fold-toggle:hover {
    background: var(--btn-primary-bg, var(--primary-color, #c06060));
    color: var(--btn-primary-text, #fff);
    border-color: var(--btn-primary-bg, var(--primary-color, #c06060));
}

/* ── 댓글 입력 메타 줄 (이름/비번/비밀/접기) ── */
.comment-meta-row {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.comment-meta-row .frm_input {
    flex: 1;
    min-width: 80px;
    height: 28px;
    border: 1px solid var(--card-border-color, #ddd);
    border-radius: 3px;
    padding: 0 6px;
    font-size: 11px;
    background: var(--card-bg-color, #fff);
    color: var(--content-font-color, #333);
}
.comment-check-label {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    font-size: 11px;
    color: var(--btn-secondary-text, var(--text-muted, #666));
    padding: 3px 8px;
    border: 1px solid var(--card-border-color, #ddd);
    border-radius: 3px;
    background: var(--btn-secondary-bg, var(--light-bg-color, #f5f0eb));
    white-space: nowrap;
    user-select: none;
    transition: all .15s;
}
.comment-check-label:hover {
    background: var(--btn-primary-bg, var(--primary-color, #c06060));
    color: var(--btn-primary-text, #fff);
    border-color: var(--btn-primary-bg, var(--primary-color, #c06060));
}
.comment-check-label input[type=checkbox]:checked + span {
    font-weight: bold;
}
.comment-check-label input[type=checkbox] { margin: 0; }

/* ── 트위터 임베드 ── */
.twitter-embed-wrap {
    margin: 6px 0;
    max-width: 100%;
    overflow: hidden;
}
.twitter-tweet {
    margin: 0 !important;
}

/* ── 해시태그 ── */
.post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 4px;
}
.tag-chip {
    display: inline-block;
    padding: 2px 10px;
    background: var(--btn-primary-bg, var(--primary-color, #5a8fa0));
    border: none;
    border-radius: 20px;
    font-size: 11px;
    color: var(--btn-primary-text, #fff);
    text-decoration: none;
    transition: opacity .15s;
    font-weight: 500;
}
.tag-chip:hover { opacity: 0.8; color: var(--btn-primary-text, #fff); }
.tag-chip.active {
    background: var(--btn-secondary-bg, #444);
    color: var(--btn-secondary-text, #fff);
    font-weight: bold;
}
.tag-filter-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    vertical-align: middle;
}

/* ── 비밀 댓글 잠금 아이콘 ─────────────────────────────── */
/* 미인증: 🔒 클릭 → 비밀번호 확인 */
a.secret-lock-btn {
    display: inline-block;
    font-size: 18px;
    line-height: 1;
    text-decoration: none;
    color: var(--text-muted, #aaa);
    opacity: 0.7;
    vertical-align: middle;
    transition: opacity .15s, transform .15s, color .15s;
    cursor: pointer;
}
a.secret-lock-btn:hover {
    opacity: 1;
    transform: scale(1.15);
    color: var(--primary-color, #c06060);
}
/* 인증됨: 내용 앞 작은 🔒 표시 */
.secret-badge {
    font-size: 12px;
    line-height: 1;
    vertical-align: middle;
    margin-right: 3px;
    opacity: 0.55;
    user-select: none;
}