/* 환율 화면의 댓글 — 참여 모듈 마크업은 부트스트랩(카드·드롭다운·모달·유틸리티)을
   전제로 쓰여 있는데, 이 화면은 부트스트랩을 싣지 않는다. 여기서 필요한 것만 대신 그린다.
   (부트스트랩 CSS 를 통째로 실으면 reboot 이 이 화면의 글꼴·여백을 전부 덮는다) */

/* ── 부트스트랩 유틸리티 대역 ─────────────────────────────── */
.ex-comments .d-flex { display: flex; }
.ex-comments .align-items-center { align-items: center; }
.ex-comments .justify-content-between { justify-content: space-between; }
.ex-comments .ml-auto { margin-left: auto; }
.ex-comments .ml-1 { margin-left: 4px; }
.ex-comments .mr-3 { margin-right: 16px; }
.ex-comments .mt-1 { margin-top: 4px; }
.ex-comments .mb-1 { margin-bottom: 4px; }
.ex-comments .mb-3 { margin-bottom: 16px; }
.ex-comments .px-1 { padding-left: 4px; padding-right: 4px; }
.ex-comments .py-1 { padding-top: 4px; padding-bottom: 4px; }
.ex-comments .py-0 { padding-top: 0; padding-bottom: 0; }
.ex-comments .border-0 { border: 0; }
.ex-comments .w-100 { width: 100%; }

/* ── 버튼 ──────────────────────────────────────────────────── */
.ex-comments .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 7px 12px;
    border: 0;
    border-radius: 9px;
    background: none;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--ex-ink2);
    cursor: pointer;
}
.ex-comments .btn:hover { background: rgba(0,0,0,0.04); }
/* 등록 버튼 — 쓸 말이 생기기 전에는 눌린 티를 내지 않는다. */
.ex-comments .eng-submit { background: var(--ex-component); color: var(--ex-ink3); }
.ex-comments .eng-submit.is-active { background: var(--ex-primary); color: #fff; }
.ex-comments .eng-submit.is-active:hover { background: #3A30AE; }

/* ── 드롭다운(댓글 메뉴) ───────────────────────────────────── */
.ex-comments .dropdown { position: relative; }
.ex-comments .dropdown-toggle { font-size: 16px; line-height: 1; color: var(--ex-ink3); padding: 2px 6px; }
.ex-comments .dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 30;
    min-width: 96px;
    padding: 4px;
    border: 1px solid var(--ex-line);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}
.ex-comments .dropdown-menu.show { display: block; }
.ex-comments .dropdown-item {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 7px;
    background: none;
    font: inherit;
    font-size: 13px;
    color: var(--ex-ink2);
    text-align: left;
    cursor: pointer;
}
.ex-comments .dropdown-item:hover { background: var(--ex-component); color: var(--ex-title); }

/* ── 모달(수정·신고·답글) ──────────────────────────────────── */
.ex-comments .modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(22,22,31,0.45);
    padding: 16px;
    overflow-y: auto;
    /* 어둠을 제 합성 레이어로 올린다 — 댓글에 붙은 영상을 틀어 둔 채 레이어를 열면
       그 iframe 이 z-index 를 무시하고 어둠 위로 그려진다(브라우저가 영상만 따로 합성해서다).
       자식은 전부 정적 배치라 이 transform 이 안쪽 배치를 건드리지 않는다. */
    transform: translateZ(0);
}
.ex-comments .modal.show { display: block; }
.ex-comments .modal-dialog { max-width: 460px; margin: 10vh auto 0; }
.ex-comments .modal-content { border-radius: 16px; background: #fff; overflow: hidden; }
.ex-comments .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 8px; }
.ex-comments .modal-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--ex-title); }
.ex-comments .modal-body { padding: 8px 16px; }
.ex-comments .modal-footer { display: flex; justify-content: flex-end; padding: 8px 16px 16px; }
.ex-comments .close {
    border: 0;
    background: none;
    font-size: 22px;
    line-height: 1;
    color: var(--ex-ink3);
    cursor: pointer;
}

/* ── 입력 ──────────────────────────────────────────────────── */
.ex-comments .form-control {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--ex-line);
    border-radius: 10px;
    background: #fff;
    font: inherit;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ex-title);
    resize: none;
}
.ex-comments .form-control:focus { outline: 0; border-color: #C7C7D9; }
.ex-comments .custom-control-label { font-size: 13px; color: var(--ex-ink2); }

/* ── 입력창 — 앱 _InputBox 조판 ─────────────────────────────
   손이 닿기 전에는 한 줄로 접어 둔다. 쓸 마음이 없는 사람에게는 글 위에 얹힌 줄일
   뿐이고, 그 한 줄만큼 본문과 댓글 목록이 서로 멀어진다. */
.ex-comments .ex-compose {
    padding: 12px 14px;
    border: 0;
    border-radius: 14px;
    background: var(--ex-component);
    transition: background 150ms ease;
}
.ex-comments .ex-compose textarea {
    display: block;
    width: 100%;
    min-height: 22px;
    padding: 0;
    border: 0;
    outline: 0;
    background: none;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: -0.3px;
    color: var(--ex-title);
    resize: none;
    transition: min-height 150ms ease;
}
.ex-comments .ex-compose textarea::placeholder { color: var(--ex-ink3); }

/* 접힘: 이모지 줄도 도구 줄도 없다. */
.ex-comments .ex-compose-emoji,
.ex-comments .ex-compose-foot { display: none; }

/* 펼침: 이모지 줄이 위에 서고, 입력칸이 최소 80 을 잡는다 —
   쓸 자리가 좁으면 한 줄만 적고 만다(앱과 같은 값). */
.ex-comments .ex-compose-wrap.is-expanded .ex-compose-emoji { display: block; margin-bottom: 6px; }
.ex-comments .ex-compose-wrap.is-expanded .ex-compose textarea { min-height: 80px; }
.ex-comments .ex-compose-wrap.is-expanded .ex-compose-foot {
    display: flex;
    align-items: center;
    margin-top: 8px;
}

.ex-comments .ex-compose .eng-count { font-size: 12px; font-weight: 500; color: var(--ex-ink3); }

/* 게시 버튼 — 쓸 말이 생기기 전에는 눌린 티를 내지 않는다. */
.ex-comments .ex-post {
    margin-left: auto;
    padding: 7px 16px;
    border-radius: 10px;
    background: var(--ex-component);
    color: var(--ex-ink3);
    font-size: 13px;
    font-weight: 700;
}
.ex-comments .ex-post.is-active { background: var(--ex-primary); color: #fff; }
.ex-comments .ex-post.is-active:hover { background: #3A30AE; }
.ex-comments .ex-post[disabled] { cursor: default; }

/* Vue 가 올라타기 전에는 통째로 숨긴다 — 그 한 박자 동안 템플릿 문법이 날것으로 보였다. */
.ex-comments [v-cloak] { display: none; }

/* 좋아요는 하트다 — 공용 마크업이 쓰는 따봉 이미지를 이 화면에서만 갈아 끼운다.
   앱(EngagementIcons.like)과 같은 도안이라야 카드 각주의 하트와 같은 것으로 읽힌다. */
.ex-comments .eng-like img { display: none; }
.ex-comments .eng-like::before {
    content: '';
    width: 15px;
    height: 15px;
    background: currentColor;
    -webkit-mask: var(--ex-heart) center / contain no-repeat;
    mask: var(--ex-heart) center / contain no-repeat;
}
.ex-comments .eng-like { color: var(--ex-ink3); }
/* 내가 누른 것 — 채운 하트와 색으로 함께 말한다. */
.ex-comments .eng-like.is-on { color: #F04452; }
.ex-comments .eng-like.is-on::before { -webkit-mask-image: var(--ex-heart-fill); mask-image: var(--ex-heart-fill); }

:root {
    --ex-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
    --ex-heart-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
}

/* 줄과 줄 사이를 선으로 가르지 않는다 — 카드가 이미 한 덩어리라 그 안에 다시 선을 그으면
   댓글 하나하나가 표의 행으로 보이고, 맨 아래 줄 밑에는 가를 것도 없는 자리에 선만 남는다.
   여백으로만 가른다(앱과 같은 표현). 공용 목록은 계산기가 쓰던 선을 그대로 둔다. */
.ex-comments .eng-item { border-bottom: 0; }

/* ── 댓글 한 줄의 손잡이 — 앱은 ⋮ 메뉴가 아니라 글자 버튼이다 ─────────
   내 글이면 `수정  삭제`, 남의 글이면 `신고` 가 답글·좋아요와 같은 줄 오른쪽 끝에 선다.
   공용 마크업은 이름 줄의 드롭다운이라, 토글은 감추고 메뉴를 그 줄로 내려 앉힌다. */
.ex-comments .eng-body { position: relative; }
.ex-comments .eng-body .dropdown { position: static; }
.ex-comments .eng-body .dropdown-toggle { display: none; }
/* 답글 줄과 같은 높이에 선다 — 아래로 떨어지면 다음 댓글에 딸린 것으로 읽힌다.
   `top` 을 반드시 지운다: 위 드롭다운 기본값이 메뉴를 이름 줄 **아래**로 떨어뜨리려고
   `top:100%` 를 걸어 두었는데, 위아래가 함께 지정되고 높이까지 정해지면 `bottom` 이
   아니라 `top` 이 이긴다 — 그래서 손잡이가 제 키(15px)만큼 내려가 어긋나 있었다. */
.ex-comments .eng-body .dropdown-menu {
    display: flex !important;
    gap: 12px;
    position: absolute;
    right: 0;
    top: auto;
    bottom: 0;
    height: 15px;
    align-items: center;
    /* 상자를 글자 크기로 줄인다 — 그래야 `right:0` 이 글자를 오른쪽 끝에 붙인다.
       공용 마크업이 메뉴에 `style="min-width:5rem"` 을 인라인으로 달고 있어(계산기 30여
       화면이 함께 쓰는 파일이라 못 걷어낸다) 그냥 `min-width:0` 은 안 먹는다 — 인라인은
       !important 로만 이긴다. 이걸 안 하면 80px 짜리 상자가 오른쪽 끝에 서고 그 안에서
       글자는 왼쪽에 쌓여, '신고'는 18px, '수정 삭제'는 그보다 조금 덜 떠 보인다. */
    min-width: 0 !important;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}
.ex-comments .eng-body .dropdown-item {
    width: auto;
    padding: 0;
    border-radius: 0;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ex-ink3);
    background: none;
}
.ex-comments .eng-body .dropdown-item:hover { background: none; color: var(--ex-ink2); text-decoration: underline; }

/* 좋아요 — 하트와 수만. 답글달기 옆에 붙고, 누르면 하트도 수도 함께 물든다(앱과 같은 규칙). */
.ex-comments .eng-like { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.ex-comments .eng-like span { font-size: 12.5px; font-weight: 600; color: inherit; }

/* 머리글 — 제목과 정렬이 양 끝에 선다. */
.ex-comments-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }

.ex-sort { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ex-ink3); }
.ex-sort button {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ex-ink3);
    cursor: pointer;
}
.ex-sort button.is-on { font-weight: 700; color: var(--ex-title); }

/* 신고 사유 — 앱은 아래에서 올라오는 시트다. 가운데 뜬 상자로 두면 고르는 자리가
   손가락에서 멀다. 목록 한 줄씩, 오른쪽 끝에 꺾쇠. */
/* 공용 모달은 부트스트랩 기준으로 위에서 15% 내려 세운다(인라인 style). 여기서는
   바닥에서 올라오는 시트라 그 값을 무력화한다 — 안 그러면 시트가 화면 밖으로 밀린다.
   (치수는 아래 '답글·수정 레이어' 덩어리가 한 번에 잡는다) */
/* 의견 시트(.eng-sheet)와 같은 몸으로 세운다 — 같은 자리에서 열리는 두 레이어인데
   하나는 화면에 붙고 하나는 둘레 16px 만큼 떠 있으면 다른 것으로 읽힌다.
   좁은 화면에서는 둘레 여백을 지워 폭을 꽉 채우고, 안쪽 여백은 시트와 같은 20px 다. */
.ex-comments .eng-modal {
    display: none;
    align-items: flex-end;
    padding: 0;
    /* 의견 시트와 같은 규칙 — 본문 기둥을 기준으로 선다(app.css 의 --eng-layer-side). */
    padding-right: var(--eng-layer-side, 0px);
}
.ex-comments .eng-modal.show { display: flex; }
.ex-comments .eng-modal .modal-content { border-radius: 20px 20px 0 0; }
/* 머리글도 시트와 같은 크기·여백으로 — 제목만 작으면 같은 레이어로 안 읽힌다. */
.ex-comments .eng-modal .modal-header { padding: 18px 20px 6px; }
.ex-comments .eng-modal .modal-title { font-size: 19px; font-weight: 800; letter-spacing: -0.5px; }

.ex-comments .eng-reason {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 15px 2px;
    border: 0;
    border-bottom: 1px solid var(--ex-line);
    background: none;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--ex-title);
    text-align: left;
    cursor: pointer;
}
.ex-comments .eng-reason:last-of-type { border-bottom: 0; }
.ex-comments .eng-reason:hover { color: var(--ex-primary); }
/* 폰트어썸을 안 싣는 화면이라 꺾쇠를 직접 그린다. */
.ex-comments .eng-reason i {
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--ex-ink3);
    border-right: 2px solid var(--ex-ink3);
    transform: rotate(45deg);
}
.ex-comments .eng-reason-note { margin: 14px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--ex-ink3); }

/* 하트는 답글달기 바로 옆이다 — 공용 CSS 가 오른쪽 끝으로 밀어 두었는데, 그 자리는
   신고·수정·삭제가 쓴다(앱과 같은 배치). */
.ex-comments .eng-meta { gap: 14px; }
.ex-comments .eng-meta .mr-3 { margin-right: 0; }
.ex-comments .eng-like { margin-left: 0; }
/* 오른쪽 끝 손잡이와 겹치지 않게 왼쪽 무리가 자리를 비켜 준다. */
.ex-comments .eng-meta { padding-right: 84px; }

/* ── 답글·수정 레이어 — 신고 시트와 같은 몸이되, 안이 넘치지 않게 ─────────
   부트스트랩 기본값(가운데 뜬 좁은 상자)으로 두면 이모지 줄이 옆으로 넘쳐 잘린다. */
.ex-comments .eng-modal .modal-dialog { width: 100%; max-width: 520px; margin: auto auto 0; top: auto; }
.ex-comments .eng-modal .modal-content { width: 100%; max-height: 82vh; overflow-y: auto; }
.ex-comments .eng-modal .modal-body { padding: 4px 20px 20px; }

/* 넓은 화면에서는 아래에 붙이지 않는다 — 의견 시트(engagement.css)와 같은 규칙이다.
   한 화면에서 어떤 레이어는 가운데, 어떤 레이어는 아래 구석에 뜨면 같은 것으로 안 읽힌다. */
@media (min-width: 768px) {
    .ex-comments .eng-modal { align-items: center; padding: 24px; padding-right: calc(24px + var(--eng-layer-side, 0px)); }
    .ex-comments .eng-modal .modal-dialog { max-width: 460px; margin: auto; }
    .ex-comments .eng-modal .modal-content { max-height: calc(100vh - 48px); border-radius: 18px; }
}

/* 이모지 줄은 가로로만 흐른다 — 줄바꿈하면 레이어 높이가 화면을 먹는다. */
.ex-comments .eng-emoji-wrap { overflow-x: auto; scrollbar-width: none; }
.ex-comments .eng-emoji-wrap::-webkit-scrollbar { display: none; }
.ex-comments .eng-emoji-row { display: flex; gap: 4px; }
.ex-comments .eng-emoji {
    flex: 0 0 auto;
    padding: 4px;
    border: 0;
    background: none;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
}

/* 답할 상대 — 입력창 위에 한 줄. */
.ex-comments .eng-reply-to { display: inline-block; margin-bottom: 6px; font-size: 12.5px; font-weight: 700; color: var(--ex-primary); }

/* 입력칸·보내기 버튼도 의견 시트(.eng-sheet-input / .eng-sheet-submit)와 같은 치수다. */
.ex-comments .eng-modal textarea.form-control {
    min-height: 120px;
    padding: 14px;
    border-radius: 12px;
    font-size: 14px;
}

/* 버튼이 폭을 꽉 채운다 — 시트의 '보내기'와 같은 몸이다. 오른쪽 구석의 작은 알약으로
   두면 같은 자리에서 열리는 두 레이어의 마지막 줄이 서로 다른 것으로 읽히고,
   폭이 좁은 화면에서 손가락이 닿는 자리도 그만큼 작아진다. */
.ex-comments .eng-modal .modal-footer { display: block; padding: 0 20px 20px; }
.ex-comments .eng-modal .eng-submit {
    width: 100%;
    margin-top: 16px;
    padding: 15px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
}

/* 이 화면의 색만 갈아끼운다 — 공용 규칙은 그대로 두고 변수만 덮는다
   (engagement.css 머리말의 $theme 규약). 계산기는 제 기본값을 그대로 쓴다. */
.eng-root.ex-eng {
    --eng-accent:       #4338CA;
    --eng-text:         #16161F;
    --eng-text-muted:   #9A9AA3;
    --eng-surface-card: #F0F0F5;
    --eng-surface-ph:   #E5E5EA;
}