/* ============================================================
   구매후기 — 마이페이지 후기 쓰기·고치기 창 + 공개 게시판 (2026-10-27)
   ------------------------------------------------------------
   달자네 assets/style.css 의 .rv-* 를 옮겼다(같은 짜임·같은 이름).
   ⚠ site.css 를 고치지 않으려고 따로 둔다 — site.css 를 고치면 생성 페이지 전부의 ?v= 가 바뀐다.
   ⚠ 색은 이 파일의 --rv-* 로만 쓴다. mypage.html(style.css)과 생성 페이지(site.css)의
     변수 이름이 서로 달라서, 어느 쪽에 얹혀도 같은 모양이 나오게 했다.
   ⚠ 칠을 얹는 칸(.rv-paint-stage · .rv-shot.has-mask · .rv-lb-fit)은 반드시 position:relative.
     static 이면 덮개가 화면 전체로 튄다.
   ⚠ 가림이 있는 사진은 **자르지 않는다**(object-fit 금지). 자르면 비율(%)로 얹은 덮개가
     사진과 어긋나 리본 글씨(성함)가 드러난다.
   ============================================================ */
:root{
  --rv-line:#E6DECF; --rv-soft-bg:#F7F3EE; --rv-ink:#2E2620; --rv-ink2:#5E5347; --rv-muted:#7A6E60;
  --rv-accent:#C04520; --rv-err:#B4232A; --rv-r:12px; --rv-stage:#F4F1EE;
}

/* 주문내역 단추 칸 — 「후기작성」 단추가 하나 늘어 PC 1366 에서 표가 104px 넘쳤다(2026-10-27 실측).
   style.css 의 .c-act2{white-space:nowrap} 을 이 화면에서만 풀어 단추가 줄을 바꿔 서게 한다. */
.my-table.order .c-act2{white-space:normal;min-width:7.5em}

/* ---------- 후기 쓰기 창 ---------- */
.rv-modal .mm-in{max-height:92vh;overflow-y:auto}
.rv-prod{margin:4px 0 0;font-weight:700;color:var(--rv-accent);overflow-wrap:anywhere}
.rv-ship{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;padding:12px 14px;
  background:var(--rv-soft-bg);border:1px solid var(--rv-line);border-radius:var(--rv-r);cursor:pointer}
.rv-ship input{margin:2px 0 0;width:18px;height:18px;flex:0 0 auto;accent-color:var(--rv-accent)}
.rv-ship span{display:block;font-size:.92rem;line-height:1.6}
.rv-ship b{color:var(--rv-ink)}
.rv-ship em{display:block;margin-top:3px;font-style:normal;font-size:.86rem;color:var(--rv-muted)}
.rv-paint{margin-top:10px}
.rv-paint[hidden]{display:none}
.rv-paint-note{margin:0 0 10px;font-size:.88rem;line-height:1.6;color:var(--rv-ink2)}
.rv-paint-note b{color:var(--rv-ink)}
.rv-paint-note em{display:block;margin-top:3px;font-style:normal;font-size:.84rem;color:var(--rv-muted)}
.rv-paint-grid{display:flex;flex-direction:column;gap:14px}
.rv-paint-card{border:1px solid var(--rv-line);border-radius:var(--rv-r);padding:10px;background:var(--rv-soft-bg)}
.rv-paint-top{position:relative;width:fit-content;max-width:100%;margin:0 auto}
.rv-paint-stage{position:relative;line-height:0;border-radius:6px;overflow:hidden;width:fit-content;max-width:100%;
  background:var(--rv-stage);cursor:crosshair;touch-action:none;user-select:none;-webkit-user-select:none}
.rv-paint-stage img{display:block;max-width:100%;max-height:44vh;width:auto;height:auto;-webkit-user-drag:none}
.rv-paint-stage .rv-marks i.is-live{background:rgba(17,17,17,.55);outline:1px dashed #fff}
.rv-paint-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.rv-paint-x{position:absolute;top:8px;right:8px;z-index:2;width:34px;height:34px;min-width:34px;padding:0;border:0;
  border-radius:50%;background:rgba(28,40,26,.72);color:#fff;font-size:.95rem;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.rv-paint-x:hover{background:rgba(28,40,26,.92)}
.rv-paint-x:focus-visible{outline:2px solid #fff;outline-offset:-3px}
.rv-file{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px}
.rv-file .btn-sm.is-off{opacity:.45;cursor:default;pointer-events:none}
.rv-paint-card.is-off{opacity:.5}
.rv-paint-off{margin:8px 0 0;font-size:.84rem;color:var(--rv-err)}
.rv-paint-off[hidden]{display:none}
/* 이미 후기를 쓴 주문 — 잠긴 「후기 작성 완료」 (2026-10-27, 올린 후기는 고칠 수 없다) */
.btn-sm.rv-done[disabled]{opacity:.6;cursor:default;pointer-events:none}
.rv-text{display:block;width:100%;box-sizing:border-box;margin-top:14px;font:inherit;font-size:.98rem;line-height:1.7;
  background:#fff;border:1px solid var(--rv-line);border-radius:var(--rv-r);padding:12px 13px;min-height:11rem;resize:vertical}
.rv-text:focus{outline:none;border-color:var(--rv-accent);box-shadow:0 0 0 3px rgba(192,69,32,.16)}
.rv-point{margin:6px 0 0;font-size:.9rem;color:var(--rv-muted)}
.rv-point b{color:var(--rv-accent)}
.rv-msg{margin:12px 0 0;font-size:.9rem;color:var(--rv-muted)}
.rv-msg[hidden]{display:none}
.rv-msg.err{color:var(--rv-err)}
.rv-event{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;background:#F3C7A0;
  color:#3A2230;font-style:normal;font-size:.82rem;font-weight:700}

/* ---------- 공개 게시판 (reviews.html · en/ja/zh/vi) ---------- */
.rv-page{padding-top:40px;padding-bottom:72px}
.rv-page h1{margin:0}
.rv-page .lede{margin:10px 0 0;color:var(--rv-ink2);line-height:1.7;overflow-wrap:anywhere}
/* keep-all 은 **한국어에만** (2026-10-27 검수 F2) — 일본어·중국어는 띄어쓰기가 없어 keep-all 이면
   「。」에서만 줄이 바뀌어 ja 모바일 390 에서 가로 5px 넘쳤다. gallery.css 와 같은 생각.
   html lang 으로 고른다 — 마이페이지(mypage.html)는 body 에 lang-ko 가 없고 member-i18n.js 가 html lang 을 바꾼다. */
:lang(ko) .rv-page .lede,:lang(ko) .rv-prod,:lang(ko) .rv-ship em,:lang(ko) .rv-paint-note em,:lang(ko) .rv-body{word-break:keep-all}
.rv-notice{margin:18px 0 0;padding:12px 14px;background:#FFF4E8;border:1px solid #F0D9BC;border-radius:var(--rv-r);
  font-size:.92rem;line-height:1.7;color:#7A5730}
.rv-notice[hidden]{display:none}
.rv-list{margin-top:26px;border-top:1px solid var(--rv-line)}
.rv-count{margin:14px 0 0;font-size:.9rem;color:var(--rv-muted);font-weight:600}
.rv-empty{margin:0;padding:56px 10px;text-align:center;color:var(--rv-muted)}
.rv-item{padding:24px 2px;border-bottom:1px solid var(--rv-line)}
.rv-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.rv-name{font-weight:700;color:var(--rv-ink);font-size:.94rem}
.rv-date{font-size:.86rem;color:var(--rv-muted)}
.rv-item .rv-prod{display:inline-block;margin:10px 0 0;font-size:.9rem;text-decoration:none}
a.rv-prod:hover{text-decoration:underline;text-underline-offset:2px}
/* 손님이 넣은 줄바꿈을 그대로 — 본문은 textContent 로만 넣는다(assets/reviews.js) */
.rv-body{margin:10px 0 0;line-height:1.9;color:var(--rv-ink);white-space:pre-wrap;overflow-wrap:anywhere}
.rv-shots{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.rv-shot{padding:0;border:1px solid var(--rv-line);background:#fff;border-radius:var(--rv-r);overflow:hidden;cursor:zoom-in;
  line-height:0;width:96px;height:96px;flex:none}
.rv-shot:hover{border-color:var(--rv-accent)}
.rv-shot img{width:100%;height:100%;object-fit:cover;display:block}
.rv-shot.has-mask{position:relative;height:auto;align-self:flex-start;background:var(--rv-stage)}
.rv-shot.has-mask img{height:auto;object-fit:contain}
.rv-marks{position:absolute;inset:0;pointer-events:none}
.rv-marks i{position:absolute;border-radius:3px;
  backdrop-filter:blur(14px) saturate(.6);-webkit-backdrop-filter:blur(14px) saturate(.6);
  background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.rv-pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:30px}
.rv-pager[hidden]{display:none}
.rv-pager button{min-width:96px;padding:10px 16px;border:1px solid var(--rv-line);border-radius:999px;background:#fff;
  font:inherit;cursor:pointer;color:var(--rv-ink)}
.rv-pager button:disabled{opacity:.4;cursor:default}
.rv-now{font-size:.92rem;color:var(--rv-muted);font-weight:600;min-width:72px;text-align:center}
.rv-lb{position:fixed;inset:0;z-index:300;background:rgba(28,40,26,.82);display:flex;align-items:center;justify-content:center;padding:24px}
.rv-lb[hidden]{display:none}
.rv-lb img{max-width:100%;max-height:100%;border-radius:var(--rv-r);display:block}
.rv-lb-fit{position:relative;line-height:0;max-width:100%}
.rv-lb-fit img{max-width:calc(100vw - 48px);max-height:calc(100vh - 48px);width:auto;height:auto}
.rv-lb-x{position:absolute;top:14px;right:16px;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.4);
  background:rgba(0,0,0,.35);color:#fff;font:inherit;font-size:1.1rem;cursor:pointer}
.rv-lb-x:hover{background:rgba(0,0,0,.55)}

@media (max-width:720px){
  .rv-item{padding:20px 0}
  .rv-shot{width:76px;height:76px}
  .rv-pager{gap:8px}
  .rv-pager button{min-width:0;flex:1}
  .rv-lb{padding:12px}
  .rv-lb-fit img{max-width:calc(100vw - 24px);max-height:calc(100vh - 24px)}
}
/* 흐리게를 못 쓰는 브라우저에서는 **검은 네모로 물러선다** — 안 가려지느니 안 예쁜 쪽이 낫다 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .rv-marks i{background:#111;box-shadow:none}
}