/* SUDA CUSTOM (2026-10-26): 회원 프로필 사진 - 원형 사진 공통 + 회원정보 수정 "프로필 사진" 칸 (extend/suda_member_photo.extend.php) */

/* 사진이 있으면 원 안을 꽉 채운다 (크기·배경은 각 화면 클래스에서) */
.is-photo{ overflow: hidden; background: var(--suda-gray-100, #f3f4f6); }
.is-photo > img{ display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* 상단바 로그인 이름 옆 */
.suda-topbar-avatar{ display: inline-flex; width: 20px; height: 20px; border-radius: 50%; vertical-align: middle; margin-right: 2px; }

/* 마이페이지 첫 화면 이름 옆 */
.suda-mypage-namefield{ display: flex; align-items: center; gap: 12px; }
.suda-mypage-avatar{ flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--suda-gray-100, #f3f4f6); color: var(--suda-gray-400, #9ca3af); }
.suda-mypage-avatar svg{ width: 24px; height: 24px; }

/* 후기 카드 작성자 (상품 상세 .srv-avatar 크기는 suda_review_v2.css) */
.suda-review-card-who{ display: inline-flex; align-items: center; gap: 6px; }
.suda-mypage-review-head .srv-avatar{ flex: 0 0 auto; }

/* 메인 Traveler Stories */
.suda-review-avatar.is-photo{ padding: 0; }

/* 회원정보 수정 - 프로필 사진 칸 */
.suda-photo-box{ display: flex; align-items: center; gap: 20px; }
.suda-photo-preview{ flex: 0 0 auto; position: relative; display: inline-flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 50%; background: var(--suda-gray-100, #f3f4f6); color: var(--suda-gray-400, #9ca3af); overflow: hidden; }
.suda-photo-preview img{ width: 100%; height: 100%; object-fit: cover; }
.suda-photo-preview img[hidden], .suda-photo-none[hidden]{ display: none; }
.suda-photo-none svg{ width: 44px; height: 44px; }
.suda-photo-actions{ flex: 1 1 auto; min-width: 0; }
.suda-photo-btns{ display: flex; flex-wrap: wrap; gap: 8px; }
.suda-photo-btn{ display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; border: 1px solid var(--suda-blue, #4154ff); border-radius: 8px; background: var(--suda-blue, #4154ff); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }
.suda-photo-btn.is-line{ border-color: var(--suda-gray-200, #e5e7eb); background: #fff; color: var(--suda-gray-700, #374151); }
.suda-photo-btn[hidden]{ display: none; }
.suda-photo-file{ position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.suda-photo-help{ margin: 8px 0 0; font-size: 13px; color: var(--suda-gray-500, #6b7280); }
.suda-photo-msg{ margin: 4px 0 0; font-size: 13px; color: var(--suda-red, #ef4444); }
.suda-photo-msg:empty{ display: none; }

@media screen and (max-width:1024px){
    .suda-mypage-avatar{ width: 4.69vw; height: 4.69vw; }
    .suda-photo-preview{ width: 9.38vw; height: 9.38vw; }
}
@media screen and (max-width:768px){
    .suda-mypage-avatar{ width: 6.25vw; height: 6.25vw; }
    .suda-photo-preview{ width: 12.5vw; height: 12.5vw; }
}
@media screen and (max-width:480px){
    .suda-mypage-namefield{ gap: 2.5vw; }
    .suda-mypage-avatar{ width: 10vw; height: 10vw; }
    .suda-mypage-avatar svg{ width: 5vw; height: 5vw; }
    .suda-photo-box{ gap: 4.17vw; }
    .suda-photo-preview{ width: 20vw; height: 20vw; }
    .suda-photo-none svg{ width: 9vw; height: 9vw; }
    .suda-photo-btn{ height: 9.17vw; padding: 0 3.33vw; font-size: 3.13vw; }
    .suda-photo-help, .suda-photo-msg{ font-size: 2.92vw; }
}

/* 메인 Traveler Stories 실제 후기 카드 (index.php) - 본문 2줄, 아래 상품명 */
a.suda-review-card--story{ display: block; color: inherit; text-decoration: none; transition: box-shadow .15s ease, transform .15s ease; }
a.suda-review-card--story:hover{ transform: translateY(-2px); box-shadow: 0 8px 24px rgba(17, 24, 39, .08); }
.suda-review-content--clamp{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* SUDA CUSTOM (2026-10-26): 회원정보 수정 "프로필 사진" 칸 정리
   - 전역으로 로드되는 skin/social/style.css 의 #fregisterform p 규칙(분홍 박스·흰 굵은 글씨·한 줄 자르기)이 안내 문구를 덮어쓰던 것 → 같은 #fregisterform 안에서 클래스로 이긴다 (css/register.css 와 같은 방식)
   - 위(휴대폰)·아래(자동등록방지)와 24px, 라벨은 다른 항목 글씨와 같게, 미리보기↔버튼 16px·세로 가운데 */
#fregisterform .suda-reginfo-list .suda-field-row:has(+ .suda-photo-field){ margin-bottom: 0; }
#fregisterform .suda-reginfo-list .suda-photo-field{ display: block; margin: 24px 0; padding: 0; }
#fregisterform .suda-photo-field .frm_label{ display: block; margin: 0 2px 8px; font-size: 15px; font-weight: 400; line-height: 1.4; color: var(--suda-gray-900, #111827); }
#fregisterform .suda-photo-box{ align-items: center; gap: 16px; }
#fregisterform .suda-photo-btns{ align-items: center; gap: 8px; }
#fregisterform .suda-photo-btn{ box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; height: 40px; min-width: 88px; margin: 0; padding: 0 16px; line-height: 1; text-align: center; vertical-align: middle; }
#fregisterform .suda-photo-help,
#fregisterform .suda-photo-msg{
    position: static; height: auto; max-width: none; margin: 8px 0 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
    font-size: 13px; font-weight: 400; line-height: 1.5; text-align: left; white-space: normal; overflow: visible; text-overflow: clip; word-break: keep-all; overflow-wrap: anywhere;
}
#fregisterform .suda-photo-help{ color: var(--suda-gray-500, #6b7280); }
#fregisterform .suda-photo-msg{ color: var(--suda-red, #ef4444); }
#fregisterform .suda-photo-msg:empty{ display: none; }
#fregisterform .suda-photo-help:before, #fregisterform .suda-photo-msg:before,
#fregisterform .suda-photo-help:after, #fregisterform .suda-photo-msg:after{ content: none; display: none; }
#fregisterform .suda-photo-box.has-error .suda-photo-help{ display: none; } /* 오류가 있을 때는 같은 자리에 빨간 글자만 */

@media screen and (max-width:1024px){
    #fregisterform .suda-reginfo-list .suda-photo-field{ margin: 2.34vw 0; }
    #fregisterform .suda-photo-field .frm_label{ margin-bottom: 0.78vw; font-size: 1.46vw; }
    #fregisterform .suda-photo-box{ gap: 1.56vw; }
    #fregisterform .suda-photo-btn{ height: 3.91vw; min-width: 8.59vw; padding: 0 1.56vw; font-size: 1.37vw; }
    #fregisterform .suda-photo-help, #fregisterform .suda-photo-msg{ margin-top: 0.78vw; font-size: 1.27vw; }
}
@media screen and (max-width:768px){
    #fregisterform .suda-reginfo-list .suda-photo-field{ margin: 3.13vw 0; }
    #fregisterform .suda-photo-field .frm_label{ margin-bottom: 1.04vw; font-size: 1.95vw; }
    #fregisterform .suda-photo-box{ gap: 2.08vw; }
    #fregisterform .suda-photo-btn{ height: 5.21vw; min-width: 11.46vw; padding: 0 2.08vw; font-size: 1.82vw; }
    #fregisterform .suda-photo-help, #fregisterform .suda-photo-msg{ margin-top: 1.04vw; font-size: 1.69vw; }
}
@media screen and (max-width:480px){
    #fregisterform .suda-reginfo-list .suda-photo-field{ margin: 5vw 0; }
    #fregisterform .suda-photo-field .frm_label{ margin-bottom: 1.67vw; font-size: 3.13vw; }
    #fregisterform .suda-photo-box{ gap: 3.33vw; }
    #fregisterform .suda-photo-btn{ height: 8.33vw; min-width: 18.33vw; padding: 0 3.33vw; font-size: 2.92vw; }
    #fregisterform .suda-photo-help, #fregisterform .suda-photo-msg{ margin-top: 1.67vw; font-size: 2.71vw; }
}

/* SUDA CUSTOM (2026-10-26): 메인 Traveler Stories - 후기가 없어도 2열 유지. PC 는 카드 3칸 = SAFETY FIRST 박스 높이
   (contain:size 로 후기 칸이 줄 높이를 키우지 않게 하고 SAFETY FIRST 높이에 맞춰 늘린다. 카드 높이는 같게, 본문 2줄, 상품명은 날짜 옆 한 줄) */
.suda-review-sub{ display: flex; align-items: center; gap: 4px; min-width: 0; }
.suda-review-item{ min-width: 0; margin-left: 6px; padding-left: 8px; border-left: 1px solid var(--suda-gray-200, #e5e7eb); font-style: normal; font-weight: 600; color: var(--suda-blue, #4154ff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suda-review-card--story .suda-review-meta{ min-width: 0; flex: 1 1 auto; }
@media (min-width: 1024px){
    .suda-safety-grid{ align-items: stretch; }
    .suda-story-col{ display: flex; flex-direction: column; contain: size; min-height: 0; }
    .suda-story-list{ flex: 1 1 0; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 12px; min-height: 0; }
    .suda-story-list > .suda-review-card{ box-sizing: border-box; margin: 0; padding: 14px 20px; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
    .suda-story-list .suda-review-head{ margin: 0; }
    .suda-story-list .suda-review-avatar{ width: 32px; height: 32px; }
    .suda-story-list .suda-review-content{ margin: 0; font-size: 14px; line-height: 1.5; }
}
@media (max-width: 1023px){
    .suda-story-list{ display: flex; flex-direction: column; gap: 3.13vw; }
    .suda-story-list > .suda-review-card{ margin: 0; }
}
/* 모바일: 상품명이 길어도 카드 밖으로 넘치지 않게 (말줄임) */
a.suda-review-card--story, .suda-review-card--story .suda-review-head{ min-width: 0; max-width: 100%; }
.suda-review-card--story .suda-review-meta, .suda-review-card--story .suda-review-sub{ overflow: hidden; }
.suda-review-card--story .suda-review-stars{ flex: 0 0 auto; }
@media (max-width: 1023px){ .suda-safety-grid{ grid-template-columns: minmax(0, 1fr); } .suda-story-col{ min-width: 0; } }
@media (min-width: 1024px){ .suda-story-col{ min-width: 0; } }