/* BLUE FORM · 이용후기 + 의견 제출
   blueform.css 의 토큰(--bf-*)을 그대로 쓰고, 규칙은 .bf-page 안으로만 스코프한다. */

/* ── 후기 요약 ───────────────────────────────────────── */
.bf-page .bf-rv-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 28px;
    padding: 22px 24px;
    border: 1px solid var(--bf-line);
    border-radius: 16px;
    background: var(--bf-surface);
    box-shadow: var(--bf-card-shadow);
}

.bf-page .bf-rv-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding-right: 28px;
    border-right: 1px solid var(--bf-line-soft);
    flex: none;
}

.bf-page .bf-rv-score b {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--bf-ink);
}

.bf-page .bf-rv-score .bf-rv-stars {
    font-size: 0.95rem;
    letter-spacing: 0.06em;
}

.bf-page .bf-rv-score span {
    font-size: 0.8rem;
    color: var(--bf-muted-2);
}

.bf-page .bf-rv-stars {
    color: #f5a623;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.bf-page .bf-rv-bars {
    flex: 1 1 260px;
    min-width: 0;
    display: grid;
    gap: 5px;
}

.bf-page .bf-rv-bar {
    display: grid;
    grid-template-columns: 30px 1fr 34px;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    color: var(--bf-muted-2);
}

.bf-page .bf-rv-bar i {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: var(--bf-line);
    overflow: hidden;
}

.bf-page .bf-rv-bar i b {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--bf-accent);
}

.bf-page .bf-rv-write-btn {
    flex: none;
    margin-left: auto;
}

/* ── 작성 폼 ─────────────────────────────────────────── */
.bf-page .bf-rv-form {
    margin-top: 16px;
    padding: 20px 22px 22px;
    border: 1px solid var(--bf-accent-line);
    border-radius: 16px;
    background: var(--bf-accent-tint);
}

.bf-page .bf-rv-form[hidden] { display: none; }

.bf-page .bf-rv-form-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.bf-page .bf-rv-form-head h3 {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--bf-ink);
}

.bf-page .bf-rv-form-head p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--bf-muted);
}

.bf-page .bf-rv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.bf-page .bf-rv-field {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.bf-page .bf-rv-field > label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--bf-label);
}

.bf-page .bf-rv-field input,
.bf-page .bf-rv-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--bf-line-input);
    border-radius: 10px;
    background: var(--bf-surface);
    color: var(--bf-text);
    font: inherit;
    font-size: 0.9rem;
}

.bf-page .bf-rv-field textarea {
    min-height: 92px;
    resize: vertical;
    line-height: 1.6;
}

.bf-page .bf-rv-field input:focus,
.bf-page .bf-rv-field textarea:focus {
    outline: none;
    border-color: var(--bf-accent);
    box-shadow: 0 0 0 3px rgba(91, 75, 236, .14);
}

/* 별점 고르기 */
.bf-page .bf-rv-rate {
    display: flex;
    align-items: center;
    gap: 4px;
}

.bf-page .bf-rv-rate button {
    padding: 0 1px;
    border: 0;
    background: none;
    color: #d8dae4;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: color .12s ease, transform .12s ease;
}

.bf-page .bf-rv-rate button.is-on { color: #f5a623; }
.bf-page .bf-rv-rate button:hover { transform: translateY(-1px); }

.bf-page .bf-rv-rate output {
    margin-left: 6px;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--bf-muted);
}

.bf-page .bf-rv-form-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
}

.bf-page .bf-rv-note {
    flex: 1 1 240px;
    margin: 0;
    font-size: 0.76rem;
    line-height: 1.55;
    color: var(--bf-muted-2);
}

.bf-page .bf-rv-msg {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.84rem;
    line-height: 1.5;
}

.bf-page .bf-rv-msg[hidden] { display: none; }
.bf-page .bf-rv-msg.is-ok { background: #e9f7ef; color: #17603a; }
.bf-page .bf-rv-msg.is-err { background: #fdecec; color: #9b2226; }

/* ── 후기 목록 ───────────────────────────────────────── */
.bf-page .bf-rv-list {
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--bf-line-soft);
}

.bf-page .bf-rv-item {
    padding: 18px 2px;
    border-bottom: 1px solid var(--bf-line-soft);
}

.bf-page .bf-rv-item[hidden] { display: none; }

.bf-page .bf-rv-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 7px;
}

.bf-page .bf-rv-nick {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--bf-ink);
}

.bf-page .bf-rv-rating {
    font-size: 0.82rem;
    font-weight: 700;
    color: #b8791a;
}

.bf-page .bf-rv-date {
    font-size: 0.78rem;
    color: var(--bf-muted-3);
}

.bf-page .bf-rv-own {
    margin-left: auto;
    display: flex;
    gap: 6px;
}

.bf-page .bf-rv-own button {
    padding: 3px 9px;
    border: 1px solid var(--bf-line-input);
    border-radius: 999px;
    background: var(--bf-surface);
    color: var(--bf-muted-2);
    font-size: 0.72rem;
    cursor: pointer;
}

.bf-page .bf-rv-own button:hover {
    border-color: var(--bf-accent);
    color: var(--bf-accent);
}

.bf-page .bf-rv-body {
    margin: 0;
    font-size: 0.93rem;
    line-height: 1.72;
    color: var(--bf-text);
    word-break: keep-all;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.bf-page .bf-rv-comment-count {
    display: inline-block;
    margin-top: 9px;
    font-size: 0.78rem;
    color: var(--bf-muted-3);
}

.bf-page .bf-rv-reply {
    margin: 11px 0 0;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--bf-chip);
    border-left: 3px solid var(--bf-accent-rule);
}

.bf-page .bf-rv-reply b {
    display: block;
    margin-bottom: 4px;
    font-size: 0.78rem;
    color: var(--bf-accent-strong);
}

.bf-page .bf-rv-reply p {
    margin: 0;
    font-size: 0.87rem;
    line-height: 1.68;
    color: var(--bf-muted);
    word-break: keep-all;
}

.bf-page .bf-rv-more {
    margin-top: 18px;
    text-align: center;
}

.bf-page .bf-rv-empty {
    margin: 18px 0 0;
    padding: 26px;
    border: 1px dashed var(--bf-line-input);
    border-radius: 14px;
    text-align: center;
    font-size: 0.9rem;
    color: var(--bf-muted-2);
}

/* ── 공용 작은 버튼 ──────────────────────────────────── */
.bf-page .bf-rv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    border: 1px solid var(--bf-line-input);
    border-radius: 999px;
    background: var(--bf-surface);
    color: var(--bf-text);
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .14s ease, color .14s ease, background .14s ease;
}

/* 라벨을 단일 flex 아이템으로 묶어 숫자/한글이 같은 베이스라인에 놓이게 한다.
   (감싸지 않으면 텍스트 조각마다 익명 flex 아이템이 되어 gap 이 끼고 정렬이 어긋난다) */
.bf-page .bf-rv-btn-label {
    display: inline-block;
    line-height: 1.3;
}

.bf-page .bf-rv-btn:hover {
    border-color: var(--bf-accent);
    color: var(--bf-accent);
}

.bf-page .bf-rv-btn--primary {
    border-color: var(--bf-accent);
    background: var(--bf-accent);
    color: #fff;
}

.bf-page .bf-rv-btn--primary:hover {
    border-color: var(--bf-accent-strong);
    background: var(--bf-accent-strong);
    color: #fff;
}

.bf-page .bf-rv-btn[disabled] {
    opacity: .55;
    cursor: default;
}

/* ── 하단 CTA 의 의견 제출 버튼 ─────────────────────────
   같은 줄의 <a> 버튼들과 모양을 맞춘다(.bf-cta-actions a 규칙과 동일 값). */
.bf-page .bf-cta-actions button {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 20px;
    border: 1px solid #34363f;
    border-radius: 11px;
    background: none;
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: #e7e8ee;
    cursor: pointer;
    transition: background-color .14s, border-color .14s;
}

.bf-page .bf-cta-actions button:hover {
    background: #23242e;
    color: #fff;
}

/* ── 의견 제출 모달 ──────────────────────────────────── */
.bf-fb-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(17, 20, 34, .55);
    backdrop-filter: blur(2px);
}

.bf-fb-backdrop[hidden] { display: none; }

.bf-fb-modal {
    width: min(620px, 100%);
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    padding: 26px 28px 28px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 30px 80px -20px rgba(15, 18, 40, .5);
}

.bf-fb-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 6px;
}

.bf-fb-head h3 {
    margin: 0;
    font-size: 1.18rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #16171d;
}

.bf-fb-close {
    flex: none;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: #f2f3f8;
    color: #5c6072;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.bf-fb-close:hover { background: #e7e9f2; }

.bf-fb-lead {
    margin: 0 0 18px;
    font-size: 0.86rem;
    line-height: 1.62;
    color: #5c6072;
    word-break: keep-all;
}

.bf-fb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.bf-fb-field { display: grid; gap: 5px; min-width: 0; }
.bf-fb-field.is-full { grid-column: 1 / -1; }

.bf-fb-field > label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #545869;
}

.bf-fb-field input,
.bf-fb-field select,
.bf-fb-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e2e4ef;
    border-radius: 10px;
    background: #fbfbfe;
    color: #2b2e3c;
    font: inherit;
    font-size: 0.9rem;
}

.bf-fb-field textarea {
    min-height: 130px;
    resize: vertical;
    line-height: 1.62;
}

.bf-fb-field input:focus,
.bf-fb-field select:focus,
.bf-fb-field textarea:focus {
    outline: none;
    border-color: #5b4bec;
    box-shadow: 0 0 0 3px rgba(91, 75, 236, .14);
}

.bf-fb-drop {
    grid-column: 1 / -1;
    display: block;
    padding: 16px;
    border: 1px dashed #cfd3e2;
    border-radius: 12px;
    background: #fbfbfe;
    text-align: center;
    font-size: 0.82rem;
    color: #7a7e90;
    cursor: pointer;
}

.bf-fb-drop.is-over {
    border-color: #5b4bec;
    background: #f2f0fe;
    color: #4436d6;
}

.bf-fb-drop input { display: none; }

.bf-fb-files {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bf-fb-files:empty { display: none; }

.bf-fb-files li {
    position: relative;
    width: 66px;
    height: 66px;
    border: 1px solid #e7e9f2;
    border-radius: 10px;
    overflow: hidden;
    background: #f4f5fa;
}

.bf-fb-files img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bf-fb-files .bf-fb-fname {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 4px;
    font-size: 0.62rem;
    line-height: 1.3;
    color: #5c6072;
    text-align: center;
    word-break: break-all;
    overflow: hidden;
}

.bf-fb-files button {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 50%;
    background: rgba(17, 20, 34, .7);
    color: #fff;
    font-size: 0.7rem;
    line-height: 1;
    cursor: pointer;
}

.bf-fb-consent {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.8rem;
    line-height: 1.55;
    color: #5c6072;
}

.bf-fb-consent input { width: 16px; height: 16px; margin-top: 2px; flex: none; }

.bf-fb-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
}

.bf-fb-msg {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.84rem;
    line-height: 1.5;
}

.bf-fb-msg[hidden] { display: none; }
.bf-fb-msg.is-ok { background: #e9f7ef; color: #17603a; }
.bf-fb-msg.is-err { background: #fdecec; color: #9b2226; }

/* ── 모바일 ──────────────────────────────────────────── */
@media (max-width: 720px) {
    .bf-page .bf-rv-summary {
        gap: 18px;
        padding: 18px;
    }

    .bf-page .bf-rv-score {
        padding-right: 18px;
    }

    .bf-page .bf-rv-write-btn {
        width: 100%;
        margin-left: 0;
    }

    .bf-page .bf-rv-own {
        margin-left: 0;
        width: 100%;
    }

    .bf-fb-modal {
        padding: 22px 18px 24px;
    }
}