@charset "utf-8";

/* 캐릭터 정리 게시판 스킨 chara. 다크/라이트 두 테마를 클래스로 전환 */

.chara-board {
    position: relative;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 26px 24px;
    border-radius: 14px;
    box-sizing: border-box;
}

/* 테마: 다크 */
.chara-board.theme-dark {
    background: #191a1d;
    border: 1px solid #2c2d31;
    color: #c9cacf;
    --chara-accent: #E8E86A;
    --chara-fg: #f0f0ee;
    --chara-fg-dim: #9a9ba2;
    --chara-fg-dimmer: #6d6e75;
    --chara-fg-faint: #55565c;
    --chara-panel: #1e1f23;
    --chara-panel-2: #232428;
    --chara-border: #2c2d31;
    --chara-border-2: #3a3b40;
    --chara-symbol: #E06A8E;
    --chara-badge-bg: #2b2126;
    --chara-badge-fg: #E397B0;
    --chara-badge-border: #3a1d28;
}

/* 테마: 라이트 */
.chara-board.theme-light {
    background: #fff;
    border: 1px solid #e6e6e6;
    color: #444;
    --chara-accent: #8a7a1f;
    --chara-fg: #111;
    --chara-fg-dim: #888;
    --chara-fg-dimmer: #a8a8a8;
    --chara-fg-faint: #c9c9c9;
    --chara-panel: #fff;
    --chara-panel-2: #f6f6f6;
    --chara-border: #ececec;
    --chara-border-2: #ddd;
    --chara-symbol: #C24A6E;
    --chara-badge-bg: #FBEAF0;
    --chara-badge-fg: #8a3a55;
    --chara-badge-border: #F0CBD9;
}

/* 모서리 브래킷 장식 */
.chara-corner { position: absolute; width: 14px; height: 14px; }
.chara-corner.tl { top: 8px; left: 8px; border-top: 1.5px solid var(--chara-fg-faint); border-left: 1.5px solid var(--chara-fg-faint); }
.chara-corner.tr { top: 8px; right: 8px; border-top: 1.5px solid var(--chara-fg-faint); border-right: 1.5px solid var(--chara-fg-faint); }
.chara-corner.bl { bottom: 8px; left: 8px; border-bottom: 1.5px solid var(--chara-fg-faint); border-left: 1.5px solid var(--chara-fg-faint); }
.chara-corner.br { bottom: 8px; right: 8px; border-bottom: 1.5px solid var(--chara-fg-faint); border-right: 1.5px solid var(--chara-fg-faint); }

/* 상단 영역 (1, 2단계 공통) */
.chara-top {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
.chara-board-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--chara-fg);
}
.chara-board-sum { font-size: 0.76rem; color: var(--chara-fg-dimmer); }
.chara-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--chara-panel-2);
    border: 1px solid var(--chara-border);
    color: var(--chara-fg-dim);
    font-size: 0.78rem;
    text-decoration: none;
}
.chara-top-add { margin-left: auto; }

/* 알약/배지 */
.chara-badge {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 5px;
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--chara-badge-bg);
    color: var(--chara-badge-fg);
    border: 1px solid var(--chara-badge-border);
    white-space: nowrap;
}
.chara-symbol { font-style: normal; font-weight: 600; color: var(--chara-symbol); padding: 0 2px; }

/* 두상/전신 이미지 없으면 빈 칸 */
.chara-face {
    display: inline-flex;
    width: 52px;
    height: 52px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--chara-panel-2);
    border: 1px solid var(--chara-border);
    flex-shrink: 0;
}
.chara-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chara-face.empty { background: var(--chara-panel-2); }

.chara-full {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 150px;
    aspect-ratio: 9 / 14;
    margin: 0 auto;
    border-radius: 6px;
    overflow: hidden;
    background: var(--chara-panel-2);
    border: 1px solid var(--chara-border);
}
.chara-full img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 1단계: 분류 카드 */
.chara-cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.chara-cat-card {
    display: block;
    border: 1px solid var(--chara-border);
    border-radius: 10px;
    background: var(--chara-panel);
    overflow: hidden;
    text-decoration: none;
    position: relative;
    transition: border-color 0.15s;
}
.chara-cat-card:hover { border-color: var(--chara-border-2); }
.chara-cat-num {
    position: absolute;
    top: 8px;
    left: 9px;
    font-size: 0.62rem;
    letter-spacing: 1.5px;
    color: var(--chara-fg-dimmer);
    z-index: 1;
}
.chara-cat-thumb {
    display: flex;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--chara-panel-2);
}
.chara-cat-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chara-cat-info { display: block; padding: 11px 12px 12px; }
.chara-cat-name { display: block; font-size: 0.84rem; font-weight: 600; color: var(--chara-fg); }
.chara-cat-sum { display: block; font-size: 0.68rem; color: var(--chara-fg-dimmer); margin-top: 3px; }

.chara-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    border-top: 1px solid var(--chara-border);
    padding-top: 16px;
    margin-top: 22px;
}
.chara-hint { font-size: 0.68rem; color: var(--chara-fg-faint); }

.chara-btn-accent, .chara-btn-outline {
    display: inline-block;
    padding: 7px 18px;
    border-radius: 6px;
    font-size: 0.78rem;
    text-decoration: none;
    cursor: pointer;
}
.chara-btn-accent { background: var(--chara-accent); color: #191a1d; font-weight: 600; border: none; }
.theme-light .chara-btn-accent { color: #fff; }
.chara-btn-outline { background: transparent; border: 1px solid var(--chara-border-2); color: var(--chara-fg-dim); }

/* 2단계: 관계 카드. 2열 그리드 */
.chara-pair-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 8px;
}
.chara-pair-row {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--chara-panel);
    border: 1px solid var(--chara-border);
    border-radius: 10px;
    padding: 13px 16px;
    text-decoration: none;
    transition: border-color 0.15s;
    min-width: 0;
}
.chara-pair-row:hover { border-color: var(--chara-border-2); }
.chara-pair-mid { flex: 1; min-width: 0; }
.chara-pair-names { display: block; font-size: 0.86rem; font-weight: 600; color: var(--chara-fg); }
.chara-pair-catch {
    display: block;
    font-size: 0.74rem;
    color: var(--chara-fg-dim);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chara-pair-sub {
    display: block;
    font-size: 0.7rem;
    color: var(--chara-fg-dimmer);
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 2단계: 세로 두상 카드 */
.chara-solo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.chara-solo-card {
    display: block;
    border: 1px solid var(--chara-border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--chara-panel);
    text-decoration: none;
    transition: border-color 0.15s;
}
.chara-solo-card:hover { border-color: var(--chara-border-2); }
.chara-solo-card .chara-face.solo {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--chara-border);
}
.chara-solo-plate { display: block; padding: 10px 8px 12px; text-align: center; }
.chara-solo-catch { display: block; font-size: 0.68rem; color: var(--chara-fg-dimmer); letter-spacing: 0.2px; }
.chara-solo-name { display: block; font-size: 0.82rem; font-weight: 600; color: var(--chara-fg); margin-top: 2px; }

/* 비어 있을 때 */
.chara-empty {
    padding: 56px 0;
    text-align: center;
    color: var(--chara-fg-dim);
    font-size: 0.88rem;
    line-height: 2;
}
.chara-empty a { color: var(--chara-accent); text-decoration: underline; }

/* 상세: FILE 라벨 */
.chara-view { max-width: 620px; }
.chara-file-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.chara-file-row .chara-file-no { margin-left: auto; }
.chara-file-label { font-size: 0.68rem; letter-spacing: 3px; color: var(--chara-fg-dimmer); }
.chara-file-no { font-size: 0.68rem; letter-spacing: 1px; color: var(--chara-fg-faint); }

/* 페어명, 페어 이미지, 기념일, 디데이 요약 (커플 상세 상단) */
.chara-pair-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 24px;
    border: 1px solid var(--chara-border);
    border-radius: 12px;
    background: var(--chara-panel);
    text-align: center;
    box-sizing: border-box;
    margin-bottom: 18px;
}
.chara-pair-summary.noimg { padding: 18px 24px; }
.chara-pair-summary-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--chara-panel-2);
    border: 1px solid var(--chara-border);
    margin-bottom: 14px;
}
.chara-pair-summary-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chara-pair-summary-name { font-size: 1.05rem; font-weight: 600; color: var(--chara-fg); }
.chara-pair-summary-anniv { display: block; font-size: 0.8rem; color: var(--chara-fg-dim); margin-top: 8px; }
.chara-pair-summary-anniv b { color: var(--chara-accent); font-weight: 600; }

.chara-badge-dday { background: var(--chara-panel-2); color: var(--chara-fg-dim); border: 1px solid var(--chara-border); }

/* 커플 전신 배너 */
.chara-view-catch {
    text-align: center;
    font-size: 0.78rem;
    letter-spacing: 1px;
    color: var(--chara-fg-dim);
    margin-bottom: 14px;
}
.chara-duo-banner { position: relative; margin-bottom: 8px; }
.chara-duo-cols {
    display: flex;
    gap: 1px;
    border: 1px solid var(--chara-border);
    border-radius: 8px;
    overflow: hidden;
}
.chara-duo-col { flex: 1; text-align: center; padding: 16px 12px 14px; background: var(--chara-panel); }
.chara-duo-quote { font-size: 0.72rem; color: var(--chara-fg-dimmer); margin-top: 12px; }
.chara-duo-eng { font-family: var(--font-voice, serif); font-style: italic; font-size: 0.86rem; color: var(--chara-fg-faint); margin-top: 4px; }
.chara-duo-name { font-size: 0.86rem; font-weight: 600; color: var(--chara-fg); margin-top: 1px; }
.chara-duo-symbol {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--chara-board-bg, var(--chara-panel));
    border: 1px solid var(--chara-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--chara-symbol);
    font-size: 0.86rem;
}
.theme-dark .chara-duo-symbol { background: #191a1d; }
.theme-light .chara-duo-symbol { background: #fff; }
.chara-duo-strip {
    text-align: center;
    font-size: 0.74rem;
    color: var(--chara-fg-dim);
    margin: 10px 0 20px;
}

/* 공용 소개 */
.chara-shared { border-top: 1px solid var(--chara-border); padding-top: 16px; margin-bottom: 20px; }
.chara-sec-label { font-size: 0.68rem; font-weight: 600; letter-spacing: 2px; color: var(--chara-fg-faint); margin-bottom: 9px; }
.chara-shared-body { font-size: 0.88rem; line-height: 1.85; color: var(--chara-fg-dim); }

/* 캐릭터 전환 */
.chara-switch { display: flex; gap: 6px; margin-bottom: 16px; }
.chara-switch-btn {
    flex: 1;
    font-size: 0.78rem;
    padding: 7px 0;
    border-radius: 6px;
    border: 1px solid var(--chara-border-2);
    background: transparent;
    color: var(--chara-fg-dim);
    cursor: pointer;
    transition: all 0.15s;
}
.chara-switch-btn.active { background: var(--chara-accent); border-color: var(--chara-accent); color: #191a1d; font-weight: 600; }
.theme-light .chara-switch-btn.active { color: #fff; }

/* 시스템창 */
.chara-window { border: 1px solid var(--chara-border); border-radius: 10px; background: var(--chara-panel); padding: 18px 18px 6px; margin-bottom: 18px; }
.chara-window.hidden { display: none; }
.chara-win-head { display: flex; gap: 16px; margin-bottom: 4px; }
.chara-face.win { width: 88px; height: 108px; border-radius: 8px; }
.chara-win-headinfo { flex: 1; min-width: 0; padding-top: 2px; }
.chara-win-catch { font-size: 0.7rem; color: var(--chara-fg-dimmer); letter-spacing: 0.5px; }
.chara-win-namerow { display: flex; align-items: baseline; gap: 8px; margin-top: 3px; flex-wrap: wrap; }
.chara-win-name { font-size: 1.05rem; font-weight: 600; color: var(--chara-fg); }
.chara-win-eng { font-family: var(--font-voice, serif); font-style: italic; font-size: 0.8rem; color: var(--chara-fg-faint); }
.chara-win-quote { font-size: 0.76rem; color: var(--chara-fg-dim); margin-top: 5px; }
.chara-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.chara-chip { font-size: 0.7rem; background: var(--chara-panel-2); border: 1px solid var(--chara-border); border-radius: 5px; padding: 3px 9px; color: var(--chara-fg-dim); }
.chara-chip .lbl { color: var(--chara-fg-faint); font-size: 0.62rem; }

/* 탭 */
.chara-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--chara-border); margin-top: 14px; overflow-x: auto; overflow-y: hidden; }
.chara-tab {
    font-size: 0.78rem;
    padding: 8px 13px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color: var(--chara-fg-dimmer);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}
.chara-tab.active { color: var(--chara-accent); border-bottom-color: var(--chara-accent); font-weight: 600; }

.chara-panels {
    padding: 15px 2px 12px;
    height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
}
.chara-panels::-webkit-scrollbar { width: 6px; }
.chara-panels::-webkit-scrollbar-track { background: transparent; }
.chara-panels::-webkit-scrollbar-thumb { background: var(--chara-border-2); border-radius: 3px; }
.chara-panels::-webkit-scrollbar-thumb:hover { background: var(--chara-fg-dimmer); }
.chara-panel { display: none; }
.chara-panel.active { display: block; }
.chara-panel-text { font-size: 0.85rem; line-height: 1.9; color: var(--chara-fg-dim); white-space: pre-line; }

/* 로그 */
.chara-log { border-bottom: 1px dashed var(--chara-border); }
.chara-log:last-child { border-bottom: none; }
.chara-log-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    width: 100%;
    padding: 9px 2px;
    background: none;
    border: none;
    text-align: left;
    text-decoration: none;
    cursor: default;
    font: inherit;
    color: inherit;
}
.chara-log-row.link, .chara-log-row.toggle { cursor: pointer; }
.chara-log-date { font-size: 0.7rem; color: var(--chara-fg-dimmer); white-space: nowrap; }
.chara-log-title { font-size: 0.82rem; color: var(--chara-fg-dim); flex: 1; }
.chara-log-mark { font-size: 0.7rem; color: var(--chara-fg-faint); transition: transform 0.15s; }
.chara-log-mark.flip { transform: rotate(180deg); }
.chara-log-body {
    display: none;
    font-size: 0.8rem;
    line-height: 1.8;
    color: var(--chara-fg-dim);
    padding: 2px 2px 12px 2px;
}
.chara-log-body.open { display: block; }

/* 스테이터스 */
.chara-stat { display: flex; align-items: center; gap: 12px; padding: 6px 2px; }
.chara-stat-name { width: 52px; font-size: 0.76rem; color: var(--chara-fg-dim); flex-shrink: 0; }
.chara-stat-bar { flex: 1; height: 6px; background: var(--chara-panel-2); border-radius: 3px; overflow: hidden; }
.chara-stat-bar span { display: block; height: 100%; background: var(--chara-accent); border-radius: 3px; }
.chara-stat-val { width: 58px; text-align: right; font-size: 0.7rem; color: var(--chara-fg-dimmer); flex-shrink: 0; }

/* 하단 버튼 */
.chara-view-foot { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--chara-border); padding-top: 14px; }
.chara-view-foot-right { display: flex; gap: 6px; }
.chara-btn {
    display: inline-block;
    padding: 7px 18px;
    border: 1px solid var(--chara-border-2);
    border-radius: 999px;
    background: transparent;
    color: var(--chara-fg-dim);
    font-size: 0.76rem;
    text-decoration: none;
    transition: all 0.15s;
}
.chara-btn:hover { border-color: var(--chara-accent); color: var(--chara-accent); }
.chara-btn.danger:hover { border-color: #c0392b; color: #c0392b; }

/* 글쓰기 폼 */
.chara-form { max-width: 640px; }
.chara-form-title { margin: 0 0 20px; padding-bottom: 12px; border-bottom: 2px solid var(--chara-accent); font-size: 1.05rem; font-weight: 600; color: var(--chara-fg); }
.chara-field { margin-bottom: 16px; }
.chara-field label { display: block; margin-bottom: 6px; font-size: 0.8rem; font-weight: 600; color: var(--chara-fg-dim); }
.chara-field label .req { color: var(--chara-accent); }
.chara-field label .opt { font-weight: 400; color: var(--chara-fg-faint); font-size: 0.72rem; }
.chara-field .frm_input, .chara-form select.frm_input { width: 100%; box-sizing: border-box; background: var(--chara-panel-2); border: 1px solid var(--chara-border-2); color: var(--chara-fg); }
.chara-field textarea.frm_input { resize: vertical; line-height: 1.7; }
.chara-field .desc { margin-top: 5px; font-size: 0.7rem; color: var(--chara-fg-faint); }
.chara-field-row { display: flex; gap: 12px; }
.chara-field-row .grow { flex: 1; }
.chara-field-row .narrow { width: 110px; flex-shrink: 0; }

.chara-img-row { display: flex; gap: 10px; align-items: flex-start; }
.chara-img-row .frm_input { flex: 1; }
.chara-img-preview {
    display: flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 8px; overflow: hidden; flex-shrink: 0;
    background: var(--chara-panel-2); border: 1px solid var(--chara-border);
}
.chara-img-preview.tall { width: 42px; height: 66px; }
.chara-img-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }

.chara-type-toggle { display: flex; gap: 8px; }
.chara-rtype { flex: 1; }
.chara-rtype input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.chara-rtype .box {
    display: block; text-align: center; font-size: 0.82rem; padding: 9px 0;
    border: 1px solid var(--chara-border-2); border-radius: 8px; background: var(--chara-panel-2);
    color: var(--chara-fg-dim); cursor: pointer; transition: all 0.12s;
}
.chara-rtype input[type="radio"]:checked + .box { border-color: var(--chara-accent); color: var(--chara-accent); font-weight: 600; }

.chara-pair-shared { border: 1px solid var(--chara-border); border-radius: 10px; padding: 16px 16px 4px; margin-bottom: 18px; background: var(--chara-panel); }

.chara-char-card { border: 1px solid var(--chara-border); border-radius: 10px; padding: 18px 16px 6px; margin-bottom: 16px; background: var(--chara-panel); }
.chara-char-card-title { font-size: 0.78rem; font-weight: 600; color: var(--chara-accent); letter-spacing: 1px; margin-bottom: 14px; }

.chara-chip-inputs { display: flex; flex-direction: column; gap: 6px; }
.chara-chip-pair { display: flex; gap: 8px; }
.chara-chip-pair input:first-child { width: 90px; flex-shrink: 0; }

.chara-log-inputs, .chara-stat-inputs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.chara-log-input-row {
    display: grid;
    grid-template-columns: 100px 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 6px;
    padding: 10px;
    border: 1px solid var(--chara-border);
    border-radius: 8px;
    background: var(--chara-panel-2);
    position: relative;
}
.chara-log-input-row .lg-body { grid-column: 1 / -1; }
.chara-stat-input-row { display: flex; gap: 8px; align-items: center; }
.chara-stat-input-row .st-name { flex: 1; }
.chara-stat-input-row .st-val { width: 70px; }
.chara-del-btn {
    font-size: 0.7rem; padding: 4px 10px; border-radius: 5px;
    border: 1px solid var(--chara-border-2); background: transparent; color: var(--chara-fg-dimmer); cursor: pointer;
}
.chara-del-btn:hover { color: #c0392b; border-color: #c0392b; }
.chara-log-input-row .chara-del-btn { grid-column: 1 / -1; justify-self: end; width: fit-content; }

.chara-add-btn {
    font-size: 0.74rem; padding: 6px 14px; border-radius: 6px;
    border: 1px dashed var(--chara-border-2); background: transparent; color: var(--chara-fg-dim); cursor: pointer;
}
.chara-add-btn:hover { border-color: var(--chara-accent); color: var(--chara-accent); }

.chara-form-btns { display: flex; justify-content: center; gap: 8px; margin: 24px 0 6px; }
.chara-form-btns a, .chara-form-btns button {
    display: inline-block; padding: 9px 26px; border-radius: 999px; border: 1px solid var(--chara-border-2);
    background: transparent; color: var(--chara-fg-dim); font-size: 0.84rem; text-decoration: none; cursor: pointer;
}
.chara-form-btns button.point { background: var(--chara-accent); border-color: var(--chara-accent); color: #191a1d; font-weight: 600; }
.theme-light .chara-form-btns button.point { color: #fff; }

/* 모바일 */
@media (max-width: 640px) {
    .chara-board { padding: 20px 14px; }
    .chara-cat-grid { grid-template-columns: repeat(2, 1fr); }
    .chara-pair-list { grid-template-columns: 1fr; }
    .chara-solo-grid { grid-template-columns: repeat(2, 1fr); }
    .chara-duo-cols { flex-direction: column; }
    .chara-field-row { flex-direction: column; gap: 0; }
    .chara-field-row .narrow { width: 100%; }
    .chara-win-head { gap: 12px; }
    .chara-face.win { width: 68px; height: 84px; }
    .chara-log-input-row { grid-template-columns: 1fr 1fr; }
}