@charset "utf-8";

/* 리뷰 키워드 (칩 / 뱃지 / 집계바)
   - 색상은 프론트 테마와 통일: primary #FF385C, tint #FFEDF1
   - 샵 상세·후기전체보기는 테마 v2 미적용 구역이라 이 파일을 따로 로드한다.
   - 클래스는 전부 .rk- 접두어. 기존 style.css 와 충돌 없음. */

/* 전역 오염 방지: 변수는 :root 가 아니라 우리 블록에만 선언한다 */
.rk-chips, .rk-badges, .rk-stat {
    --rk-primary: #FF385C;
    --rk-tint: #FFEDF1;
    --rk-tint-text: #D12A4C;
    --rk-tint-border: #FFC4D0;
    --rk-border: #e5e9ee;
    --rk-muted: #6b7480;
    --rk-track: #f2f4f7;
    --rk-neutral: #F2F4F7;
    --rk-neutral-text: #4B5563;
    --rk-neutral-border: #E3E7EC;
    --rk-bar-1: #FF385C;   /* 1위 = 메인 코랄 */
    --rk-bar-2: #FF7891;
    --rk-bar-3: #FFACBC;   /* 3위를 진하게 하면서 2위도 같이 내려 단계 간격을 고르게 유지 */
    /* 4위~ 회색. 트랙(#F2F4F7)보다는 진하되 3위보다 밝게 유지.
       알파 0.85 로 살짝 비쳐 보이게 — 더 낮추면 트랙과의 색차(ΔE)가 6 아래로 떨어져 묻힌다. */
    --rk-bar-4: rgba(203, 210, 218, .85);
}

/* ---------- 작성/수정 폼 칩 ---------- */

/* style.css 의 `.talk_write_search{height:60px}` 는 별점 한 줄에 맞춘 고정 높이다.
   칩 묶음은 여러 줄로 늘어나므로 60px 상자를 뚫고 나와 아래 안내문·본문 입력창을 덮는다.
   전역 규칙은 별점·샵검색이 함께 쓰므로 건드리지 않고, 키워드 블록만 스코프해서 높이를 푼다. */
#talk_keyword .talk_write_search {
    height: auto;
    padding-top: 16px;
    padding-bottom: 14px;
}

/* 가로 3개씩 고정 배치(그리드). flex 자동 줄바꿈은 칩 폭이 제각각이라
   줄 끝이 들쭉날쭉하고 11개가 6~8줄까지 늘어졌다. 3열 고정이면 항상 4행으로 떨어진다. */
.rk-chips {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 12px 0 4px;
}

.rk-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    /* 3열 그리드라 칩 폭이 화면폭/3 로 고정된다. 긴 라벨("가격이 합리적이에요")은
       한 줄에 못 들어가므로 줄바꿈을 허용하고 가운데 정렬한다.
       font-size 는 .79rem 이하여야 360px 에서도 2줄로 떨어진다(.80rem 이면 3줄) →
       기기 폰트 편차를 감안해 .78rem. */
    justify-content: center;
    text-align: center;
    white-space: normal;
    padding: 8px 5px;
    border: 1px solid var(--rk-border);
    border-radius: 999px;
    background: #fff;
    color: #6b7480;
    font-size: .78rem;
    line-height: 1.3;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
    -webkit-tap-highlight-color: rgba(0,0,0,.06);
}

/* 선택 상태: 원래는 primary 단색(#FF385C)+흰 글씨였는데 파스텔 톤으로 변경.
   '필수' 배지와 같은 tint 조합(#FFEDF1 배경 / #D12A4C 글씨)이라 폼 안에서 색이 겉돌지 않는다.
   미선택(흰 배경·회색 글씨·연회색 테두리)과 배경·글씨·테두리 3개가 모두 달라 구분된다. */
.rk-chip.on {
    background: var(--rk-tint);
    border-color: var(--rk-tint-border);
    color: var(--rk-tint-text);
    font-weight: 600;
}

.rk-chip-guide {
    font-size: .8rem;
    color: var(--rk-muted);
    padding-top: 4px;
}

.rk-chip-guide em {
    color: inherit;
    font-style: normal;
    font-weight: inherit;
}

/* ---------- 작성폼 2스텝 (방문후기 전용) ---------- */
/* rk 변수는 원본이 .rk-chips/.rk-badges/.rk-stat 에만 선언돼 그 밖의 새 요소(다음버튼·필수배지·
   카운터·사진박스·이전버튼)엔 미도달 → var() 가 무효가 돼 색이 안 먹었다.
   폼 페이지 래퍼에 같은 변수를 선언해 이 요소들이 전부 상속받게 한다.
   (이 파일은 샵상세에서도 로드되지만 거긴 .mm-page-talk-* 가 없어 오염 없음) */
.mm-page-talk-write, .mm-page-talk-edit {
    --rk-primary: #FF385C;
    --rk-tint: #FFEDF1;
    --rk-tint-text: #D12A4C;
    --rk-tint-border: #FFC4D0;
    --rk-border: #e5e9ee;
    --rk-muted: #6b7480;
    --rk-neutral: #F2F4F7;
    --rk-neutral-text: #4B5563;
    --rk-neutral-border: #E3E7EC;
    --rk-bar-1: #FF385C;   /* 1위 = 메인 코랄 */
    --rk-bar-2: #FF7891;
    --rk-bar-3: #FFACBC;   /* 3위를 진하게 하면서 2위도 같이 내려 단계 간격을 고르게 유지 */
    /* 4위~ 회색. 트랙(#F2F4F7)보다는 진하되 3위보다 밝게 유지.
       알파 0.85 로 살짝 비쳐 보이게 — 더 낮추면 트랙과의 색차(ΔE)가 6 아래로 떨어져 묻힌다. */
    --rk-bar-4: rgba(203, 210, 218, .85);
}

/* 필수 배지 */
.rk-req {
    display: inline-block;
    margin-left: 3px;
    padding: 2px 6px;   /* 별점 카드에서 라벨+별이 390px 화면에 한 줄로 들어가도록 3px 절약 */
    border-radius: 999px;
    background: var(--rk-tint);
    color: var(--rk-tint-text);
    font-size: .68rem;
    font-weight: 700;
    vertical-align: middle;
    line-height: 1.4;
}

/* 키워드 선택 카운터 */
.rk-counter {
    margin-top: 10px;
    font-size: .8rem;
    color: var(--rk-muted);
}
.rk-counter-n {
    color: var(--rk-primary);
    font-weight: 700;
}

/* STEP1 다음 버튼 — li 를 카드로 감싸지 않고 CTA 버튼만 노출.
   테마의 `... > ul > li` 카드 규칙(margin12/padding14/배경/그림자)을 명시도로 덮어쓴다.
   좌우 margin 12px 은 유지해 위 카드들과 폭을 맞춘다. */
.mm-theme-v2.mm-page-talk-write .talk_contents_area > ul > li.rk-nav-step1,
.mm-theme-v2.mm-page-talk-edit .talk_contents_area > ul > li.rk-nav-step1 {
    margin: 12px;
    padding: 0;
    background: none;
    box-shadow: none;
    border-radius: 0;
    border-top: none;
}
.rk-next-btn {
    display: block;
    width: 100%;
    padding: 14px 0;
    border: 0;
    border-radius: 8px;
    background: var(--rk-primary);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}
.rk-next-btn:disabled {
    background: #f4b8c4;
    cursor: default;
}

/* STEP2 요약 카드 */
.rk-summary {
    padding: 14px 0 2px;
}
.rk-summary-shop {
    font-size: .95rem;
    font-weight: 700;
    color: #1f1f1f;
}
.rk-summary-shop b {
    margin-left: 6px;
    color: var(--rk-primary);
}
.rk-summary-chips {
    margin-top: 10px;
}

/* STEP2 사진 업로드 박스 */
.rk-photo-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 26px 0;
    border: 1.5px dashed var(--rk-border);
    border-radius: 14px;
    background: #fafbfc;
    color: var(--rk-muted);
    cursor: pointer;
    text-align: center;
}
.rk-photo-box i {
    font-size: 1.4rem;
    color: var(--rk-primary);
}
.rk-photo-box p {
    margin: 0;
    font-size: .86rem;
}
.rk-photo-cnt {
    font-size: .78rem;
}

/* 선택한 사진 미리보기 (작성·수정 공용).
   기존엔 'N / 5' 숫자만 보여서 무슨 사진을 골랐는지 확인할 방법이 없었다. */
.rk-photo-preview {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    margin-top: 10px;
}

.rk-photo-preview:empty {
    display: none;   /* 고른 사진이 없으면 여백도 만들지 않는다 */
}

/* style.css 의 `.talk_img_edit ul li{padding:5px 0}` 는 파일명 텍스트 목록 시절 규칙이라
   썸네일 아래에 10px 이 남는다. 그 선택자가 (0,1,2) 라 `.rk-photo-preview li`(0,1,1) 로는
   못 이겨서 수정 페이지용 선택자를 따로 얹는다. */
.rk-photo-preview li,
.talk_img_edit ul.rk-photo-preview li {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 0;
}

/* 정사각 썸네일. aspect-ratio 로 비율을 고정해 사진 크기가 달라도 줄이 흐트러지지 않는다. */
.rk-photo-preview img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--rk-border);
    background: #f2f4f7;
}

/* 수정 페이지의 기존 첨부 목록(#img_list)도 같은 썸네일 격자로 재사용한다.
   li 클릭 → 삭제 확인 동작은 그대로라 JS 는 손대지 않는다. */
.rk-photo-preview .rk-photo-del {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: .62rem;
    line-height: 18px;
    text-align: center;
}

/* STEP2 하단 '이전' + '등록' 나란히 배치
   (기존 `.talk_write_submit_area div.talk_write_submit input` 의 코랄·풀와이드 규칙을
   명시도로 이겨야 해서 같은 체인에 .rk-step2-bar 스코프를 이어붙인다) */
.talk_write_submit_area.rk-step2-bar div.talk_write_submit input.rk-prev-btn {
    float: left;
    width: 90px;
    margin-right: 8px;
    background: #fff;
    color: #333;
    border: 1px solid var(--rk-border);
    font-weight: 600;
    cursor: pointer;
}
.talk_write_submit_area.rk-step2-bar div.talk_write_submit input.talk_save {
    width: calc(100% - 98px);
}

/* ---------- 개별 리뷰 뱃지 ---------- */
.rk-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 4px;
}

/* 뱃지는 목록·상세·샵상세에서 반복 노출돼 핑크(tint)로 두면 화면이 알록달록해진다.
   → 무채색 뮤트톤. 색은 이모지가 담당하고 뱃지는 배경 역할만 한다.
   (명암비 6.86 : 기존 핑크 4.49 보다 오히려 가독성이 좋아진다) */
.rk-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--rk-neutral);
    color: var(--rk-neutral-text);
    border: 1px solid var(--rk-neutral-border);
    font-size: .78rem;
    line-height: 1.2;
    white-space: nowrap;
}

/* ---------- 샵 집계바 "이런 점이 좋았어요" ---------- */
.rk-stat {
    margin: 0 0 16px;
    padding: 16px;
    border: 1px solid var(--rk-border);
    border-radius: 14px;
    background: #fff;
    box-sizing: border-box;
}

.rk-stat-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
}

.rk-stat-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1f1f1f;
}

.rk-stat-part {
    font-size: .8rem;
    color: var(--rk-muted);
}

.rk-stat-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rk-stat-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    float: none;
    width: auto;
}

.rk-stat-name {
    flex: 0 0 42%;
    font-size: .86rem;
    color: #353535;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rk-stat-track {
    flex: 1 1 auto;
    /* 8px 에서는 인접 단계의 색차가 눈에 잘 안 들어와 12px 로 키웠다 */
    height: 12px;
    border-radius: 999px;
    background: var(--rk-track);
    overflow: hidden;
}

/* 순위별 농도: 1위가 가장 진하고 2·3위로 갈수록 옅어진다. 4위부터는 전부 같은 최연색.
   (상위 키워드가 한눈에 들어오게 하는 목적 — primary 계열 4단계) */
.rk-stat-bar {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--rk-bar-4);   /* 4위 이하 기본값 */
}
.rk-stat-bar.rk-b1 { background: var(--rk-bar-1); }
.rk-stat-bar.rk-b2 { background: var(--rk-bar-2); }
.rk-stat-bar.rk-b3 { background: var(--rk-bar-3); }

.rk-stat-cnt {
    flex: 0 0 auto;
    min-width: 28px;
    text-align: right;
    font-size: .82rem;
    font-weight: 600;
    color: var(--rk-tint-text);
}

/* 접힘 상태: 6행(28px×6=168) + 7행째 절반(14px) 까지만 보이고 나머지는 잘린다.
   '더보기' 는 네모 버튼 대신 아래쪽이 흰색으로 페이드아웃되는 띠 위에 얹는다
   (잘린 행이 그라데이션 뒤로 비쳐 더 있다는 게 시각적으로 드러난다). */
.rk-stat.rk-fold {
    position: relative;
    padding-bottom: 40px;
}
.rk-stat.rk-fold .rk-stat-list {
    max-height: 182px;
    overflow: hidden;
}
.rk-stat-more {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 8px 0;
    border: 1px solid var(--rk-border);
    border-radius: 10px;
    background: #fff;
    color: var(--rk-muted);
    font-size: .82rem;
    cursor: pointer;
}
/* 접힘 상태일 때만 페이드 띠로 변신 */
.rk-stat.rk-fold .rk-stat-more {
    position: absolute;
    left: 1px;
    right: 1px;
    bottom: 1px;
    width: auto;
    height: 72px;
    margin: 0;
    padding: 0 0 14px;
    border: 0;
    border-radius: 0 0 13px 13px;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.92) 45%, #fff 75%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
/* 아래 방향 꺾쇠 */
/* 문구 없이 화살표만 노출 → 단독으로 보이므로 조금 키우고 색도 진하게 */
.rk-stat-more-ico {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-bottom: 4px;
    border-right: 2px solid #8b929c;
    border-bottom: 2px solid #8b929c;
    transform: rotate(45deg);
}
.rk-stat-list li.rk-hide {
    display: none;
}

/* 후기 전체보기: '후기 N건' 줄(.all_nreview_info_area)의 border-bottom 이 바로 아래
   키워드 집계바(.rk-stat)의 위쪽 테두리와 같은 y 에 겹쳐 이중선처럼 보인다(실측 간격 0px).
   집계바가 있을 때만 구분선을 없앤다 — 집계바가 없는 샵(참여 3명 미만)에서는
   목록과 헤더를 나누는 선이 여전히 필요하다.
   :has() 는 구형 웹뷰에서 무시되므로 blade 에서 rk-no-line 클래스를 붙여 분기한다. */
.all_nreview_info_area.rk-no-line {
    border-bottom: none;
}