/* 통합 스터디룸 — 목록/상세/글쓰기 전용 스타일. 디자인 토큰만 사용.
   페이지 헤더(.rl-archive-header)·필터칩(.rl-archive-tabs)·빈상태(.rl-archive-empty)·
   무한스크롤 상태(.rl-archive-scroll-status)는 rl_note_archive.css 단일 출처 재사용.
   페이지 좌우 패딩은 .at-container(--rl-page-padding-x) 단일 출처 — 본문 별도 padding-inline 금지. */

/* ===== 목록 (평면 피드) ===== */
/* 떠 있는 흰 카드(surface-elev + shadow)·라운드 폐기 — 페이지 배경 위 평면 행, 행 사이 1px 구분선만.
   상세 페이지 풀블리드 평면(.rl-study-post)과 시각 언어 정합. 좌우 끝까지 음수 마진 후 내부 재패딩
   (거터 = --rl-page-padding-x 단일 출처). 행 배경(hover/active)은 풀폭, 구분선만 거터 안쪽. */
.rl-study__list {
    margin-inline: calc(-1 * var(--rl-page-padding-x));
}
.rl-study-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--rl-sp-2);
    padding: var(--rl-sp-5) var(--rl-page-padding-x);
    color: inherit;
    text-decoration: none;
    transition: background-color .15s var(--rl-ease-out);
}
/* 행 구분선 — 배경은 풀폭 유지하고 선만 좌우 거터(--rl-page-padding-x) 안쪽으로 들인다. */
.rl-study-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--rl-page-padding-x);
    right: var(--rl-page-padding-x);
    height: 1px;
    background: var(--rl-line-2);
}
/* 피드 인피드 광고 슬롯(rl-ad-feed.js가 #rl-study-list에 삽입) — 스터디 행과 동일한 상단 구분선.
   행 ::before와 동형(좌우 거터 인셋·1px·line-2). no-fill collapse 시 슬롯 display:none이라 선도 함께 사라짐. */
/* 패딩 소유를 우리 슬롯으로 — 인피드 유닛은 상하좌우 패딩 0, 광고 내부 콘텐츠 간격은 우리가 스터디 행과 동일 토큰으로 부여.
   (AdSense 유닛 패딩이 0이 아니면 이중 패딩 — 유닛 설정과 함께 가야 함.) 스터디 행과 동일: 상하 sp-5 / 좌우 page-padding-x. */
#rl-study-list > .rl-ad-slot--in_feed {
    position: relative;
    padding: var(--rl-sp-5) var(--rl-page-padding-x);
}
#rl-study-list > .rl-ad-slot--in_feed::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--rl-page-padding-x);
    right: var(--rl-page-padding-x);
    height: 1px;
    background: var(--rl-line-2);
    /* 실 광고 iframe(불투명 배경)이 슬롯 top을 덮어 선이 가려짐 → iframe 위로 올린다.
       단 1px 선이 광고 클릭을 가로채지 않도록 pointer-events 해제(정책·UX 안전). */
    z-index: 1;
    pointer-events: none;
}
@media (hover: hover) {
    .rl-study-item:hover { background: var(--rl-surface-2); text-decoration: none; }
}
.rl-study-item:active { background: var(--rl-surface-2); }

/* 상단 분류 칩([과목명] [글유형] [결과·점수대]) — 칩이 있을 때만 렌더. */
.rl-study-item__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rl-sp-1);
    min-width: 0;
}

/* 본문 행 — 텍스트(제목·발췌) 좌, 대표 썸네일 우. 썸네일은 텍스트 상단에 정렬(flex-start). */
.rl-study-item__body {
    display: flex;
    align-items: flex-start;
    gap: var(--rl-sp-3);
}
.rl-study-item__text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--rl-sp-1);
}

/* 대표 썸네일 — 정사각(80=sp-8+sp-7) 크롭, 약한 보더로 흰 배경 이미지 경계. 라운드는 작게(r-xs). */
.rl-study-item__thumb {
    position: relative;
    flex: 0 0 auto;
    width: calc(var(--rl-sp-8) + var(--rl-sp-7));
    height: calc(var(--rl-sp-8) + var(--rl-sp-7));
    border-radius: var(--rl-r-xs);
    overflow: hidden;
    background: var(--rl-surface-2);
    border: 1px solid var(--rl-line);
}
.rl-study-item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 장수 배지(2장+) — 썸네일 좌상단 모서리에 밀착(inset 0). 좌·상단은 썸네일 라운드에 클립, 우하단만 둥글게. */
.rl-study-item__thumbcount {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 var(--rl-sp-2);
    background: var(--rl-overlay-soft);
    color: var(--rl-on-primary);
    font-size: var(--rl-fs-caption-sm);
    font-weight: 600;
    line-height: var(--rl-lh-relaxed);
    border-radius: 0 0 var(--rl-r-2xs) 0;
    pointer-events: none;
}

/* 제목 — 계층 최상위(크기 fs-body 15 / 색 ink / weight 500). 1줄만, 넘치면 말줄임표. */
.rl-study-item__title {
    font-size: var(--rl-fs-body);
    font-weight: 500;
    line-height: var(--rl-lh-snug);
    color: var(--rl-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 본문 1줄 미리보기 — 메타 < 미리보기 < 제목 계층: 크기 label(13)·색 text-2(메타 text-3보다 진하게). */
.rl-study-item__excerpt {
    font-size: var(--rl-fs-label);
    line-height: var(--rl-lh-snug);
    color: var(--rl-text-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 하단 행 — 메타(좌, 남은 폭) + 반응 카운트(우, 고정). 마지막 갭(본문↔하단)만 flex gap보다 살짝 넓게. */
.rl-study-item__foot {
    display: flex;
    align-items: center;
    gap: var(--rl-sp-3);
    margin-top: var(--rl-sp-2);
}
.rl-study-item__meta {
    display: flex;
    align-items: center;
    gap: var(--rl-sp-2);
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--rl-fs-caption);
    color: var(--rl-text-3);
}
.rl-study-item__meta > span { flex: 0 0 auto; }
.rl-study-item__author {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rl-study-item__dot { color: var(--rl-text-4); }
/* 신고 누적 블라인드 글 — 목록에서 상세처럼 칩·작성자라벨·시각·조회는 노출, 제목/작성자는 가림 톤(text-4). 클릭 시 상세 진입. */
.rl-study-item--blinded .rl-study-item__title,
.rl-study-item--blinded .rl-study-item__excerpt,
.rl-study-item--blinded .rl-study-item__author { color: var(--rl-text-4); }

/* 내 활동 댓글 카드 — .rl-study-item 베리에이션(썸네일·반응 슬롯 미사용).
   구조: 내 댓글 내용(최대 2줄) → 작성 시각 → 원글 제목(1줄) + 현재 댓글수 칩. */
.rl-study-item--comment .rl-study-item__title {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.rl-study-item__cmeta {
    margin-top: var(--rl-sp-1);
    font-size: var(--rl-fs-caption);
    color: var(--rl-text-3);
}
.rl-study-item__on {
    display: flex;
    align-items: center;
    gap: var(--rl-sp-2);
    margin-top: var(--rl-sp-2);
}
.rl-study-item__ontitle {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--rl-fs-label);
    color: var(--rl-text-2);
}
/* 댓글수 칩 — 자릿수가 늘어도 칩이 쪼그라들며 숫자가 잘리지(overflow ellipsis) 않게 비축소 보장.
   기저 .rl-study-pill(flex:0 1 auto)이 소스 순서상 뒤라 이기므로 부모 명시도로 눌러 flex-shrink:0 확정.
   우측 정렬은 형제 __ontitle의 flex-grow:1이 남은 공간을 채워 칩을 행 오른쪽 끝으로 밀어 처리. */
.rl-study-item__on .rl-study-item__cmtcount {
    flex: 0 0 auto;
}

/* 반응 카운트(공감·댓글) — 우측 정렬, 표시 전용(아이콘 + 숫자). */
.rl-study-item__reacts {
    display: flex;
    align-items: center;
    gap: var(--rl-sp-3);
    flex: 0 0 auto;
    font-size: var(--rl-fs-caption);
    color: var(--rl-text-3);
}
.rl-study-item__react {
    display: inline-flex;
    align-items: center;
    gap: var(--rl-sp-1);
    font-variant-numeric: tabular-nums;
}
/* 채운 아이콘은 외곽선보다 무게감이 커서 강하게 뮤트(text-5) — 숫자(text-3)보다 크게 후퇴. */
.rl-study-item__react svg { width: 1.15em; height: 1.15em; color: var(--rl-text-5); }
/* 댓글 아이콘 래퍼 — 닷 위치 anchor. */
.rl-study-item__icowrap { position: relative; display: inline-flex; }
/* 최근 댓글 닷 — 아이콘 우상단, primary 솔리드(em 기반 크기로 토큰 정합). */
.rl-study-item__dotbadge {
    position: absolute;
    top: -0.1em;
    right: -0.15em;
    width: 0.5em;
    height: 0.5em;
    border-radius: var(--rl-r-full);
    background: var(--rl-primary);
}

/* ===== 목록 헤더 제목 + 과목 필터 행 ===== */
/* 제목 — 과목 선택 시 "{과목명} 스터디룸"으로 길어질 수 있어 최대 2줄 허용 후 말줄임(긴 과목명은 1줄 컷보다 2줄이 자연스러움). */
.rl-study-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* 글유형 탭(.rl-archive-tabs)과 과목 필터는 같은 "필터" 그룹 — 둘 사이는 그룹 내 간격(sp-3),
   필터 그룹↔목록은 그룹 간 간격(sp-6). 탭 공통 룰의 margin-bottom(sp-6)을 그룹 내 값으로 좁힘. */
.rl-study .rl-archive-tabs { margin-bottom: var(--rl-sp-3); }
.rl-study-subjfilter-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--rl-sp-2);
    margin-bottom: var(--rl-sp-6);
    padding-inline: var(--rl-sp-1); /* 탭과 좌측 정렬 */
}
/* 축 라벨 "과목" — 글유형(탭)과 다른 축임을 명시. 보조 톤(작고 뮤트). */
.rl-study-subjfilter-row__label {
    flex: 0 0 auto;
    font-size: var(--rl-fs-label);
    font-weight: 500;
    color: var(--rl-text-3);
}
/* 전체(미선택) — 과목 선택 트리거. 탭보다 작고 보조적(중립 톤 + 작은 꺽쇠). */
.rl-study-subjfilter {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: var(--rl-sp-1);
    min-width: 0;
    max-width: 100%;
    padding: var(--rl-sp-1) var(--rl-sp-2);
    font-size: var(--rl-fs-label);
    font-weight: 500;
    color: var(--rl-text-2);
    background: var(--rl-surface-elev);
    border: 1px solid var(--rl-line-2);
    border-radius: var(--rl-r-full);
    cursor: pointer;
}
.rl-study-subjfilter__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-study-subjfilter svg { flex: 0 0 auto; width: 1em; height: 1em; color: var(--rl-text-4); }
.rl-study-subjfilter:focus-visible { outline: 2px solid var(--rl-primary); outline-offset: 2px; }

/* 선택 상태 — 보조 칩 [과목명 ×]. 이름 탭=과목 변경(시트), ×=해제. 중립 톤, ▼·구분선 없음. */
.rl-study-subjfilter-sel {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    background: var(--rl-surface-elev);
    border: 1px solid var(--rl-line-2);
    border-radius: var(--rl-r-full);
}
/* 이름(변경) — 탭하면 시트. */
.rl-study-subjfilter-sel__change {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    min-width: 0;
    padding: var(--rl-sp-1) var(--rl-sp-1) var(--rl-sp-1) var(--rl-sp-3);
    border: 0;
    background: transparent;
    font-size: var(--rl-fs-label);
    font-weight: 500;
    color: var(--rl-text-2);
    cursor: pointer;
}
.rl-study-subjfilter-sel__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 해제 ×(전체 과목) — 연한 아이콘만(박스 없음). 시각은 작게, 터치는 ::after로 확장(세로 + 우측). */
.rl-study-subjfilter-sel__clear {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--rl-sp-1) var(--rl-sp-2) var(--rl-sp-1) var(--rl-sp-1);
    color: var(--rl-text-4);
    text-decoration: none;
}
.rl-study-subjfilter-sel__clear svg { width: var(--rl-sp-3); height: var(--rl-sp-3); }
.rl-study-subjfilter-sel__clear::after { content: ''; position: absolute; inset: calc(-1 * var(--rl-sp-2)) 0; }
@media (hover: hover) { .rl-study-subjfilter-sel__clear:hover { color: var(--rl-text-3); } }
.rl-study-subjfilter-sel__clear:active { color: var(--rl-text-2); }
.rl-study-subjfilter-sel__change:focus-visible,
.rl-study-subjfilter-sel__clear:focus-visible { outline: 2px solid var(--rl-primary); outline-offset: -2px; }

/* 글쓰기 FAB — 우하단. 스크롤 탑이면 "+ 글쓰기" 확장 pill, 스크롤하면(.is-collapsed) + 원형으로 수축.
   컨테이너(768) 우측 안쪽 정렬, safe-area 하단 여백 반영. */
.rl-study-fab {
    position: fixed;
    z-index: 20;
    bottom: calc(var(--rl-sp-5) + var(--rl-safe-bottom-capped, 0px));
    right: max(var(--rl-page-padding-x), calc(50vw - var(--rl-page-container, 768px) / 2 + var(--rl-page-padding-x)));
    min-width: calc(var(--rl-sp-8) + var(--rl-sp-2)); /* 56 — 수축 시 원형 지름 */
    height: var(--rl-sp-8); /* 48 — 확장(라벨 노출) pill은 낮게 */
    padding: 0 var(--rl-sp-5); /* 확장 pill 좌우 여백 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--rl-primary);
    color: var(--rl-on-primary);
    border-radius: var(--rl-r-full);
    box-shadow: var(--rl-shadow-md);
    text-decoration: none;
    transition: background-color .15s var(--rl-ease-out), transform .1s var(--rl-ease-out), padding var(--rl-dur-base) var(--rl-ease-out), height var(--rl-dur-base) var(--rl-ease-out);
}
@media (hover: hover) { .rl-study-fab:hover { background: var(--rl-primary-hover); } }
.rl-study-fab:active { transform: scale(0.96); }
/* + 아이콘 — 확장(라벨 노출) 시 작게(sp-5 16), 수축 원형 시 크게(28=sp-6+sp-1). */
.rl-study-fab svg {
    width: var(--rl-sp-5);
    height: var(--rl-sp-5);
    display: block;
    flex: 0 0 auto;
    transition: width var(--rl-dur-base) var(--rl-ease-out), height var(--rl-dur-base) var(--rl-ease-out);
}
.rl-study-fab.is-collapsed svg { width: calc(var(--rl-sp-6) + var(--rl-sp-1)); height: calc(var(--rl-sp-6) + var(--rl-sp-1)); }
/* 라벨 — 확장 시 노출, 수축 시 max-width 0 + opacity로 사라지고 컨테이너가 라벨 폭 따라 원형으로 수축. */
.rl-study-fab__label {
    max-width: 6em;
    margin-left: var(--rl-sp-1);
    overflow: hidden;
    white-space: nowrap;
    font-size: var(--rl-fs-body); /* 작은 '+'(sp-5)에 맞춘 라벨 크기 */
    font-weight: 600;
    transition: max-width var(--rl-dur-base) var(--rl-ease-out), opacity var(--rl-dur-base) var(--rl-ease-out), margin-left var(--rl-dur-base) var(--rl-ease-out);
}
/* 수축 — 원형 복귀(높이 56=지름, 라벨 0). */
.rl-study-fab.is-collapsed { padding: 0; height: calc(var(--rl-sp-8) + var(--rl-sp-2)); }
.rl-study-fab.is-collapsed .rl-study-fab__label { max-width: 0; opacity: 0; margin-left: 0; }
@media (prefers-reduced-motion: reduce) {
    .rl-study-fab, .rl-study-fab__label, .rl-study-fab svg { transition: background-color .15s var(--rl-ease-out); }
}

/* ===== 상세 ===== */
/* 하단 고정 댓글 바(.rl-study-cbar)에 가리지 않도록 페이지 끝 여백 확보.
   셸(.at-content) 자체 바닥 패딩·스페이서가 이미 일부를 채우므로, 여기서는 바 높이의 나머지(h-btn-sm)만 더한다.
   합산 시 마지막 댓글이 바 바로 위에 딱 붙는다(과다 예약 방지). safe-area는 env() 게이트(미존재 기기는 0).
   --rl-study-cbar-grow: 입력이 여러 줄로 커지거나 답글 컨텍스트가 뜰 때 바가 단일행 기준보다 커진 높이(JS가 갱신).
   그만큼 끝 여백을 늘려 바가 커져도 마지막 댓글이 가려지지 않게 한다. */
.rl-study { padding-bottom: calc(var(--rl-h-btn-sm) + var(--rl-safe-bottom-capped, 0px) + var(--rl-study-cbar-grow, 0px)); }

/* 풀블리드 평면 — 둥근 흰 카드(surface-elev) 폐기. 콘텐츠 배경 = 페이지 배경(--rl-surface)으로 통일해
   떠 있는 카드감 제거. 페이지 거터만큼 음수 마진으로 좌우 끝까지(내부 재패딩). 본문↔댓글 사이만 진한 구분 띠. */
.rl-study-post {
    background: var(--rl-surface);
    margin-inline: calc(-1 * var(--rl-page-padding-x));
    padding: 0 var(--rl-page-padding-x) var(--rl-sp-5);
}
/* 상단 데이터 칩(시험후기 결과/점수·팁) — 회색 각진 칩(rl-study-pill). 질문은 제목 Q. 표지로 대체. */
.rl-study-post__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rl-sp-1);
    margin-bottom: var(--rl-sp-3);
}

/* 작성자 행 — 원형 아바타 + (닉네임 / 과목·시각). */
.rl-study-post__author {
    display: flex;
    align-items: center;
    gap: var(--rl-sp-3);
    margin-bottom: var(--rl-sp-4);
}
.rl-study-post__id {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}
.rl-study-post__name {
    flex: 0 1 auto;
    min-width: 0;
    font-size: var(--rl-fs-body);
    font-weight: 600;
    color: var(--rl-ink);
    line-height: var(--rl-lh-snug);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* 작성자 메타 줄 — 시간만(과목명·풀이 라벨은 닉네임 우측 배지로 분리). */
.rl-study-post__submeta {
    font-size: var(--rl-fs-caption);
    color: var(--rl-text-3);
    line-height: var(--rl-lh-snug);
}

.rl-study-post__title {
    margin: 0 0 var(--rl-sp-3);
    font-size: var(--rl-fs-h2);
    font-weight: 700;
    line-height: var(--rl-lh-snug);
    color: var(--rl-ink);
    word-break: break-word;
}
/* 질문 유형 표지 — 제목 앞 파란 Q. */
.rl-study-post__q { color: var(--rl-primary); font-weight: 700; }

.rl-study-post__body {
    font-size: var(--rl-fs-body);
    line-height: var(--rl-lh-relaxed);
    color: var(--rl-text);
    word-break: break-word;
    overflow-wrap: anywhere;
}
.rl-study-post__body img { max-width: 100%; height: auto; }
/* 신고 누적 블라인드 글 — 댓글 블라인드와 동일하게 비식별 프로필·제목·본문·기간을 뮤트 톤(text-4)으로. 아바타는 기본 프로필 그대로. */
.rl-study-post--blinded .rl-study-post__name,
.rl-study-post--blinded .rl-study-post__title,
.rl-study-post--blinded .rl-study-post__body,
.rl-study-post--blinded .rl-study-post__submeta { color: var(--rl-text-4); }

/* 조회수 — 본문 아래, 눈 아이콘 + 'N명이 봤어요'(후퇴 톤). */
.rl-study-post__views {
    display: flex;
    align-items: center;
    gap: var(--rl-sp-1);
    margin: var(--rl-sp-5) 0 0;
    font-size: var(--rl-fs-caption);
    color: var(--rl-text-3);
}
.rl-study-post__views svg { width: 1.15em; height: 1.15em; }

/* 공감 + (소유자) 수정·삭제 행 — 구분선 없이 여백으로만 분리. */
.rl-study-post__react {
    display: flex;
    align-items: center;
    gap: var(--rl-sp-3);
    margin-top: var(--rl-sp-4);
}

/* ===== 댓글 ===== */
/* 본문과 동일하게 풀블리드 흰 면. 위 두꺼운 top border(sp-3)가 글↔댓글 구분 띠(--rl-bg, 페이지 배경보다 진한 회색).
   margin 대신 border로 두면 풀블리드 너비 그대로 색이 차 거터 끝까지 띠가 이어진다. */
.rl-study-comments {
    margin-inline: calc(-1 * var(--rl-page-padding-x));
    padding: var(--rl-sp-5) var(--rl-page-padding-x) var(--rl-sp-2);
    background: var(--rl-surface);
    border-top: var(--rl-sp-2) solid var(--rl-bg);
}
.rl-study-comments__title {
    margin: 0 0 var(--rl-sp-3);
    font-size: var(--rl-fs-body);
    font-weight: 500;
    color: var(--rl-text-2);
}
/* 댓글 행 — 아바타 + 본문 컬럼(이름·메타·본문·액션). 댓글 간 구분선 없음(패딩만으로 분리). */
.rl-study-comment {
    display: flex;
    gap: var(--rl-sp-3);
    padding: var(--rl-sp-3) 0;
    /* #c_<id> 앵커 이동 시 sticky 앱바에 가리지 않도록 — 앱바 높이+safe-top+여백만큼 위로 마진(auth.css와 동일 패턴). */
    scroll-margin-top: calc(var(--rl-safe-top, env(safe-area-inset-top, 0px)) + var(--rl-h-appbar, 52px) + var(--rl-sp-3));
}
.rl-study-comment__av { align-self: flex-start; }
/* 원댓글(비답글) 프로필 — 2줄 메타(닉네임/통계·시간)에 맞춰 약간 키움(sp-7+sp-2=40). 답글은 sm(32) 유지로 위계. */
.rl-study-comment:not(.rl-study-comment--reply) > .rl-study-comment__av {
    width: calc(var(--rl-sp-7) + var(--rl-sp-2));
    height: calc(var(--rl-sp-7) + var(--rl-sp-2));
}
.rl-study-comment__main { flex: 1 1 auto; min-width: 0; }
/* 닉네임 줄(+태그·활동량 배지) — 글 작성자 행과 동일 톤. 아래 시간 줄로 분리. 닉네임만 축소·말줄임. */
.rl-study-comment__meta {
    display: flex;
    align-items: center;
    gap: var(--rl-sp-1);
    min-width: 0;
    container-type: inline-size;
    font-size: var(--rl-fs-body-sm);
    color: var(--rl-ink);
}
.rl-study-comment__name {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: var(--rl-ink);
}
/* 시간 줄(후퇴 톤) — 시간만. */
.rl-study-comment__submeta {
    margin-bottom: var(--rl-sp-1);
    font-size: var(--rl-fs-caption);
    color: var(--rl-text-3);
}
/* 닉네임 줄 — 닉네임 + 활동량 배지 한 줄 고정. 닉네임만 축소·말줄임, 배지는 비축소. */
.rl-study-post__nameline {
    display: flex;
    align-items: center;
    gap: var(--rl-sp-2);
    min-width: 0;
    container-type: inline-size;
}
/* 활동량 배지('풀이 많음', 글·댓글 공용) — 연한 블루 작은 둥근사각 pill, 본문·제목보다 약한 시각 강도.
   실력·합격·정답률 아님. 배지·아이콘은 비축소; 폭 부족 시 텍스트(__txt)만 숨기고 아이콘 단독 유지(소비처 @container). */
.rl-study-solvebadge {
    display: inline-flex;
    align-items: center;
    gap: var(--rl-sp-1);
    flex: none;
    padding: 0 var(--rl-sp-1);
    font-size: var(--rl-fs-caption-sm);
    font-weight: 500;
    color: var(--rl-text-2);
    background: var(--rl-primary-soft);
    border-radius: var(--rl-r-xs);
    white-space: nowrap;
}
.rl-study-solvebadge__ico {
    flex: none;
    width: var(--rl-sp-3);
    height: var(--rl-sp-3);
}
/* 폭 부족 — 배지 텍스트 숨기고 아이콘 단독(닉네임 ellipsis로도 부족할 때만). 시간은 별도 줄이라 항상 전체. */
@container (max-width: 150px) {
    .rl-study-solvebadge__txt { display: none; }
}
/* 첫 댓글·숨김 태그 — 중립 회색 칩(caption-sm). 숨김만 색상 override. */
.rl-study-comment__firsttag,
.rl-study-comment__hiddentag {
    padding: 0 var(--rl-sp-1);
    font-size: var(--rl-fs-caption-sm);
    font-weight: 500;
    color: var(--rl-text-3);
    background: var(--rl-surface-2);
    border-radius: var(--rl-r-xs);
}
/* 작성자 표식 — 대화 맥락 표식(신뢰 배지 아님)이라 연한 회색 pill로 '풀이 많음'(파란 pill)보다 약하게:
   같은 작은 pill이되 색·굵기를 낮춰 시각 강도를 한 단계 내린다. */
.rl-study-comment__authortag {
    padding: 0 var(--rl-sp-1);
    font-size: var(--rl-fs-caption-sm);
    font-weight: 400;
    color: var(--rl-text-3);
    background: var(--rl-surface-2);
    border-radius: var(--rl-r-xs);
}
/* 숨김 상태 태그(관리자 see-through 전용) — 첫 댓글 칩과 모양 동일, 색상만 붉은 채움(bad)으로 식별. */
.rl-study-comment__hiddentag { color: var(--rl-on-surface-strong); background: var(--rl-bad); }
/* 더보기 시트 액션 그룹·파괴적 액션 색은 modal.css 단일 출처(.rl-sheet-group / .rl-sheet-confirm__btn--danger). */

/* 앱바 더보기 케밥(#rlStudyMore) — 위치 보정 없음(표준 우측 슬롯: __right margin-left:auto + inner padding-right).
   다른 페이지 앱바 우측 버튼과 동일 위치(기존 우측 보정 제거로 살짝 좌측 이동). 크기는 앱바 기본 메트릭(svg 22px). */
/* 댓글 더보기(케밥) — 이름 줄 우측 정렬. 시각은 작게, ::after로 터치 영역 확장. */
.rl-study-comment__more {
    margin-left: auto;
    margin-right: var(--rl-sp-1); /* 케밥 줄을 우측 끝에서 살짝 안쪽으로(앱바 케밥도 동일량 보정해 정렬 유지) */
    flex: 0 0 auto;
    position: relative;
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--rl-text-4);
    cursor: pointer;
    line-height: 0;
}
.rl-study-comment__more svg { width: var(--rl-sp-5); height: var(--rl-sp-5); }
.rl-study-comment__more::after { content: ''; position: absolute; inset: calc(-1 * var(--rl-sp-2)); }
.rl-study-comment__body {
    font-size: var(--rl-fs-body);
    line-height: var(--rl-lh-relaxed); /* 1.6=24px 정수 — 댓글 본문 여유 있게(답답 완화) + 입력창과 동일 줄간 공유 */
    color: var(--rl-text);
    word-break: break-word;
    overflow-wrap: anywhere;
}
/* 대댓글 — 원댓글 아바타(40=sp-7+sp-2) + gap(sp-3)만큼 들여써 부모 본문 컬럼에 정렬. */
.rl-study-comment--reply { margin-left: calc(var(--rl-sp-7) + var(--rl-sp-2) + var(--rl-sp-3)); }
/* 강조 배경 밴드 — 방금 작성한 댓글 / 대댓글 맥락의 대상 댓글 공용. ::before로 좌우 페이지 거터까지 풀폭(레이아웃 흔들림 없음). */
/* z-index:0 — 자체 stacking context 생성. 없으면 ::before(z-index:-1) 밴드가 부모 .rl-study-comments 불투명 배경 뒤로 숨어 안 보임. */
.rl-study-comment--justposted,
.rl-study-comment--replytarget { position: relative; z-index: 0; }
.rl-study-comment--justposted::before,
.rl-study-comment--replytarget::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(-1 * var(--rl-page-padding-x));
    right: calc(-1 * var(--rl-page-padding-x));
    background-color: var(--rl-primary-soft); /* 댓글 영역 강조 — 연한 파랑(primary-soft). z-index 스태킹 수정으로 이제 정상 노출. */
    z-index: -1;
    pointer-events: none;
}
/* 대댓글(들여쓰기)도 밴드가 화면 좌측 끝까지 — 들여쓴 양(--reply margin-left)만큼 left 추가 보정. */
.rl-study-comment--reply.rl-study-comment--justposted::before,
.rl-study-comment--reply.rl-study-comment--replytarget::before {
    left: calc(-1 * (var(--rl-page-padding-x) + var(--rl-sp-7) + var(--rl-sp-2) + var(--rl-sp-3)));
}
/* 방금 작성한 댓글 — 나타날 때·사라질 때 모두 빠른 스르륵(opacity transition + is-hl-on 토글). */
.rl-study-comment--justposted::before { opacity: 0; transition: opacity var(--rl-dur-base) var(--rl-ease-out); }
.rl-study-comment--justposted.is-hl-on::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .rl-study-comment--justposted::before { transition: none; } }
/* 대댓글 맥락 대상 — 애니메이션 없이 맥락 표시 중에만 즉시 노출(opacity 기본 1). */
/* 신고 누적 블라인드 댓글 — 비식별 프로필·본문·기간을 뮤트 톤으로 통일(text-4). 통계 정보는 미노출(기간만), 아바타는 기본 프로필 그대로. */
.rl-study-comment--blinded .rl-study-comment__name,
.rl-study-comment--blinded .rl-study-comment__body,
.rl-study-comment--blinded .rl-study-comment__submeta { color: var(--rl-text-4); }
.rl-study-comments__empty {
    padding: var(--rl-sp-6) 0;
    text-align: center;
}
.rl-study-comments__empty-text {
    margin: 0;
    font-size: var(--rl-fs-body);
    color: var(--rl-text-3);
}
/* 빈 상태 CTA — 첫 댓글 유도(클릭 시 입력바 포커스 / 비회원은 로그인). 시스템 secondary(§3.1.1) + 연필 아이콘. */
.rl-study-comments__empty-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rl-sp-1);
    margin-top: var(--rl-sp-2);
    padding: var(--rl-sp-2) var(--rl-sp-5);
    font-size: var(--rl-fs-label);
    font-weight: 600;
    color: var(--rl-text-2);
    background: var(--rl-surface-2);
    border: 1px solid var(--rl-line-2);
    border-radius: var(--rl-r-btn);
    cursor: pointer;
    text-decoration: none;
}
.rl-study-comments__empty-cta svg { width: 1em; height: 1em; }

/* ===== 하단 고정 댓글 바 (§3.6.7 라인 — fixed·768 cap·safe-area) ===== */
.rl-study-cbar {
    position: fixed;
    left: 50%;
    /* 키보드 노출 시 --rl-kb-inset(rl-keyboard-state.js 단일 게시)만큼 위로 — 키보드 위에 유지.
       닫힘 시 변수=0이라 기본 하단 고정. translateX(-50%)와 같은 transform 속성을 공유하므로 함께 명시.
       --rl-vv-shift: App Shell viewportShift 보정(visual viewport 패닝 시 cbar도 가시영역 추종). 비-App Shell 0. */
    transform: translateX(-50%) translateY(calc(-1 * var(--rl-kb-inset, 0px) + var(--rl-vv-shift, 0px)));
    bottom: 0;
    z-index: 10;
    width: 100%;
    max-width: var(--rl-page-container, 768px);
    box-sizing: border-box;
    padding: var(--rl-sp-2) var(--rl-page-padding-x) calc(var(--rl-sp-2) + var(--rl-safe-bottom-capped, 0px));
    background: var(--rl-surface);
    border-top: 0.5px solid var(--rl-line-2);
}
/* 댓글 페이지 App Shell — 본문(.rl-study)을 내부 스크롤영역화(.rl-composer-scroll-area 재사용).
   하단 = 댓글바 실제 높이(--rl-study-cbar-h, JS 게시) + 키보드(--rl-kb-inset). 댓글바는 가변
   높이(여러 줄·답글 컨텍스트·사진)라 bottomtab 고정값을 못 쓰고 실측 높이를 소비한다.
   2클래스 셀렉터 — mobile-nav.css 기본 .rl-composer-scroll-area(bottom=bottomtab)보다 우선. */
.rl-composer-scroll-area.rl-composer-scroll-area--cbar,
#thema_wrapper.rl-mnav-enabled.rl-mnav-kb-open .rl-composer-scroll-area.rl-composer-scroll-area--cbar {
    bottom: calc(var(--rl-study-cbar-h, var(--rl-h-btn-lg)) + var(--rl-kb-inset, 0px));
}
/* 내부 스크롤영역일 땐 문서스크롤용 끝 여백(.rl-study padding-bottom) 불요 — bottom calc이 댓글바
   공간을 이미 비운다. 내부 호흡만 남긴다(2클래스로 .rl-study 기본 패딩 우선).
   상단 6px = 앱바↔본문 호흡(page-shell §2-b 단일 출처). 이 영역은 position:fixed라 부모 .at-content의
   padding-top:6px가 무효 → 스크롤 영역 자체에서 동일 값으로 재현(없으면 상단 칩이 앱바에 붙음). */
.rl-composer-scroll-area--cbar.rl-study {
    padding-top: 6px;
    padding-bottom: var(--rl-sp-4);
}
/* 키보드 위로 올라간 댓글바는 홈 인디케이터 safe-area 패딩이 불필요(인디케이터는 키보드 뒤) —
   그대로면 댓글바와 키보드 사이 공백. kb-open 시 0으로(컴포저 바와 동일 처리). */
#thema_wrapper.rl-mnav-enabled.rl-mnav-kb-open .rl-study-cbar {
    padding-bottom: var(--rl-sp-2);
}
.rl-study-cbar__inner {
    display: flex;
    flex-direction: column;
    gap: var(--rl-sp-2);
}
/* 답글 컨텍스트 — 입력 바 위 "💬 {원댓글 미리보기}…에 답글 남기는 중 [X]".
   [hidden]는 UA {display:none}과 동일 명시도라 class 룰(.rl-study-cbar__replyctx)에 밀림 — 명시적 숨김 룰 병기. */
.rl-study-cbar__replyctx[hidden] { display: none; }
.rl-study-cbar__replyctx {
    display: flex;
    align-items: center;
    gap: var(--rl-sp-2);
    /* 카드 아님 — 배경/보더/라운드 없이 입력 바 위 인라인 행(좌우 패딩 0 → 아이콘·X가 입력 컬럼 라인 정렬). 입력 폼과 약간 더 띄움. */
    margin-bottom: var(--rl-sp-1);
    font-size: var(--rl-fs-caption);
    color: var(--rl-text-2);
}
.rl-study-cbar__replyicon { flex: 0 0 auto; width: var(--rl-sp-4); height: var(--rl-sp-4); color: var(--rl-text-3); }
/* 채운 말풍선 속 글줄 — 페이지 배경색으로 cut-out(라이트/다크 자동 대비). */
.rl-study-cbar__replyicon line { stroke: var(--rl-surface); stroke-width: 1.6; stroke-linecap: round; }
/* 미리보기(말줄임) + 고정 접미사("…에 답글 남기는 중"). preview만 줄어들며 ellipsis, suffix는 유지. */
.rl-study-cbar__replyto { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; }
.rl-study-cbar__replypreview { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--rl-text); }
.rl-study-cbar__replysuffix { flex: 0 0 auto; color: var(--rl-text-3); }
/* 취소 — 원형(surface-2) + X. 시각은 인라인 텍스트에 맞춰 작게(24), 터치 hit는 ~40(=--h-iconbtn, ::after)로 확보. */
.rl-study-cbar__cancel {
    flex: 0 0 auto;
    position: relative;
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    padding: 0;
    width: var(--rl-sp-6);
    height: var(--rl-sp-6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--rl-surface-2);
    border-radius: var(--rl-r-full);
    color: var(--rl-text-3);
    cursor: pointer;
}
.rl-study-cbar__cancel::after { content: ''; position: absolute; inset: calc(-1 * var(--rl-sp-2)); }
.rl-study-cbar__cancel svg { width: var(--rl-sp-3); height: var(--rl-sp-3); }
.rl-study-cbar__row {
    display: flex;
    align-items: flex-end; /* 입력 필드가 여러 줄로 자라도 전송 버튼은 하단(첫 줄 위치)에 고정 — 위로만 커진다. */
    gap: var(--rl-sp-2);
}
/* 입력 필드 래퍼 — 테두리·라운드·상하 패딩(스크롤되지 않는 고정 여백) 담당. textarea는 무패딩으로 안에서 스크롤만.
   (textarea 자체 padding은 스크롤 시 콘텐츠가 침범해 사라짐 → 패딩을 래퍼로 분리해 항상 보존.) */
.rl-study-cbar__field {
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
    padding: var(--rl-sp-2) var(--rl-sp-4);
    background: var(--rl-surface-2);
    border: 1px solid var(--rl-line-2);
    border-radius: var(--rl-r-md);
}
.rl-study-cbar__field:focus-within { border-color: var(--rl-primary); }
.rl-study-cbar__input {
    display: block;
    width: 100%;
    max-height: calc(var(--rl-lh-relaxed) * 4em); /* 최대 4줄(lh-relaxed=24px 정수 → 4줄=96px 정확, 줄 경계 픽셀 스냅), 초과 시 내부 스크롤 */
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /* 입력 댓글 본문 = 노출 댓글(.rl-study-comment__body)과 동일 역할 → 동일 토큰 공유(fs-body·lh-relaxed·text).
       lh-relaxed(24px 정수): 노출 댓글과 줄간 일치(시각 연속성) + 여유(답답 완화) + 분수(22.5) 아닌 정수라 스크롤 라인 경계 깔끔. */
    font-size: var(--rl-fs-body);
    font-family: inherit;
    line-height: var(--rl-lh-relaxed);
    color: var(--rl-text);
    background: transparent;
    border: 0;
    -webkit-appearance: none;
    appearance: none;
    resize: none;
    overflow-y: auto;
    vertical-align: top;
}
.rl-study-cbar__input:focus { outline: none; }
.rl-study-cbar__input::placeholder { color: var(--rl-text-4); }
/* 전송 — 배경 없는 채워진 종이비행기 아이콘. 폭은 아이콘에 맞게 좁게(좌우 패딩 0), 세로 히트영역만 확보.
   빈 입력=더 약하게(흐림+opacity), 내용 있으면 primary로 활성. row align-items:flex-end로 입력 바 하단에 고정. */
.rl-study-cbar__send {
    flex: 0 0 auto;
    width: var(--rl-sp-6);
    height: var(--rl-h-btn-sm);
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--rl-primary);
    cursor: pointer;
    transition: color .15s var(--rl-ease-out), opacity .15s var(--rl-ease-out);
}
.rl-study-cbar__send svg { width: var(--rl-sp-6); height: var(--rl-sp-6); display: block; }
.rl-study-cbar__send:disabled { color: var(--rl-text-4); opacity: .45; cursor: default; }
/* 댓글 사진 첨부 — picker는 visually-hidden(클릭 가능), 버튼은 입력 좌측 아이콘(전송 버튼과 동일 히트영역·후퇴 톤). */
.rl-study-cbar__picker {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}
.rl-study-cbar__photo {
    flex: 0 0 auto;
    width: var(--rl-sp-6);
    height: var(--rl-h-btn-sm);
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--rl-text-4); /* 글작성 컴포저 사진 아이콘(§3.6.7)과 동일 후퇴 톤 */
    cursor: pointer;
}
/* 글작성 페이지 컴포저 사진 아이콘과 강도·크기 정합 — 22px / stroke 1.5 / text-4(터치 시 primary). */
.rl-study-cbar__photo svg { width: 22px; height: 22px; stroke-width: 1.5; display: block; }
.rl-study-cbar__photo:active { color: var(--rl-primary); }
@media (hover: hover) { .rl-study-cbar__photo:hover { color: var(--rl-primary); } }
/* 선택 사진 미리보기 — 입력 위 썸네일 + 제거(X). */
.rl-study-cbar__preview[hidden] { display: none; }
.rl-study-cbar__thumb {
    position: relative;
    display: inline-block;
    width: calc(var(--rl-sp-8) + var(--rl-sp-5));
    height: calc(var(--rl-sp-8) + var(--rl-sp-5));
    border-radius: var(--rl-r-sm);
    overflow: hidden;
    border: 1px solid var(--rl-line);
    background: var(--rl-surface-2);
}
.rl-study-cbar__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rl-study-cbar__thumbx {
    position: absolute;
    top: var(--rl-sp-1);
    right: var(--rl-sp-1);
    width: var(--rl-sp-5);
    height: var(--rl-sp-5);
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--rl-on-primary);
    background: var(--rl-overlay-soft);
    border-radius: var(--rl-r-full);
    cursor: pointer;
}
.rl-study-cbar__thumbx svg { width: var(--rl-sp-3); height: var(--rl-sp-3); }
/* 댓글 첨부 이미지 — 글 갤러리와 같은 형식(둥근·약한 보더·tap-to-zoom), 비율 16:9. */
.rl-study-comment__photo {
    margin-top: var(--rl-sp-2);
    border-radius: var(--rl-r-md);
    overflow: hidden;
    border: 1px solid var(--rl-line);
    background: var(--rl-surface-2);
    cursor: zoom-in;
}
.rl-study-comment__photo img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
/* 비회원 — 로그인 유도 바. 회원 입력 필드(.rl-study-cbar__field)와 동일한 박스 메트릭(단일행 line-height·padding·1px 보더)
   으로 바 높이를 일치시킨다 — 회원 필드처럼 콘텐츠 1줄(lh-relaxed=24px) + 상하 sp-2 + 1px 보더 = 동일 높이. */
.rl-study-cbar--login { text-decoration: none; }
.rl-study-cbar__loginprompt {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    line-height: var(--rl-lh-relaxed);
    padding: var(--rl-sp-2) var(--rl-sp-4);
    border: 1px solid transparent;
    font-size: var(--rl-fs-body);
    font-weight: 500;
    color: var(--rl-primary);
}
/* 신고로 가려진 글 — 입력 불가 안내 바(로그인 바와 동일 박스 메트릭 재사용, 비액션·뮤트 톤). */
.rl-study-cbar--notice .rl-study-cbar__loginprompt { color: var(--rl-text-4); }

/* 스낵바 — 하단 고정 댓글 바(.rl-study-cbar) 위로 띄움. 바 높이(입력 h-btn-sm + 상·하 패딩 2×sp-2) + safe-area + sp-3 간격
   = mobile-nav의 BottomTab 위 스낵바 패턴과 동일 구조. :has 미지원 시 기본 위치(transient라 회귀 영향 작음). */
@supports selector(:has(*)) {
    body:has(.rl-study-cbar) #rl-snackbar-container {
        bottom: calc(var(--rl-h-btn-sm) + var(--rl-sp-2) * 2 + var(--rl-safe-bottom-capped, 0px) + var(--rl-sp-3));
    }
}

/* ===== 공감 (원글·댓글) ===== */
.rl-study-good {
    display: inline-flex;
    align-items: center;
    gap: var(--rl-sp-2);
    height: var(--rl-h-btn-sm);
    padding: 0 var(--rl-sp-4);
    font-size: var(--rl-fs-label);
    font-weight: 500;
    color: var(--rl-text-2);
    background: var(--rl-surface-elev);
    border: 1px solid var(--rl-line-2);
    border-radius: var(--rl-r-full);
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s var(--rl-ease-out), color .15s var(--rl-ease-out), border-color .15s var(--rl-ease-out);
}
.rl-study-good svg { width: 1.1em; height: 1.1em; }
@media (hover: hover) { .rl-study-good:hover { background: var(--rl-surface-2); } }
.rl-study-good.is-on {
    color: var(--rl-primary);
    background: var(--rl-primary-soft);
    border-color: var(--rl-primary-soft);
}
/* 내가 누른 좋아요/공감 — 엄지 아이콘 속을 색으로 채움(외곽선 → 솔리드). */
.rl-study-good.is-on svg { fill: currentColor; }
.rl-study-good:disabled { cursor: default; }
.rl-study-good__count { font-variant-numeric: tabular-nums; }

/* 댓글 액션행 — 공감 · 답글 · 삭제(우측) */
.rl-study-comment__actions {
    display: flex;
    align-items: center;
    gap: var(--rl-sp-3);
    margin-top: var(--rl-sp-2);
}
/* 댓글 공감 — 칩(테두리·배경·라운드) 벗고 아이콘+텍스트 평문 액션으로 바로 노출. 답글쓰기와 동일 톤.
   아이콘·라벨·숫자는 한 덩어리(gap sp-1, 답글 버튼과 동일). */
.rl-study-good--sm {
    gap: var(--rl-sp-1);
    height: auto;
    padding: var(--rl-sp-1) 0;
    border: 0;
    background: transparent;
    border-radius: 0;
    color: var(--rl-text-3);
    font-weight: 500;
    font-size: var(--rl-fs-caption);
}
.rl-study-good--sm.is-on { background: transparent; }
.rl-study-good--sm:hover { background: transparent; }
/* 답글쓰기 — 아이콘 + 라벨 평문 액션(공감 sm과 동일 톤). */
.rl-study-reply-btn {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: var(--rl-sp-1);
    border: 0;
    background: transparent;
    padding: var(--rl-sp-1) 0;
    font-size: var(--rl-fs-caption);
    font-weight: 500;
    color: var(--rl-text-3);
    cursor: pointer;
}
.rl-study-reply-btn svg { width: 1.1em; height: 1.1em; }

/* 답글 스레드 하단 입력 행 — 독립 빈 프로필 + 테두리 입력 필드(분리). 탭 시 해당 원댓글에 답글.
   대댓글 입력이므로 프로필 시작 위치를 대댓글(.rl-study-comment--reply)과 동일하게 들여씀. */
.rl-study-reply-promptrow {
    display: flex;
    align-items: center;
    gap: var(--rl-sp-2);
    /* 댓글 행(.rl-study-comment)과 동일 상하 패딩으로 리듬 정합. 인덴트만 margin-left. */
    padding: var(--rl-sp-3) 0;
    margin-left: calc(var(--rl-sp-7) + var(--rl-sp-2) + var(--rl-sp-3));
}
.rl-study-reply-promptrow__av { align-self: center; }
/* 입력 필드 — 테두리만(배경 없음), 남은 폭 채움, placeholder 톤. */
.rl-study-reply-prompt {
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    padding: var(--rl-sp-2) var(--rl-sp-4);
    text-align: left;
    font-size: var(--rl-fs-caption);
    color: var(--rl-text-4);
    background: transparent;
    border: 1px solid var(--rl-line-2);
    border-radius: var(--rl-r-full);
    cursor: pointer;
}

/* 댓글 액션(좋아요·답글쓰기) — 시각은 콤팩트하게 두되 모바일 터치 영역을 ::after로 확장(세로 +sp-2×2, 가로 +sp-1×2).
   가로 확장(sp-1=4)은 액션 간 간격(sp-3=12)의 절반 미만이라 인접 타깃과 겹치지 않음(§6.4 hit area 확장 패턴). */
.rl-study-good--sm,
.rl-study-reply-btn { position: relative; }
.rl-study-good--sm::after,
.rl-study-reply-btn::after {
    content: '';
    position: absolute;
    inset: calc(-1 * var(--rl-sp-2)) calc(-1 * var(--rl-sp-1));
}

/* ===== 폼 (글쓰기 · 댓글) ===== */
/* 그룹(주제/시험 결과/점수대/관련 과목) 간 갭은 단일값(sp-4)으로 통일 — 각 필드 margin-bottom이 단일 출처.
   아코디언 inner(overflow:hidden) 안의 필드 margin은 접힐 때 함께 클립돼 phantom 갭이 없다.
   sheetbody flex gap(sp-5)과 이중 적용을 피하려 메인 페이지는 flex gap을 0으로(서브페이지 검색은 유지). */
.rl-study-field { margin-bottom: var(--rl-sp-4); }
.rl-sheet-page[data-page="main"] .rl-study-sheetbody { gap: 0; }
/* 마지막 그룹(관련 과목) 아래는 패널 하단 패딩이 호흡 담당 — 이중 여백 제거. */
.rl-study-sheetbody > .rl-study-field:last-child { margin-bottom: 0; }
.rl-study-field__label {
    display: block;
    margin-bottom: var(--rl-sp-2);
    font-size: var(--rl-fs-label);
    font-weight: 500;
    color: var(--rl-text-2);
}

/* 조건부 펼침(시험후기→시험 결과, 합격→점수대) — grid 0fr↔1fr 아코디언.
   접힘 시 inner(overflow:hidden)가 0으로 클립돼 안쪽 필드 margin까지 함께 사라짐(phantom 갭 없음).
   §1.14 reveal 정신 — 위→아래로 자연스럽게 펼침, scale/bounce 없음. */
.rl-study-reveal {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--rl-dur-base) var(--rl-ease-out);
}
.rl-study-reveal.is-open { grid-template-rows: 1fr; }
.rl-study-reveal__inner { overflow: hidden; min-height: 0; }
@media (prefers-reduced-motion: reduce) {
    .rl-study-reveal { transition: none; }
}

/* 점수대 칩 — 줄바꿈 pill 버튼(aria-pressed, 재클릭 해제 가능한 선택값). */
.rl-study-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rl-sp-2);
}
.rl-study-chip {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    padding: var(--rl-sp-2) var(--rl-sp-4);
    font-size: var(--rl-fs-body-sm);
    font-weight: 500;
    color: var(--rl-text-2);
    background: var(--rl-surface-elev);
    border: 1px solid var(--rl-line-2);
    border-radius: var(--rl-r-full);
    cursor: pointer;
    transition: background-color .15s var(--rl-ease-out), border-color .15s var(--rl-ease-out), color .15s var(--rl-ease-out), transform .1s var(--rl-ease-out);
}
.rl-study-chip[aria-pressed="true"] {
    color: var(--rl-primary);
    background: var(--rl-primary-soft);
    border-color: var(--rl-primary);
}
/* 칩 press — 차분하고 빠른 반응(살짝 축소, bounce 없음). */
.rl-study-chip:active { transform: scale(0.98); }
.rl-study-chip:focus-visible {
    outline: 2px solid var(--rl-primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .rl-study-chip { transition: background-color .15s, border-color .15s, color .15s; }
}

/* ===== 풀스크린 컴포저 (글쓰기 · §3.10) ===== */
.rl-study-compose {
    display: flex;
    flex-direction: column;
    gap: var(--rl-sp-4);
    /* 위치·overflow·좌우 패딩은 .rl-composer-scroll-area(경계 스크롤 영역, mobile-nav.css)가 담당. 여기선 상하 호흡만. */
    padding-top: var(--rl-sp-4);
    padding-bottom: var(--rl-sp-5);
}
/* 자식은 줄어들지 않게 — 본문 textarea의 auto-grow 높이가 flex-shrink로 압축돼 내용이 잘리는 것 방지(컨테이너가 스크롤). */
.rl-study-compose > * { flex-shrink: 0; }

/* §3.10.1 상단 메타 disclosure — 선택 전 안내 평문 / 선택 후 pill([주제]·[결과·점수]·[과목]). 영역 전체가 시트 트리거. */
.rl-study-pick {
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: center;
    gap: var(--rl-sp-2);
    width: 100%;
    text-align: left;
    /* 카드 아님 — 페이지에 그대로(배경·라운드 없음), 캔버스(제목/본문)와 좌측 정렬 위해 가로 패딩 0.
       하단 보더로 메타 영역을 본문 캔버스와 구분(divider). */
    padding: 0 0 var(--rl-sp-3);
    background: none;
    border: 0;
    border-bottom: 1px solid var(--rl-line-2);
    color: var(--rl-text-2);
    cursor: pointer;
}
.rl-study-pick__body {
    display: flex;
    flex-wrap: nowrap; /* 한 줄 유지 — 긴 과목 칩은 말줄임(줄바꿈으로 지저분해지지 않게) */
    align-items: center;
    gap: var(--rl-sp-2);
    flex: 0 1 auto; /* 폭을 채우지 않음 — 꺽쇠가 내용(안내문/칩) 바로 오른쪽에 붙도록 */
    min-width: 0;
    overflow: hidden;
    /* 높이 고정 — 안내문(평문)과 칩 상태의 행 높이를 칩 1개 높이로 예약해 선택 시 흔들림 방지.
       칩 높이 = 글자(micro) × lh-tight + 상하 패딩(sp-1×2). 토큰만(raw px 없음). */
    min-height: calc(var(--rl-fs-micro) * var(--rl-lh-tight) + var(--rl-sp-1) * 2);
}
/* 선택 전 안내 — pill 아님(평문). 필수 입력처럼 보이지 않도록 톤 다운. */
.rl-study-pick__prompt {
    font-size: var(--rl-fs-body);
    font-weight: 500;
    color: var(--rl-text-3);
}
.rl-study-pick__chev { flex: 0 0 auto; width: 1.1em; height: 1.1em; color: var(--rl-text-4); }
.rl-study-pick:focus-visible { outline: 2px solid var(--rl-primary); outline-offset: 2px; }

/* §3.10.2 메타 칩 — 작성/목록/상세 공통 단일 칩. 회색(surface-2)·각진(r-xs)·작은 글씨로 통일(주제/결과/점수/과목 동일).
   텍스트 9자 컷은 코드(JS truncPill / PHP rl_study_pill_html)가 단일 출처 — CSS overflow는 폭 안전망. */
.rl-study-pill {
    display: inline-flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 12em; /* 전 화면(목록·상세·작성) 칩 공통 — 긴 내용은 9자 코드 컷(rl_study_pill_html) + 이 폭에서 말줄임 안전망 */
    padding: var(--rl-sp-1) var(--rl-sp-2);
    border-radius: var(--rl-r-2xs);
    background: var(--rl-surface-2);
    color: var(--rl-text-3);
    font-size: var(--rl-fs-micro);
    font-weight: 500;
    line-height: var(--rl-lh-tight);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 과목 검색 결과 — 5개 + 메타 + 하단 안내 높이를 검색 전부터 예약(min-height). 결과 개수가 바뀌거나
   검색 결과가 처음 등장해도 시트 높이가 점프하지 않고, 5개일 때 아래 여백 없이 딱 맞게 채워진다. */
/* 결과 박스 높이는 검색 결과에 따라 동적(딱 맞게). 회색 박스 대신 시트 흰 배경에 얹은 가벼운 리스트(배경·테두리 제거). */
#rlStudySubjResults { box-sizing: border-box; background: transparent; border-color: transparent; }
/* 검색 전(비활성)엔 결과 박스 접음(검색하면 결과만 노출). */
#rlStudySubjResults:not(.is-active) { display: none; }
/* 하단 안내 — 리스트 바로 아래 자연스럽게(상단 여백 축소) + 문장별 줄바꿈(두 줄 고정, 읽기 안정). */
#rlStudySubjResults .rl-main-quick-overflow { padding-top: var(--rl-sp-2); }
#rlStudySubjResults .rl-main-quick-overflow > span { display: block; }
/* 과목 페이지 — 검색 결과 길이가 바뀌어도 시트가 흔들리지 않도록 본문 높이 예약(최대 상태=3개+메타+안내 기준).
   목록 과목 필터 시트(.rl-subjpick-sheet)도 동일 예약 공유(단일 출처 값). */
.rl-sheet-page[data-page="subject"] .rl-study-sheetbody,
.rl-subjpick-sheet .rl-study-sheetbody { min-height: 275px; }

/* 관련 과목 칩 — 과목명 + 변경(꺽쇠)을 한 덩어리로(선택값·액션 연결감). 탭하면 과목 선택 페이지. */
.rl-study-subjchip {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: var(--rl-sp-2);
    max-width: 100%;
    padding: var(--rl-sp-2) var(--rl-sp-4);
    background: var(--rl-surface-elev);
    border: 1px solid var(--rl-line-2);
    border-radius: var(--rl-r-full);
    cursor: pointer;
    font-size: var(--rl-fs-body-sm);
}
.rl-study-subjchip__name {
    font-weight: 600;
    color: var(--rl-ink); /* 선택값 — 진하게(비활성처럼 보이지 않게) */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rl-study-subjchip__act {
    display: inline-flex;
    align-items: center;
    gap: var(--rl-sp-1);
    flex: 0 0 auto;
    color: var(--rl-text-3);
}
.rl-study-subjchip__act .rl-chevron-right { color: var(--rl-text-4); }
.rl-study-subjchip:focus-visible { outline: 2px solid var(--rl-primary); outline-offset: 2px; }

/* §3.10.5 캔버스 — 제목(첫째)·본문. 라벨 없는 캔버스형, 얇은 divider로만 분리. */
.rl-study-title-input {
    width: 100%;
    box-sizing: border-box;
    /* 메타(픽) 행과 분리 — 위쪽 여백을 균일 gap보다 조금 더(제목+본문을 한 블록으로 묶기 위함). */
    margin-top: var(--rl-sp-2);
    padding: 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    color: var(--rl-ink);
    font-size: var(--rl-fs-h3);
    font-weight: 700;
    line-height: var(--rl-lh-snug);
}
.rl-study-title-input::placeholder { color: var(--rl-text-4); font-weight: 700; }
.rl-study-title-input:focus { outline: none; }

.rl-study-body-input {
    width: 100%;
    box-sizing: border-box;
    /* 제목 줄과 연결(하나의 블록)하되 살짝 띄움 — compose 균일 gap(sp-4)을 부분 상쇄해 제목↔본문 간격 sp-2로. */
    margin-top: calc(var(--rl-sp-2) - var(--rl-sp-4));
    /* 가용 공간을 채우는 캔버스 — 짧은 본문에도 바 위까지 차고(빈 공백 방지·탭 어디나 포커스),
       사진 첨부 시 사진이 자연히 최하단에 온다. 내용이 길면 mirror auto-grow가 높이를 넘겨 컨테이너가 스크롤.
       채움은 flex-grow가 단독 담당 — vh 바닥값 금지: vh는 레이아웃 뷰포트(키보드 포함) 기준이라
       키보드 열림 시 스크롤 영역(.rl-composer-scroll-area)이 키보드 위로 줄어도 본문이 안 줄어
       빈 상태에서도 영역을 넘겨 스크롤이 생기고, 캐럿이 가시영역 밖이 돼 iOS가 visual viewport를
       패닝하며 sticky 앱바를 밀어 올린다. 바닥값 0이면 키보드 열림 시 본문도 함께 줄어 오버플로 없음. */
    flex-grow: 1;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    resize: none;
    overflow: hidden; /* 내부 스크롤 제거 — JS auto-grow로 내용만큼 늘어나 페이지 전체가 스크롤. */
    font-family: inherit;
    color: var(--rl-ink);
    font-size: var(--rl-fs-body);
    line-height: var(--rl-lh-relaxed);
}
.rl-study-body-input::placeholder { color: var(--rl-text-4); }
.rl-study-body-input:focus { outline: none; }

/* §3.10.3 사진 첨부 — 트리거 + 썸네일 슬롯 그리드 */
/* 사진 strip은 본문과 함께 흐름대로 스크롤(선택행+제목+본문+썸네일 한 덩어리). 고정/sticky 아님.
   타이핑 시 사진이 바 아래로 숨지 않게는 JS가 scroll-padding-bottom을 strip 높이만큼 확보 —
   caret-into-view가 strip 높이 위에서 멈춰 타이핑 중엔 사진이 캐럿 바로 아래 보이고, 수동 스크롤 땐 함께 이동. */
.rl-study-photos { display: flex; flex-direction: column; gap: var(--rl-sp-3); }
/* [hidden]는 UA의 [hidden]{display:none}과 동일 명시도라 .rl-study-photos(class)에 짐 — 명시적으로 숨김
   (미적용 시 첨부 0/전부삭제에도 빈 strip 잔존). */
.rl-study-photos[hidden] { display: none; }
/* 여러 장 첨부 시 한 줄 가로 strip(세로로 안 늘어나 바 가림 방지).
   5장은 스크롤 없이 한 화면, 6장째부터 가로 스크롤 — 스크롤바는 네이티브 오버레이(스크롤 중에만 표시·자동 소멸). */
.rl-study-photos__grid {
    display: flex;
    gap: var(--rl-sp-3); /* 썸네일 간격 — ×(반 8px) 오버행 후에도 다음 카드와 ~4px 간격 확보 */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* 삭제 × 버튼이 우상단 꼭지점에 반쯤 오버행 — 위/오른쪽 패딩(버튼 절반)으로 오버행이 스크롤 클립에 안 잘리게. */
    padding-top: var(--rl-sp-2);
    padding-right: var(--rl-sp-2);
}
.rl-study-photos__grid:empty { display: none; }
/* 마우스 드래그 가로 스크롤 — 스크롤 가능할 때 grab, 드래그 중 grabbing(+ 선택 차단). 터치는 네이티브 스크롤. */
.rl-study-photos__grid.is-scrollable { cursor: grab; }
.rl-study-photos__grid.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }

/* 고정 슬롯·임시 picker input — 화면 미노출. picker는 JS click()로 파일 선택 트리거하므로 display:none 대신
   visually-hidden(WebView 파일 선택 호환). 슬롯은 DataTransfer 주입만 받으므로 display:none(파일은 정상 제출). */
.rl-study-photos__slots { display: none; }
.rl-study-photos__picker {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.rl-study-photo {
    position: relative;
    flex: 0 0 auto;
    width: calc((100% - var(--rl-sp-3) * 4) / 5); /* 스크롤 없이 5장 노출(간격 sp-3와 동기화) */
    aspect-ratio: 1 / 1;
    border-radius: var(--rl-r-sm);
    border: 1px solid var(--rl-line); /* 약한 윤곽 — 밝은 이미지가 페이지 배경과 안 섞이게 */
    box-sizing: border-box;
    background: var(--rl-surface-2);
    /* overflow:hidden 제거 — 삭제 × 버튼이 꼭지점 밖으로 반쯤 오버행해야 하므로. 이미지 라운딩은 __img로 이전. */
}
.rl-study-photo__img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--rl-r-sm); -webkit-user-drag: none; }
.rl-study-photo__file {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: var(--rl-sp-2);
    font-size: var(--rl-fs-caption);
    color: var(--rl-text-3);
    text-align: center;
    word-break: break-all;
}
.rl-study-photo__x {
    position: absolute;
    /* 중앙이 썸네일 우상단 꼭지점에 오도록 반쯤 오버행(오프셋 = 버튼 크기의 절반). */
    top: calc(var(--rl-sp-5) / -2);
    right: calc(var(--rl-sp-5) / -2);
    z-index: 1;
    width: var(--rl-sp-5);
    height: var(--rl-sp-5);
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--rl-on-primary);
    background: var(--rl-overlay-soft);
    border-radius: var(--rl-r-full);
    cursor: pointer;
}
.rl-study-photo__x svg { width: var(--rl-sp-3); height: var(--rl-sp-3); }
/* 기존 첨부 삭제 표시 — 흐리게 + × 강조. 슬롯은 신규 추가에 재사용. */
/* 기존 이미지 × 클릭 시 즉시 화면에서 제거 — 삭제 표시 checkbox(bf_file_del)는 셀 안에 남아 제출돼 서버에서 삭제. */
.rl-study-photo.is-deleted { display: none; }

/* "사진 추가" 트리거·개수는 하단 컴포저 바(.rl-mnav-bottomtab__action / __action-count, mobile-nav.css)로 이동. */
.rl-study-photos__note { font-size: var(--rl-fs-caption); line-height: var(--rl-lh-snug); color: var(--rl-text-3); }
.rl-study-photos__note--error { color: var(--rl-bad-text); }

/* §3.10.2 과목·글유형 시트 콘텐츠 (.rl-sheet 셸 재사용) */
.rl-study-sheetbody {
    display: flex;
    flex-direction: column;
    gap: var(--rl-sp-5);
    padding: 0 var(--rl-sp-5);
    max-height: 60vh;
    overflow-y: auto;
}
.rl-sheet-foot {
    padding: var(--rl-sp-4) var(--rl-sp-5) calc(var(--rl-sp-5) + env(safe-area-inset-bottom, 0px));
}

/* §3.10.4 상세 이미지 갤러리 — 가로 스와이프 캐러셀(자유 스크롤, 슬라이드 70% peek) + n/N 카운터(가장 앞 이미지 기준). 단일 이미지는 풀폭 자연비. */
.rl-study-gallery { margin-top: var(--rl-sp-4); }
/* full-bleed 클리퍼 — 화면 끝까지 펴고(음수 마진) 가로 넘침을 잘라낸다. 트랙은 이 안에서 transform으로 이동.
   트랙을 overflow 스크롤 컨테이너로 두면 App Shell 고정 스크롤러 안에서 세로 스와이프를 가둬(iOS) 페이지가
   안 스크롤된다 → 트랙은 비-스크롤 컨테이너(transform 이동, rl-hcarousel.js)로 두고 세로는 네이티브에 위임. */
.rl-study-gallery__viewport {
    position: relative;
    margin-inline: calc(-1 * var(--rl-page-padding-x));
    overflow: hidden;
}
.rl-study-gallery__track {
    display: flex;
    gap: var(--rl-sp-2);
    /* 안쪽 padding-inline로 첫/마지막 슬라이드를 페이지 패딩 라인에 정렬(양 끝 좌우 여백 유지). */
    padding-inline: var(--rl-page-padding-x);
    /* 세로=브라우저 네이티브(=본문 글자와 동일한 페이지 스크롤), 가로 스와이프만 rl-hcarousel.js가 처리. */
    touch-action: pan-y;
    will-change: transform;
}
/* hover 포인터(데스크탑)에서만 grab 커서 + 드래그 중 텍스트 선택 방지. */
@media (hover: hover) {
    .rl-study-gallery__track { cursor: grab; user-select: none; -webkit-user-select: none; }
    .rl-study-gallery__track.is-grabbing { cursor: grabbing; }
}
.rl-study-gallery__track img { -webkit-user-drag: none; user-drag: none; }
.rl-study-gallery__item {
    /* 한 장 풀 + 다음 한 장 절반(+사이 gap)이 정확히 뷰포트에 맞도록: S + gap + S/2 = 100% → S = (100% - gap)/1.5. */
    flex: 0 0 calc((100% - var(--rl-sp-2)) / 1.5);
    position: relative; /* 첫 이미지에 붙는 카운터 anchor */
    border-radius: var(--rl-r-md);
    overflow: hidden;
    background: var(--rl-surface-2);
    border: 1px solid var(--rl-line); /* 매우 약한 보더 — 흰 배경 이미지 경계(§2.10 invert 금지 보완) */
}
.rl-study-gallery__item img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}
/* 단일 이미지는 풀폭 — 단, 다중과 동일하게 정방형(1/1 cover) 유지. */
.rl-study-gallery__item:only-child { flex-basis: 100%; }
/* 1/N 카운터 — 첫 이미지 좌하단에 붙는 정적 배지(총 장수 안내, 갱신 안 함). 작게·패딩 최소. 2장+에서만 출력. */
.rl-study-gallery__count {
    position: absolute;
    left: var(--rl-sp-2);
    bottom: var(--rl-sp-2);
    padding: 0 var(--rl-sp-2);
    background: var(--rl-overlay-soft);
    color: var(--rl-on-primary);
    font-size: var(--rl-fs-caption-sm);
    font-weight: 600;
    line-height: var(--rl-lh-relaxed);
    border-radius: var(--rl-r-full);
    pointer-events: none;
}
.rl-study-gallery__file {
    display: block;
    margin-top: var(--rl-sp-2);
    padding: var(--rl-sp-3) var(--rl-sp-4);
    font-size: var(--rl-fs-label);
    color: var(--rl-primary);
    background: var(--rl-surface-2);
    border-radius: var(--rl-r-md);
    text-decoration: none;
    word-break: break-all;
}

/* ===== 과목 선택 바텀시트 (rl_subject_picker_sheet.php — 목록 과목 필터) =====
   헤더·검색 결과·본문 높이 예약은 글쓰기 "관련 과목 선택" 서브페이지와 동일 자산 재사용
   (.rl-sheet-head / .rl-main-quick-search / .rl-study-sheetbody). */
/* 검색 결과 박스 — 시트 흰 배경에 얹은 가벼운 리스트(배경·테두리 제거, 글쓰기 시트 정합). */
#rlSubjPickResults { background: transparent; border-color: transparent; }
#rlSubjPickResults .rl-main-quick-overflow { padding-top: var(--rl-sp-2); }
#rlSubjPickResults .rl-main-quick-overflow > span { display: block; }

/* ===== 문제 기반 질문·오류 제보 (문제 연결 / 상태 배지 / 연결 문제 카드 / 관리자 상태) ===== */

/* 오류 제보 처리 상태 배지 — .rl-study-pill 기반 + 상태 시맨틱 토큰(접수=info / 검토중=warn / 반영완료=good). */
.rl-study-pill--status.is-received { background: var(--rl-info-soft); color: var(--rl-info-text); }
.rl-study-pill--status.is-reviewing { background: var(--rl-warn-soft); color: var(--rl-warn-text); }
.rl-study-pill--status.is-resolved { background: var(--rl-good-soft); color: var(--rl-good-text); }
/* 숨김 상태 칩(관리자 see-through 전용) — 옆 메타 칩(.rl-study-pill)과 모양 동일, 색상만 붉은 채움(bad)으로 식별. */
.rl-study-pill--hidden { background: var(--rl-bad); color: var(--rl-on-surface-strong); }

/* 연결 문제 카드 래퍼(상세·작성 공용) — 라벨 + rl-qcard. 로드 불가 시 fallback 안내. */
.rl-study-linkedq { margin-top: var(--rl-sp-4); }
/* 작성 컴포저에서는 위 pickfix와 flex gap(sp-4)이 간격을 담당 → 중복 상단 마진 제거. */
.rl-study-compose .rl-study-linkedq { margin-top: 0; }
/* 상세(.rl-study-post)에서만 연결문제 섹션 위·아래에 매우 약한 라인(--line) — 본문/갤러리와 구분.
   위 라인 갭: margin-top(sp-4, 본문→라인) + padding-top(sp-4, 라인→헤더). 아래 라인 갭: padding-bottom(sp-4) + 다음 요소 margin-top. */
/* 연결 문제 섹션 위·아래 매우 약한 라인(--line) — 갤러리 유무 무관 항상(본문/아래 콘텐츠와 구분). */
.rl-study-post .rl-study-linkedq {
    padding-top: var(--rl-sp-4);
    padding-bottom: var(--rl-sp-4);
    border-top: 1px solid var(--rl-line);
    border-bottom: 1px solid var(--rl-line);
}
/* 연결문제 섹션 ↔ 본문 입력 구분선(§3.4.6 Divider). 컴포저 divider 톤(line-2) 정합. 위아래 갭은 compose flex gap(sp-4). */
.rl-study-linkedq-sep { margin: 0; border: 0; border-top: 1px solid var(--rl-line-2); }
/* 본문 textarea는 일반 흐름에서 위 요소와 밀착용 음수 마진(-6px) → divider 바로 뒤에선 0으로 돌려 라인 위아래 갭 대칭. */
.rl-study-linkedq-sep + .rl-study-body-input { margin-top: 0; }
.rl-study-linkedq__label {
    margin-bottom: var(--rl-sp-2);
    padding-inline: var(--rl-sp-1);
    font-size: var(--rl-fs-label);
    font-weight: 600;
    color: var(--rl-text-2);
}
.rl-study-linkedq__fallback {
    margin: 0;
    padding: var(--rl-sp-4);
    font-size: var(--rl-fs-body-sm);
    color: var(--rl-text-3);
    background: var(--rl-surface-2);
    border-radius: var(--rl-r-md);
}
/* 작성 화면 접이식(카드 없음) — 헤더 전체가 토글, chevron만. 기본 접힘: 요약 한 줄만 노출, 펼치면 문제 본문 인라인. */
.rl-study-linkedq__header {
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
}
/* 좌측 섹션 타이틀("연결된 문제") — 본문 톤. */
.rl-study-linkedq__header .rl-study-linkedq__label { margin-bottom: 0; padding-inline: 0; color: var(--rl-text); font-weight: 400; }
/* 우측 토글 액션(보기/닫기 + chevron) — 보조 affordance라 약한 톤(text-4)·작은 글씨. */
.rl-study-linkedq__action {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--rl-sp-1);
    font-size: var(--rl-fs-caption);
    color: var(--rl-text-4);
}
/* 관리자 변형 — 연결된 문제 헤더 바: [라벨][바로가기] … [토글 액션]. 라벨이 토글 밖이라 헤더 톤으로 복원. */
.rl-study-linkedq__bar { display: flex; align-items: center; gap: var(--rl-sp-2); }
.rl-study-linkedq__bar .rl-study-linkedq__label { margin-bottom: 0; padding-inline: 0; color: var(--rl-text); font-weight: 400; }
.rl-study-linkedq__bar .rl-study-linkedq__header--compact { width: auto; flex: 0 0 auto; margin-left: auto; }
.rl-study-linkedq__editlink {
    display: inline-flex;
    align-items: center;
    gap: var(--rl-sp-1);
    font-size: var(--rl-fs-caption);
    font-weight: 600;
    color: var(--rl-primary);
    text-decoration: none;
    white-space: nowrap;
}
.rl-study-linkedq__editlink:hover { text-decoration: underline; }
.rl-study-linkedq__header:focus-visible { outline: 2px solid var(--rl-primary); outline-offset: 2px; }
.rl-study-linkedq__chev {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    color: var(--rl-text-4);
    transition: transform var(--rl-dur-base) var(--rl-ease-out);
}
/* 접힘=아래(˅), 펼침=위(˄, 180° 회전). */
.rl-study-linkedq.is-open .rl-study-linkedq__chev { transform: rotate(180deg); }
.rl-study-linkedq__body { margin-top: var(--rl-sp-2); }
/* 안쪽 문제 컨테이너 자체 프레임 제거 — 펼친 문제는 테두리·배경·라운드·패딩 없이 인라인. */
.rl-study-linkedq--collapsible .rl-learn .view-content .question-container { padding: 0 !important; border: 0; background: transparent; border-radius: 0; }
/* 접힘 미리보기 — 펼침과 같은 카드(위치 동일 → 토글 시 안 흔들림), 단 문제는 1줄 말줄임 + 펼침(text-2·500)보다 약한 강도(text-3·weight 400). 보기는 숨김. */
.rl-study-linkedq--collapsible:not(.is-open) .rl-learn .view-content .question {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 400;
    color: var(--rl-text-3);
}
/* 펼침/접힘 모션 — 보기(선택지)를 정답·해설(.rl-qcard-explain__body)과 동일한 grid 0fr↔1fr 아코디언으로 reveal
   (dur-emph·ease-out, 높이 가변·max-height 측정 불필요). 문제 1줄↔전체는 line-clamp라 즉시, chevron은 회전(위).
   답 영역의 margin-top(아래 .answer-container)은 inner(overflow:hidden) 안에 있어 행 성장과 함께 자연 노출/클립된다. */
.rl-study-linkedq__reveal {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--rl-dur-emph) var(--rl-ease-out);
}
.rl-study-linkedq.is-open .rl-study-linkedq__reveal { grid-template-rows: 1fr; }
.rl-study-linkedq__reveal-inner { overflow: hidden; min-height: 0; }
@media (prefers-reduced-motion: reduce) {
    .rl-study-linkedq__reveal { transition: none; }
}

/* 연결 문제 카드 = 모의시험 진행 화면의 문제 영역 마크업·스타일을 그대로 재사용
   (learn.css `.rl-learn .view-content .question-container/.question/.answer-container`).
   프레임·문제·보기 간격·이미지 가운데정렬·표 보더/가로스크롤·보기 번호 전부 learn.css 단일 출처(드리프트 0).
   study에서는 읽기전용 보정만 한다. */
/* 부가 정보 위계 — 질문 본문(fs-body·ink)이 메인. 연결 문제는 그보다 "뚜렷이 약하게"(작은 글씨·옅은 색·좁은 간격·작은 패딩). */
.rl-study-linkedq .rl-learn .question-container { margin: 0; padding: var(--rl-sp-3) !important; border-radius: var(--rl-r-sm); }
/* 식별 메타(시행일 · 과목) — 카드 상단 아주 작게, 본문/질문보다 한 단계 더 연하게(text-4). */
.rl-study-linkedq .rl-learn .question-container .rl-qcard-meta {
    margin-bottom: var(--rl-sp-2);
    font-size: var(--rl-fs-caption);
    color: var(--rl-text-4);
}
/* 정답률 동반 풀이 수("풀이 N회", 보조 세그먼트) — 토큰 분리 방지(nowrap). 공간 부족(메타 줄바꿈) 시 JS가
   [hidden] 처리해 정답률까지만 남긴다(읽기 표면 rl_study_view 전용 핏 스크립트). */
.rl-study-linkedq .rl-learn .question-container .rl-qcard-meta__attempts { white-space: nowrap; }
/* 문제 질문 — 본문보다 약간만 굵게(500), 색은 한 단계 약하게(text-2)로 위계만 부여. */
.rl-study-linkedq .rl-learn .view-content .question {
    padding: 0;
    font-size: var(--rl-fs-label);
    line-height: var(--rl-lh-snug);
    font-weight: 500;
    color: var(--rl-text-2);
}
/* 빈 단락 호흡(.rl-q-spacer) 무력화 — 컴팩트 보조 카드라 빈 <p> 간격 제거(모의시험 결과 화면 rl_mock_result와 동일 처리).
   단락 간격은 아래 .question p margin이 담당. */
.rl-study-linkedq .rl-learn .view-content .question .rl-q-spacer { height: 0; margin: 0; }
/* 문제 내부 요소(문단·예시박스·리스트·표) 패딩·글씨·강도·행간도 줄어든 본문 톤에 맞춰 일괄 축소(비율 유지). */
/* 문제 내 블록(문단·그림단락·예시박스·표) 간 세로 간격 sp-2(8px) — 보기 영역 위 마진(sp-3)보다 작게 유지. */
.rl-study-linkedq .rl-learn .view-content .question p,
.rl-study-linkedq .rl-learn .view-content .question .ex,
.rl-study-linkedq .rl-learn .view-content .question .et,
.rl-study-linkedq .rl-learn .view-content .question .rl-table-wrap { margin: 0 0 var(--rl-sp-2); }
.rl-study-linkedq .rl-learn .view-content .question > :last-child { margin-bottom: 0; }
.rl-study-linkedq .rl-learn .view-content .question .ex {
    padding: var(--rl-sp-2);
    color: var(--rl-text-2);
}
.rl-study-linkedq .rl-learn .view-content .question .ex > ul,
.rl-study-linkedq .rl-learn .view-content .question .ex > ol { padding-inline-start: var(--rl-sp-5); }
.rl-study-linkedq .rl-learn .view-content .question .ex > ul > li + li,
.rl-study-linkedq .rl-learn .view-content .question .ex > ol > li + li { margin-top: var(--rl-sp-1); }
.rl-study-linkedq .rl-learn .view-content .question table {
    font-size: var(--rl-fs-caption);
    line-height: var(--rl-lh-snug);
    color: var(--rl-text-2);
}
.rl-study-linkedq .rl-learn .view-content .question th,
.rl-study-linkedq .rl-learn .view-content .question td { padding: var(--rl-sp-1) var(--rl-sp-2); }
.rl-study-linkedq .rl-learn .view-content .question th { color: var(--rl-text); font-weight: 600; }
/* 점검 대상 박스(div) — 예시박스·표 래퍼에 매우 약한 라운드(r-2xs). 표 모서리는 래퍼 overflow:hidden로 클립. */
.rl-study-linkedq .rl-learn .view-content .question .ex,
.rl-study-linkedq .rl-learn .view-content .question .et,
.rl-study-linkedq .rl-learn .view-content .question .rl-table-wrap { border-radius: var(--rl-r-2xs); }
/* 읽기전용 — 보기 선택 마커(::after) 제거 + 클릭 affordance 비활성. */
.rl-study-linkedq .rl-learn .answer-container .answer::after { content: none; }
/* 연결 문제는 "풀이"가 아니라 질문하며 내용 확인용 → 보기를 풀이 카드(그리드·테두리·배경·박스)가 아닌
   평문 목록으로. 번호는 원문자(①②③). learn.css 풀이 셀 스타일을 한 단계 높은 스코프로 덮어쓴다. */
.rl-study-linkedq .rl-learn .answer-container { gap: var(--rl-sp-1); margin-top: var(--rl-sp-3); }
.rl-study-linkedq .rl-learn .answer-container .answer {
    display: flex !important;
    align-items: flex-start;
    gap: var(--rl-sp-1);
    min-height: 0;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0;
    cursor: default;
    pointer-events: none;
}
/* learn의 보기 번호 ::before(1~5) 억제 — 번호는 실제 요소(.rl-qnum 원문자)로 렌더해 위치 제어·검증 가능.
   learn의 nth-child ::before(0,5,1 !important)를 순서 무관하게 이기도록 .question-container를 더해 명시도 ↑(0,6,1).
   (상세에선 study.css가 learn.css보다 먼저 로드돼 동일 명시도면 밀려 번호가 중복됐음.) */
.rl-study-linkedq .rl-learn .view-content .question-container .answer-container > .answer::before { content: none !important; }
/* 보기 번호 원문자(.rl-qnum) — 보기 첫 줄 높이(글씨 13 × lh-snug) 박스 안 세로 중앙.
   .answer align-items:flex-start라 박스가 첫 줄에 고정 → 멀티라인이어도 번호는 첫 줄 가운데(블록 중앙 아님). */
.rl-study-linkedq .rl-learn .answer-container .answer .rl-qnum {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: calc(var(--rl-fs-label) * var(--rl-lh-snug));
    line-height: 1;
    font-size: var(--rl-fs-body);
    color: var(--rl-text-4);
}
/* 보기 텍스트 div — 그리드 컬럼 배치 해제(평문 흐름) + 질문 본문보다 약한 톤(작은 글씨·옅은 색). */
.rl-study-linkedq .rl-learn .view-content .answer-container .answer > div {
    grid-column: auto;
    grid-row: auto;
    font-size: var(--rl-fs-label);
    line-height: var(--rl-lh-snug);
    font-weight: 400;
    color: var(--rl-text-2);
}
/* 보기 텍스트 <p>도 같은 행간(lh-snug) — learn의 lh-relaxed가 첫 줄 높이를 키워 번호 세로중앙이 어긋나던 것 정합. */
.rl-study-linkedq .rl-learn .view-content .answer-container .answer > div p { line-height: var(--rl-lh-snug); }

/* 연결 문제 정답·해설 접힘(상세 전용) — 문제 카드 하단, 얇은 라인으로 분리. 기본 접힘, "정답·해설 보기" 토글.
   정답 칩은 전원, 해설 본문은 회원/관리자만(서버 게이팅). 토글 JS=rl_study_linkedq.js. */
.rl-qcard-explain { margin-top: var(--rl-sp-3); border-top: 1px solid var(--rl-line-2); }
/* 연결된 문제가 닫힌(접힌) 상태에선 정답·해설 블록 전체 숨김 — 펼친 경우에만 토글 노출. */
.rl-study-linkedq--collapsible:not(.is-open) .rl-qcard-explain { display: none; }
/* 토글(정답·해설 보기 / 상세 해설 보기 공용) — 약한 텍스트 버튼(카드/큰버튼 아님). */
.rl-qcard-explain__toggle,
.rl-qcard-detail__toggle {
    display: flex;
    align-items: center;
    gap: var(--rl-sp-1);
    width: 100%;
    padding: var(--rl-sp-3) 0 0;
    background: none;
    border: 0;
    cursor: pointer;
    font-size: var(--rl-fs-caption);
    font-weight: 500;
    color: var(--rl-text-3);
}
.rl-qcard-explain__chev,
.rl-qcard-detail__chev { width: 1em; height: 1em; transition: transform var(--rl-dur-base) var(--rl-ease-out); }
.rl-qcard-explain.is-open .rl-qcard-explain__chev,
.rl-qcard-detail.is-open .rl-qcard-detail__chev { transform: rotate(180deg); }
.rl-qcard-explain__toggle:focus-visible,
.rl-qcard-detail__toggle:focus-visible { outline: 2px solid var(--rl-primary); outline-offset: 2px; border-radius: var(--rl-r-2xs); }
/* reveal — grid 0fr↔1fr(높이 가변, max-height 추정 불필요). 정답·해설/상세 해설 공용. */
.rl-qcard-explain__body,
.rl-qcard-detail__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--rl-dur-emph) var(--rl-ease-out); }
.rl-qcard-explain.is-open .rl-qcard-explain__body,
.rl-qcard-detail.is-open .rl-qcard-detail__body { grid-template-rows: 1fr; }
/* padding-top은 grid-template-rows와 함께 transition — .is-open에서만 즉시 붙고 떨어지면 닫을 때 sp-2만큼 높이 점프(덜그덕). */
.rl-qcard-explain__inner,
.rl-qcard-detail__inner { overflow: hidden; min-height: 0; padding-top: 0; transition: padding-top var(--rl-dur-emph) var(--rl-ease-out); }
.rl-qcard-explain.is-open .rl-qcard-explain__inner { padding-top: var(--rl-sp-2); }
/* 정답 줄 + 원문자 칩(강조). */
.rl-qcard-explain__answer {
    display: flex;
    align-items: center;
    gap: var(--rl-sp-1);
    font-size: var(--rl-fs-label);
    font-weight: 600;
    color: var(--rl-text);
}
/* 정답 번호 — 원문자(①) 대신 플레인 숫자 배지(연한 primary, 안쪽 숫자 또렷하되 과하지 않게). */
.rl-qcard-explain__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    border-radius: var(--rl-r-full);
    background: var(--rl-primary-soft);
    color: var(--rl-primary);
    font-size: var(--rl-fs-caption);
    font-weight: 600;
    line-height: 1;
}
/* 해설 필드 섹션 — 정답보다 약하게(text-2), 소제목은 더 작게. */
.rl-qcard-explain__sec { margin-top: var(--rl-sp-3); }
.rl-qcard-explain__sub { margin-bottom: var(--rl-sp-1); font-size: var(--rl-fs-caption); font-weight: 600; color: var(--rl-text-3); }
.rl-qcard-explain__desc { font-size: var(--rl-fs-label); line-height: var(--rl-lh-normal); color: var(--rl-text-2); }
.rl-qcard-explain__desc p { margin: 0 0 var(--rl-sp-2); }
.rl-qcard-explain__desc > :last-child { margin-bottom: 0; }
/* 해설 자리 안내(저강도) — 비회원 로그인 유도(__locked) / 해설 미등록(__empty). */
.rl-qcard-explain__locked,
.rl-qcard-explain__empty { margin-top: var(--rl-sp-3); font-size: var(--rl-fs-caption); color: var(--rl-text-4); }
.rl-qcard-explain__empty { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
    .rl-qcard-explain__body, .rl-qcard-explain__chev,
    .rl-qcard-detail__body, .rl-qcard-detail__chev,
    .rl-qcard-explain__inner, .rl-qcard-detail__inner { transition: none; }
}

/* 관리자 see-through 표시 — 숨김(블라인드) 상태 글임을 관리자에게만 알리는 저강도 안내(본문은 그대로 보임). */
.rl-study-adminhint {
    margin-top: var(--rl-sp-4);
    padding: var(--rl-sp-2) var(--rl-sp-3);
    font-size: var(--rl-fs-caption);
    color: var(--rl-text-3);
    background: var(--rl-surface-2);
    border-radius: var(--rl-r-sm);
}

/* 작성(간편) 맥락 칩 행 — [과목] [오류 제보/문제 질문]. pick 영역 divider와 동일 톤. */
.rl-study-pickfix {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rl-sp-1);
    padding-bottom: var(--rl-sp-3);
    border-bottom: 1px solid var(--rl-line-2);
}

/* 관리자 제보 처리 상태 — 앱바 케밥 더보기 시트(#rl-sheet) 관리자 도구 그룹 첫 행.
   라벨 없이 세그먼트 탭(접수/검토/반영)만. 그룹 내 다음 버튼(문제 관리·숨김)과 하단 라인으로 구분. */
.rl-study-reportadmin {
    display: flex;
    align-items: center;
    height: var(--rl-h-btn-md); /* 그룹 내 다른 버튼(.rl-sheet-confirm__btn)과 동일 행 높이 */
    padding: 0 var(--rl-sp-3);
    border-bottom: 1px solid var(--rl-line-2);
}
/* 세그먼트 탭 트랙 — 행 가로 꽉 채워 3등분, 활성 탭만 흰 배경으로 떠오름(segmented control). */
.rl-study-reportadmin__btns {
    display: flex;
    width: 100%;
    gap: var(--rl-sp-1);
    padding: var(--rl-sp-1);
    background: var(--rl-bg);
    border-radius: var(--rl-r-sm);
}
.rl-study-reportadmin__btn {
    -webkit-appearance: none;
    appearance: none;
    flex: 1 1 0;
    padding: var(--rl-sp-1) 0;
    font-size: var(--rl-fs-caption);
    font-weight: 500;
    color: var(--rl-text-2);
    background: transparent;
    border: 0;
    border-radius: var(--rl-r-xs);
    cursor: pointer;
}
.rl-study-reportadmin__btn[aria-pressed="true"] {
    color: var(--rl-primary);
    font-weight: 600;
    background: var(--rl-surface-elev);
    box-shadow: var(--rl-shadow-sm);
}
.rl-study-reportadmin__btn:focus-visible { outline: 2px solid var(--rl-primary); outline-offset: 2px; }