/* ===================================================================
 * 땅튜브 커스텀 이모티콘
 * =================================================================== */

:root {
    --ddt-emo-bg: #1f2023;
    --ddt-emo-bg-soft: #2a2b30;
    --ddt-emo-border: var(--fs-border, #3a3b40);
    --ddt-emo-hover: #2f3035;
    --ddt-emo-active: #3a3b40;
    --ddt-emo-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
    --ddt-emo-text: #e5e7eb;
    --ddt-emo-muted: #9ca3af;
}

/* -------------------------------------------------------------------
 * 인라인 이모티콘 — 댓글 본문 출력
 * ------------------------------------------------------------------- */
.ddt-emo {
    display: inline-block;
    height: 1.6em;
    width: auto;
    vertical-align: -0.4em;
    margin: 0 4px;
    user-select: none;
    pointer-events: none;
    border-radius: .2em;
}

/* -------------------------------------------------------------------
 * contenteditable 에디터 (textarea 대체)
 * ------------------------------------------------------------------- */
.ddt-emo-editor {
    flex: 1;
    min-height: 72px;
    max-height: 200px;
    overflow-y: auto;
    padding: 10px 12px;
    background: var(--fs-bg, #1f2023);
    color: var(--fs-text, #e5e7eb);
    font-size: 14px;
    line-height: 1.6;
    word-break: break-word;
    white-space: pre-wrap;
    outline: none;
    cursor: text;
}

/* placeholder */
.ddt-emo-editor:empty::before {
    content: attr(data-placeholder);
    color: var(--ddt-emo-muted);
    pointer-events: none;
}

/* 에디터 안 인라인 이모티콘 */
.ddt-emo-inline {
    display: inline-block;
    height: 1.6em;
    width: auto;
    vertical-align: -0.4em;
    margin: 0 1px;
    user-select: none;
    cursor: default;
    pointer-events: none;
    -webkit-user-drag: none;
    user-drag: none;
    draggable: false;
}

/* -------------------------------------------------------------------
 * 툴바 (textarea/editor 위)
 * ------------------------------------------------------------------- */
.ddt-emo-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--fs-border, #3a3b40);
}

/* -------------------------------------------------------------------
 * 트리거 버튼
 * ------------------------------------------------------------------- */
.ddt-emo-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px 5px 6px;
    min-height: 34px;
    background: var(--ddt-emo-bg-soft);
    border: 1px solid var(--ddt-emo-border);
    border-radius: 18px;
    color: var(--ddt-emo-text);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    line-height: 1;
}

.ddt-emo-trigger:hover {
    background: var(--ddt-emo-hover);
    border-color: #55565c;
}

.ddt-emo-trigger:active {
    transform: scale(0.97);
}

.ddt-emo-trigger.is-open {
    background: var(--ddt-emo-active);
    border-color: #6b6c72;
}

.ddt-emo-trigger__icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    pointer-events: none;
}

.ddt-emo-trigger__label {
    line-height: 1;
}

/* -------------------------------------------------------------------
 * 피커 팝업 — body portal, position:absolute (scroll과 함께 이동)
 * overflow:hidden 부모와 무관하게 항상 온전히 표시됨
 * ------------------------------------------------------------------- */
.ddt-emo-picker {
    position: absolute;
    /* JS에서 top/left 를 pageOffset 기반으로 설정 */
    width: 340px;
    max-width: calc(100vw - 16px);
    background: var(--ddt-emo-bg);
    border: 1px solid var(--ddt-emo-border);
    border-radius: 14px;
    box-shadow: var(--ddt-emo-shadow);
    z-index: 99999;
    opacity: 0;
    transform: translateY(6px);
    /* 아래서 위로 슬라이드 업 */
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    overflow: hidden;
}

.ddt-emo-picker.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* 헤더 */
.ddt-emo-picker__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 14px;
    border-bottom: 1px solid var(--ddt-emo-border);
    background: var(--ddt-emo-bg-soft);
}

.ddt-emo-picker__title {
    font-size: 12px;
    font-weight: 600;
    color: var(--ddt-emo-text);
}

.ddt-emo-picker__close {
    background: transparent;
    border: 0;
    font-size: 20px;
    color: var(--ddt-emo-muted);
    cursor: pointer;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 4px;
    margin-top: -5px;
}

.ddt-emo-picker__close:hover {
    background: var(--ddt-emo-hover);
    color: var(--ddt-emo-text);
}

/* 섹션 */
.ddt-emo-picker__section {
    padding: 10px 12px;
}

.ddt-emo-picker__section+.ddt-emo-picker__section {
    border-top: 1px solid var(--ddt-emo-border);
}

.ddt-emo-picker__section-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--ddt-emo-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    padding-left: 2px;
}

/* 그리드 */
.ddt-emo-picker__grid {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 2px;
    max-height: 102px;
    overflow-y: auto;
}

.ddt-emo-picker__grid::-webkit-scrollbar {
    width: 6px;
}

.ddt-emo-picker__grid::-webkit-scrollbar-thumb {
    background: #4b4c52;
    border-radius: 3px;
}

.ddt-emo-picker__grid::-webkit-scrollbar-track {
    background: transparent;
}

/* 아이템 */
.ddt-emo-picker__item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 4px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s, transform 0.1s;
}

.ddt-emo-picker__item:hover {
    background: var(--ddt-emo-hover);
    transform: scale(1.12);
}

.ddt-emo-picker__item:active {
    transform: scale(0.93);
}

.ddt-emo-picker__item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.ddt-emo-picker__empty {
    padding: 20px 12px;
    text-align: center;
    color: var(--ddt-emo-muted);
    font-size: 12px;
}

/* -------------------------------------------------------------------
 * 반응형 — 모바일/태블릿 모두 버튼 위 portal 방식으로 통일
 * 하단 시트 방식 사용 안 함 (잘림 없이 동일 위치에 표시)
 * ------------------------------------------------------------------- */
@media (max-width: 768px) {
    .ddt-emo-picker {
        width: calc(100vw - 24px);
        max-width: 320px;
    }

    .ddt-emo-picker__grid {
        grid-template-columns: repeat(7, 1fr);
    }
}

@media (max-width: 480px) {
    .ddt-emo-picker {
        width: calc(100vw - 16px);
        max-width: 100%;
    }

    .ddt-emo-picker__item {
        min-height: 44px;
    }

    .ddt-emo-trigger {
        min-height: 36px;
    }
}