/* 옵션 메뉴 (본문 · 댓글 공통)

   board-view-comment-form.css 가 800줄을 넘겨 갈라 놓은 것이다. 규칙을 옮기지 않고 자르기만
   했으므로, 로더가 원래 순서대로 이어서 실으면 어느 선언이 이기는지가
   달라지지 않는다. */

/* ── 옵션 메뉴 (본문 · 댓글 공통) ────────────────────────────
   댓글 메뉴는 그누보드 기본 스타일만 붙어 폭 58px 에 글자가 세로로
   쪼개졌다. 본문 메뉴와 같은 규격으로 통일한다. */
body.clarity-page .cv-menu {
    z-index: 30;
    display: none;
    min-width: 9.25rem;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: .375rem;
    border: 1px solid var(--clarity-border);
    border-radius: .75rem;
    background: var(--clarity-surface);
    box-shadow: 0 .875rem 2.25rem rgba(29, 52, 48, .1);
    list-style: none;
}
html[data-theme="dark"] body.clarity-page .cv-menu { box-shadow: 0 .875rem 2.25rem rgba(0, 0, 0, .4); }
body.clarity-page .cv-menu.is-open { display: flex; }
body.clarity-page .cv-menu > li { width: auto; margin: 0; padding: 0; border: 0; }

body.clarity-page .cv-menu > li > a {
    display: flex;
    width: 100%;
    height: 2.25rem;
    align-items: center;
    gap: .5625rem;
    padding: 0 .6875rem;
    border: 0;
    border-radius: .5625rem;
    background: transparent;
    color: var(--clarity-text-soft);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: background-color .14s ease, color .14s ease;
}
body.clarity-page .cv-menu > li > a > .fa {
    width: .9375rem;
    flex: none;
    color: inherit;
    font-size: .8125rem;
    text-align: center;
}
body.clarity-page .cv-menu > li > a:hover,
body.clarity-page .cv-menu > li > a:focus-visible {
    background: var(--clarity-primary-soft);
    color: var(--clarity-primary);
}

/* board-view.css 가 #bo_v_top .more_opt.clarity-view-options li a 로
   더 센 규칙을 걸어둬 본문 메뉴만 옛 모양(space-between, 41px, .74rem)이
   남았다. 같은 깊이로 덮어 두 메뉴를 실제로 같게 만든다. */
body.clarity-page #bo_v_top .more_opt.clarity-view-options,
body.clarity-page #bo_v_bot .more_opt.clarity-view-options,
body.clarity-page .btn_top.top .more_opt.clarity-view-options {
    min-width: 9.25rem;
    gap: 2px;
    padding: .375rem;
}
body.clarity-page #bo_v_top .more_opt.clarity-view-options li a,
body.clarity-page #bo_v_bot .more_opt.clarity-view-options li a,
body.clarity-page .btn_top.top .more_opt.clarity-view-options li a {
    display: flex;
    /* 항목이 42px 로 쪼그라들고 테두리 + 흰 배경이 붙어 아이콘마다
       버튼 같은 박스가 생겼다. 폭을 채우고 껍데기를 걷어낸다. */
    width: 100%;
    height: 2.25rem;
    min-height: 0;
    align-items: center;
    justify-content: flex-start;
    gap: .5625rem;
    padding: 0 .6875rem;
    border: 0;
    border-radius: .5625rem;
    background: transparent;
    color: var(--clarity-text-soft);
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
}
body.clarity-page #bo_v_top .more_opt.clarity-view-options li a > .fa,
body.clarity-page #bo_v_bot .more_opt.clarity-view-options li a > .fa,
body.clarity-page .btn_top.top .more_opt.clarity-view-options li a > .fa {
    display: inline-block;
    width: .9375rem;
    height: auto;
    flex: none;
    padding: 0;
    border: 0;
    background: none;
    font-size: .8125rem;
    line-height: inherit;
    text-align: center;
}

/* 새 창을 여는 항목(복사·이동) 표시 */
body.clarity-page .cv-menu .cv-menu-ext {
    margin-left: auto;
    color: var(--clarity-muted);
    font-size: .6875rem;
}

/* 되돌릴 수 없는 삭제만 구분선 아래 경고색으로 분리 */
body.clarity-page .cv-menu > li.cv-menu-sep { margin-top: .3125rem; padding-top: .3125rem; border-top: 1px solid var(--clarity-border); }
body.clarity-page .cv-menu > li > a.cv-menu-danger { color: #b42318; }
body.clarity-page .cv-menu > li > a.cv-menu-danger:hover,
body.clarity-page .cv-menu > li > a.cv-menu-danger:focus-visible { background: #fde8e8; color: #b42318; }
html[data-theme="dark"] body.clarity-page .cv-menu > li > a.cv-menu-danger { color: #ffb4ab; }
html[data-theme="dark"] body.clarity-page .cv-menu > li > a.cv-menu-danger:hover,
html[data-theme="dark"] body.clarity-page .cv-menu > li > a.cv-menu-danger:focus-visible { background: #4a1d1a; color: #ffb4ab; }

/* 댓글 메뉴는 hover 와 클릭을 함께 받는다.
   마우스에서는 포인터를 올리면 바로 열리고, 클릭하면 고정된다.
   board-view.css 가 display:block !important 로 걸어둔 것을 flex 로 되돌려
   항목 사이 간격(gap)이 살아 있게 한다. */
@media (hover: hover) {
    body.clarity-page #bo_vc .bo_vl_opt:hover .bo_vc_act.cv-menu,
    body.clarity-page #bo_vc .bo_vl_opt:focus-within .bo_vc_act.cv-menu { display: flex !important; }
}
/* 포인터가 없는 기기에서는 hover 가 성립하지 않는다. 탭으로만 연다. */
@media (hover: none) {
    body.clarity-page #bo_vc .bo_vl_opt:hover .bo_vc_act,
    body.clarity-page #bo_vc .bo_vl_opt:focus-within .bo_vc_act { display: none !important; }
    /* 옵션 버튼이 행 hover 로만 나타나면 터치에서는 아예 보이지 않는다.
       댓글 수정·삭제에 접근할 방법이 없어지므로 항상 보여준다. */
    body.clarity-page #bo_v #bo_vc .bo_vl_opt .btn_cm_opt { opacity: 1; }
}
/* 클릭으로 고정한 메뉴는 포인터가 떠나도 남는다. */
body.clarity-page #bo_vc .bo_vl_opt .bo_vc_act.cv-menu.is-open { display: flex !important; }
/* A real mouse can still hover on touch-capable desktops even when CSS reports hover:none. */
body.clarity-page #bo_vc .bo_vl_opt.is-pointer-hover .bo_vc_act.cv-menu { display: flex !important; }
@media (min-width: 48rem) {
    body.clarity-page #bo_vc .bo_vl_opt .btn_cm_opt:hover + .bo_vc_act.cv-menu { display: flex !important; }
}
body.clarity-page #bo_v #bo_vc .bo_vl_opt:hover,
body.clarity-page #bo_v #bo_vc .bo_vl_opt:focus-within,
body.clarity-page #bo_v #bo_vc .bo_vl_opt.is-pointer-hover { z-index: 40; }

/* 댓글 메뉴 위치: 기본 스킨이 left 를 걸어 왼쪽으로 밀려 있었다. */
body.clarity-page #bo_v #bo_vc .bo_vc_act.cv-menu {
    position: absolute;
    top: 2.25rem;
    right: 0;
    left: auto;
    width: auto;
}
body.clarity-page #bo_v #bo_vc .bo_vl_opt { position: absolute; top: .75rem; right: 1.375rem; }
/* 트리거가 30x38px 이라 942px 폭 행에서 오른쪽 끝 좁은 띠를 정확히 겨눠야 했다.
   보이지 않는 여유 영역을 둘러 hover 로 잡기 쉽게 한다.

   포인터가 있는 넓은 화면에서만 켠다. 실측하면 본문 텍스트의 오른쪽 끝과
   버튼 사이가 데스크톱에서는 최악에도 169px 이라 왼쪽으로 넉넉히 늘려도
   글자를 덮지 않지만, 480px 에서는 이미 18px 겹친다. 좁은 화면에서 켜면
   본문 탭을 가로챈다. 그쪽은 버튼이 항상 보이므로 넓힐 이유도 없다. */
@media (min-width: 48rem) {
    body.clarity-page #bo_v #bo_vc .bo_vl_opt::before {
        position: absolute;
        inset: -.875rem -.75rem -.75rem -8rem;
        content: "";
    }
}
/* 여유 영역이 버튼을 덮어 클릭을 가로채지 않도록 버튼을 위로 올린다. */
body.clarity-page #bo_v #bo_vc .bo_vl_opt .btn_cm_opt { position: relative; z-index: 1; }
/* 메뉴가 열린 동안에는 옵션 버튼을 계속 보여준다. */
body.clarity-page #bo_v #bo_vc .btn_cm_opt[aria-expanded="true"] {
    border-color: var(--clarity-primary);
    background: var(--clarity-primary-soft);
    color: var(--clarity-primary);
    opacity: 1;
}