body { background: #f9f9f9 !important; } body.pushable>.pusher {background:transparent !important;} .hp.confirm .input.action { display: flex; width: 100%; } .hp.confirm .input.action > input { flex: 1 1 auto; min-width: 0; width: auto; } .hp.confirm .input.action > .button { flex: 0 0 auto; } /* 남은시간은 입력칸 안 오른쪽에 겹쳐 둔다. 폭 0 + 끝정렬이라 자리를 차지하지 않고 왼쪽으로 뻗으므로, 버튼 폭이 테마·언어마다 달라도 버튼 글자를 덮지 않는다. */ .hp.confirm #cert-direct-wrap { flex: 0 0 auto; width: 0; display: flex; justify-content: flex-end; align-items: center; gap: 4px; white-space: nowrap; font-size: 14px; } .hp.confirm #cert-direct-wrap > * { flex: 0 0 auto; } .hp.confirm #cert-direct-wrap > *:last-child { margin-right: 12px; } .hp.confirm #cert-direct-wrap.mini { font-size: 12px; } .hp.confirm #cert-direct-wrap .timer { color: red; font-weight: bold; cursor: default; } .hp.confirm #cert-direct-wrap a.reset { text-decoration: none; } .hp.confirm #cert-direct-wrap a.reset:hover { text-decoration: underline; } /* 로그인 */ #login-page {} #login-page .logo {margin:50px 0 20px; text-align:center;} /* 로고 이미지 크기 제한 */ #login-page .logo img, #signup-page .logo img, #find-password-page .logo img, #find-order-page .logo img, #social-connect-page .logo img { max-width:180px; max-height:50px; width:auto; height:auto; } #login-page .ui.tabular.menu .active.item { background: none #f9f9f9 !important; } #login-page .sub.title {text-align:center;} #login-page .keep.login {text-align:left;} #login-page .find.password {text-align:right;} /* 비회원 주문조회 — "주문번호를 잊으셨나요?" 링크 (비밀번호 찾기 링크와 동일 정렬) */ #login-page .find.order-id {text-align:right; padding-top:12px;} #login-page .find.order-id a {font-size:1rem;} #login-page .row.divider {margin-top:2rem; margin-bottom:2.3rem; font-size:1.2rem;} #login-page .sns {padding:0 10px 20px;} #login-page .sns .column {padding-top:0; padding:0 5px;} #login-page .sns .column a { margin-bottom: 10px; } #login-page .sns .column .naver img {height:0.9rem; padding-top:3px; padding-right:5px;} #login-page .sns .column .kakao img {height:0.92rem; padding-top:3px; padding-right:5px;} #login-page .sns .column .google img {height:0.92rem; padding-top:3px; padding-right:5px;} #login-page .join {padding-top:0;} #login-page .join .column {padding:0 !important;} /* 회원가입↔비회원구매 버튼 사이 간격 복원 */ #login-page .join .column + .column {padding-top:10px !important;} #login-page .join .column a.signup { background:#fff !important; } #login-page .ui.huge.input {font-size:1.143rem;} #login-page .ui.huge.input > input {} #login-page .ui.form input:not([type]), #login-page .ui.form input[type="date"], #login-page .ui.form input[type="datetime-local"], #login-page .ui.form input[type="email"], #login-page .ui.form input[type="number"], #login-page .ui.form input[type="password"], #login-page .ui.form input[type="search"], #login-page .ui.form input[type="tel"], #login-page .ui.form input[type="time"], #login-page .ui.form input[type="text"], #login-page .ui.form input[type="file"], #login-page .ui.form input[type="url"] { padding-top:0.87857143em; padding-bottom:0.87857143em; } #login-page .ui.huge.button, #login-page .ui.huge.buttons .button, #login-page .ui.huge.buttons .or { font-size:1.143rem; padding:.98571429em 1.5em .98571429em; } #login-page .vertical.divider {display:none; width:1px; height:60px; margin:20px auto 30px; background:#d8d9d9;} #login-page .keep.login label {font-size:1rem;} #login-page .ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.toggle.checkbox {margin-top:11px;} #login-page .find.password {padding-top:12px;} #login-page .find.password a {font-size:1rem;} /* 소셜로그인 */ #social-connect-page {} #social-connect-page .logo {margin:50px 0 20px; text-align:center;} #social-connect-page .row.divider {margin-top:2rem; margin-bottom:2.3rem; font-size:1.2rem;} #social-connect-page .ui.huge.input {font-size:1.143rem;} #social-connect-page .ui.huge.input > input {} #social-connect-page .ui.form input:not([type]), #social-connect-page .ui.form input[type="date"], #social-connect-page .ui.form input[type="datetime-local"], #social-connect-page .ui.form input[type="email"], #social-connect-page .ui.form input[type="number"], #social-connect-page .ui.form input[type="password"], #social-connect-page .ui.form input[type="search"], #social-connect-page .ui.form input[type="tel"], #social-connect-page .ui.form input[type="time"], #social-connect-page .ui.form input[type="text"], #social-connect-page .ui.form input[type="file"], #social-connect-page .ui.form input[type="url"] { padding-top:0.87857143em; padding-bottom:0.87857143em; } #social-connect-page .ui.huge.button, #social-connect-page .ui.huge.buttons .button, #social-connect-page .ui.huge.buttons .or { font-size:1.143rem; padding:.98571429em 1.5em .98571429em; } #social-connect-page .vertical.divider {display:none; width:1px; height:60px; margin:20px auto 30px; background:#d8d9d9;} #social-connect-page .ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.toggle.checkbox {margin-top:11px;} /* 비밀번호 찾기 */ #find-password-page {} #find-password-page .logo {margin:50px 0 20px; text-align:center;} #find-password-page .sub.title {text-align:center;} #find-password-page .ui.huge.input {font-size:1.143rem; } #find-password-page .ui.form input:not([type]), #find-password-page .ui.form input[type="date"], #find-password-page .ui.form input[type="datetime-local"], #find-password-page .ui.form input[type="email"], #find-password-page .ui.form input[type="number"], #find-password-page .ui.form input[type="password"], #find-password-page .ui.form input[type="search"], #find-password-page .ui.form input[type="tel"], #find-password-page .ui.form input[type="time"], #find-password-page .ui.form input[type="text"], #find-password-page .ui.form input[type="file"], #find-password-page .ui.form input[type="url"] { padding-top:0.87857143em; padding-bottom:0.87857143em; } #find-password-page .ui.huge.button, #find-password-page .ui.huge.buttons .button, #find-password-page .ui.huge.buttons .or { font-size:1.143rem; padding:.98571429em 1.5em .98571429em; margin-bottom:5px; } /* 전송·이전으로 버튼을 세로 스택 full-width — 로그인/회원가입과 동일한 안정적 배치 */ #find-password-page .button-group { display:flex !important; flex-direction:column; gap:10px; margin:0; } #find-password-page .button-group .column { width:100% !important; max-width:none; padding:0 !important; margin:0; } #find-password-page .inline.fields.captcha > .field + .field { padding-right:0; } /* 회원가입 */ #signup-page {padding-bottom:50px;} #signup-page .logo {margin:50px 0 20px; text-align:center;} #signup-page .toggle.checkbox {display:block !important;} /* 이메일 인증 action input(이메일행·인증번호행) */ #signup-page #cert-email-field.ui.action.input, #signup-page .email.confirm .ui.action.input { display: flex; width: 100%; } #signup-page #cert-email-field.ui.action.input > input, #signup-page .email.confirm .ui.action.input > input { flex: 1 1 auto; min-width: 0; width: auto; } #signup-page #cert-email-field.ui.action.input > .button, #signup-page .email.confirm .ui.action.input > .button { flex: 0 0 auto; white-space: nowrap; } #signup-page .hp.confirm .input.action { position: relative; } #signup-page .hp.confirm #timer-wrap { position: absolute; right: 80px; top: 50%; margin-top: -10px; font-size: 14px; } #signup-page .hp.confirm #timer-wrap .timer { color: red; font-weight:bold; cursor: default; } #signup-page .hp.confirm #timer-wrap a.reset { text-decoration: none; } #signup-page .hp.confirm #timer-wrap a.reset:hover { text-decoration: underline; } #signup-page .captcha {border-top-left-radius:.28571429rem; border-bottom-left-radius:.28571429rem; border:1px solid rgba(34,36,38,.15);} #signup-page .agreement-button {float:right;} #signup-page .ui.huge.input {font-size:1.143rem; } #signup-page .ui.form input:not([type]), #signup-page .ui.form input[type="date"], #signup-page .ui.form input[type="datetime-local"], #signup-page .ui.form input[type="email"], #signup-page .ui.form input[type="number"], #signup-page .ui.form input[type="password"], #signup-page .ui.form input[type="search"], #signup-page .ui.form input[type="tel"], #signup-page .ui.form input[type="time"], #signup-page .ui.form input[type="text"], #signup-page .ui.form input[type="file"], #signup-page .ui.form input[type="url"] { padding-top:0.87857143em; padding-bottom:0.87857143em; } #signup-page .ui.huge.button, #signup-page .ui.huge.buttons .button, #signup-page .ui.huge.buttons .or { font-size:1.22857143rem; padding:.98571429em 1.5em .98571429em; } #signup-page .ui.ui[class*="left icon"].input>input, #signup-page .ui.ui[class*="left icon"].input>textarea {padding-left:2.67142857em;} /* 회원가입 환영페이지 */ #welcome-page { padding: 80px 0 50px; } /* 회원 탈퇴 */ #withdraw-page {} /* 요약 스탯 3열 카드 */ #withdraw-page .withdraw-info {} #withdraw-page .withdraw-info h4 {font-size:1rem; font-weight:bold;} #withdraw-page .withdraw-info ul {margin:0 0 30px; padding:0 0 0 25px;} #withdraw-page .withdraw-info ul li {position:relative; margin:4px 10px; padding:0 0 0 0; font-size:0.875rem; list-style:none;} #withdraw-page .withdraw-info ul li:before { content:"-"; position:absolute; left:0; } #withdraw-page .ui.segment {padding-bottom:5px;} /* 회원 비밀번호 확인 */ #confirm-page {} #confirm-page .sub-desc {padding: 10px 0; text-align: center; font-size: 1rem; line-height: 1.6; } #confirm-page .info { margin: 0 auto; width: 500px; } #confirm-page .ui.segment {padding-bottom:5px;} /* 회원 비밀번호 확인 - 모바일 */ #confirm-page { padding: 50px 20px 60px; } /* 상단 아이콘 + 설명 */ #confirm-page .confirm-header { text-align: center; margin-top:30px; margin-bottom: 30px; } #confirm-page .confirm-icon { display: block; margin: 0 auto 14px; font-size: 4rem; line-height:1; color:#ccc; } #confirm-page .sub-desc { margin: 0; padding: 0; font-size: 0.8571rem; line-height: 1.6; color: #666; } /* 입력 영역 */ #confirm-page .info { width: 100%; } #confirm-page .field-row { margin-bottom: 18px; } #confirm-page .field-row label { display: block; margin-bottom: 8px; font-size: 0.8571rem; font-weight: 600; color: #333; } #confirm-page .field-row .value { padding: 12px 14px; background: #f7f7f7; border-radius: 4px; font-size: 0.9286rem; color: #555; } #confirm-page .field-row .ui.left.icon.input { width: 100%; } #confirm-page .field-row .ui.left.icon.input input { width: 100%; height: 46px; border-radius: 4px; border-color: #ddd; font-size: 0.9286rem; } #confirm-page .field-row .ui.left.icon.input input:focus, #confirm-page .field-row .ui.left.icon.input input:active { border-color: #111; } #confirm-page .field-row .ui.left.icon.input input::placeholder { color: #aaa; } #confirm-page .field-row .ui.left.icon.input i.icon { color: #bbb; } /* 버튼 */ #confirm-page .confirm-actions { margin-top: 30px; display: flex; flex-direction: column; gap: 10px; } #confirm-page .confirm-actions .ui.button { margin: 0; border-radius: 4px; height: 48px; line-height: 48px; padding: 0; font-size: 0.9286rem; } #confirm-page .confirm-actions .ui.black.button { background: #111; } #confirm-page .confirm-actions .ui.black.button:hover { background: #333; } #confirm-page .confirm-actions .ui.basic.button { border-color: #ddd; color: #555; } /* 마이페이지 */ #mypage-page {} #mypage-page .latest {margin: 2em 0; } #mypage-page .latest .list-no-data {padding: 20px 0 !important;} #mypage-page .latest .info {vertical-align: top;} #mypage-page .latest .options { font-size:0.8571rem;} #mypage-page .latest .thumb {width:60px;} /* 1:1 상담문의 등록/수정 */ #user-qna-write-page {} #user-qna-write-page .mt-10 {margin-top:10px;} /* 쿠폰 */ #coupon-list-page {} #coupon-list-page .info { padding: 12px 14px; background: #f8f8f8; border-radius: 10px; margin-bottom: 14px; } #coupon-list-page .info h4 {position:relative; margin: 0 0 8px 20px; font-size: 0.8125rem; font-weight: 700; color: #444; line-height: 1.4; } #coupon-list-page .info h4 i {position:absolute; left:-33px; top:-10px; line-height:1; background:none;} #coupon-list-page .info ul { margin: 0; padding: 0 0 0 20px; } #coupon-list-page .info ul li {position:relative; margin: 3px 0; padding: 0; font-size:0.8125rem ; color: #888; list-style: none; } #coupon-list-page .info ul li:before { content:'-'; position:absolute; left:-10px; } #coupon-list-page .coupon-input {margin-left: 20px; width: 450px;} #coupon-list-page .coupon-input input.code {text-align:center;} #coupon-list-page .ui.coupon { margin: 12px 0; } /* 쿠폰번호 입력 */ #coupon-list-page .coupon-input { width: 100% !important; margin: 0 !important; } #coupon-list-page .code-fields { display: flex; align-items: center; gap: 4px; margin-bottom: 10px; } #coupon-list-page .code-fields input.code { flex: 1; min-width: 0; width: 100%; padding: 12px 4px !important; text-align: center; border: 1px solid #ddd; letter-spacing: 2px; } #coupon-list-page .code-fields .dash { color: #ccc; } #coupon-list-page .btn-coupon-submit { width: 100%; margin: 0; padding: 14px 0; font-weight: 700; } /* 쿠폰 카드 */ .coupon-card-list { display: flex; flex-direction: column; gap: 10px; } .coupon-card-list .coupon-line { padding: 14px; border: 1px solid #eee; border-radius: 10px; background: #fff; } .coupon-card-list .coupon-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .coupon-card-list .coupon-code { font-size: 0.9375rem; font-weight: 600; color: #222; } .coupon-card-list .coupon-price { font-size: 1rem; font-weight: 700; color:#111; } .coupon-card-list .coupon-meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.8125rem; color: #888; } .coupon-card-list .coupon-meta .status.ok { color: #424d9d; font-weight: 700; } .coupon-card-list .coupon-reg { margin-top: 6px; font-size: 0.8125rem; color: #aaa; } #coupon-list-page .search-area { margin-top: 0 !important; } #coupon-list-page .search-area .ui.form { padding: 10px; border: 1px solid rgba(34, 36, 38, 0.15); background: #f9f9f9; } #coupon-list-page .search-area .fields { margin-bottom: 0 !important; justify-content: center; } /* MERGED: 검색 필드를 한 줄(nowrap) 배치로 통일 */ #coupon-list-page .search-area .inline.fields { display: flex; flex-wrap: nowrap; gap: 6px; margin: 0 !important; } #coupon-list-page .search-area .dropdown.select-search { min-width: 88px !important; min-height: 1.11428571em; margin-right: 0 !important; flex: 0 0 auto; padding: .55571429em 2.1em .58571429em 1em; border-radius: 0 !important; border-color: #999; font-size: 0.875rem; font-weight: 400; } #coupon-list-page .search-area .dropdown.select-search .dropdown.icon { top: .58571429em; } #coupon-list-page .search-area .fields .input.keyword { flex: 1 1 auto; min-width: 0 !important; height: 32px; } #coupon-list-page .search-area .ui.input input { width: 100% !important; border-radius: 0 !important; border-color: #999; font-size: 0.875rem !important; line-height: 1rem; } #coupon-list-page .search-area .ui.input input::placeholder { color: #777; } #coupon-list-page .search-area .ui.input input:focus, #coupon-list-page .search-area .ui.input input:active { border-color: #000; } #coupon-list-page .search-area .fields .keyword button { position: relative; left: -30px; appearance: none; background: none; border: 0; outline: none; cursor: pointer; font-size: 1rem; font-weight: 500; color: #000; } #coupon-list-page .search-area .fields .keyword button i { color: #000; } #coupon-list-page .dropdown.select-category { float: right; display: inline-block; min-width: 180px !important; min-height: 1rem; padding: .38571429em 3.2em .38571429em 1em; border-radius: 0; border-color: #999; } #coupon-list-page .dropdown.select-category input { font-size: 0.875rem !important; } #coupon-list-page .dropdown.select-category .dropdown.icon { top: .31428571em !important; } /* ----- 드롭다운 커스텀 ----- */ #coupon-list-page .ui.selection.active.dropdown .menu, #coupon-list-page .ui.selection.active.dropdown:hover .menu { border-color: #333; border-radius: 0; } #coupon-list-page .ui.dropdown > .text, #coupon-list-page .ui.default.dropdown:not(.button) > .text, #coupon-list-page .ui.dropdown:not(.button) > .default.text { color: #777; font-size: 0.875rem !important; } #coupon-list-page .ui.selection.dropdown .menu > .item { font-size: 0.875rem !important; } .coupon-kok--title {margin-top:20px;} .coupon-kok--title h3 {margin:0; padding:0 0 10px; font-size:1rem; font-weight:600;} .coupon-benefit-cards.ui.stackable.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0 0 2rem; } /* Fomantic 카드 기본 그림자/보더 대체, 좌측 컬러바 추가 */ .coupon-benefit-cards .card { position: relative; width: 100% !important; margin: 0 !important; padding-left: 14px; border: 1px solid #ddd; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); } .coupon-benefit-cards .card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: var(--text-coupon-color); border-radius: 10px 0 0 10px; } .coupon-benefit-cards .content { padding: 12px 18px 12px 24px !important; } .coupon-benefit-cards .header { font-size: 1.375rem !important; font-weight: 800; color: var(--text-coupon-color); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .coupon-benefit-cards .coupon-kok-label.ui.mini.red.label { vertical-align: middle; font-size: 0.6875rem; margin-bottom:2px; padding:4px 10px; } .coupon-benefit-cards .meta { margin-top: 8px !important; font-size: 0.875rem; color: #111 !important; font-weight:600; line-height: 1.3; } .coupon-benefit-cards .meta .target-text { color: #777; } .coupon-benefit-cards .description { margin-top: 10px !important; font-size: 0.8125rem; color: #888 !important; font-weight:500; line-height: 1.7; } .coupon-benefit-cards .extra.content { padding: 12px 18px !important; border-top: 1px solid #f0f0f0 !important; font-size: 0.8125rem; font-weight: 700; } .coupon-benefit-cards .extra.content .ui.green.text { color: #2e9e5b !important; font-size: 0.8125rem;} .coupon-benefit-cards .extra.content .ui.grey.text { color: #999 !important; font-size: 0.8125rem;} .coupon-benefit-cards .extra.content .ui.red.text { color: #d92d20 !important; font-size: 0.8125rem;} /* 모바일: 3컬럼 → 1컬럼 */ /* 보유 할인쿠폰 - 모바일 전용 (클래스명 동일, 스타일만 재정의) */ @media all { .coupon-benefit-cards.ui.stackable.cards { display: grid !important; flex-direction: unset !important; grid-template-columns: repeat(1, 1fr) !important; align-items: stretch !important; gap: 10px !important; margin: 0 0 1.5rem !important; padding: 0 !important; } .coupon-benefit-cards.ui.stackable.cards > .card { display: flex !important; flex-direction: row !important; align-items: center !important; width: 100% !important; height: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: none !important; margin: 0 !important; padding-left: 5px; border: 1px solid #ddd; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); } .coupon-benefit-cards.ui.stackable.cards > .card::before { width: 8px; border-radius: 10px 0 0 10px; } .coupon-benefit-cards .content { flex: 1 1 auto; min-width: 0; padding: 12px 14px 12px 22px !important; } .coupon-benefit-cards .header { font-size: 0.9375rem !important; gap: 4px; line-height: 1.3; } .coupon-benefit-cards .coupon-kok-label.ui.mini.red.label { font-size: 0.5625rem; padding: 0.35em 0.5em !important; } .coupon-benefit-cards .meta { margin-top: 5px !important; font-size: 0.6875rem; line-height: 1.4; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .coupon-benefit-cards .meta .target-text { display: none; } .coupon-benefit-cards .description { margin-top: 6px !important; font-size: 0.6875rem; line-height: 1.55; } .coupon-benefit-cards .extra.content { flex: 0 0 auto !important; /* auto 높이 밀기 대신 고정 폭만 */ margin-top: 0 !important; /* 기존 하단 고정용 auto 제거 */ padding: 12px 22px 12px 8px !important; font-size: 0.75rem; white-space: nowrap; border-top: 0 !important; /* 세로 배치일 때 위에 있던 구분선 제거 */ } .coupon-benefit-cards.ui.card>.extra, .coupon-benefit-cards.ui.cards>.card>.extra {border-top:0 !important;} } /* ↑ 쿠폰카드 모바일 오버라이드 @media all 블록 닫힘 */ /* 적립금 내역 / 캐시 내역 */ #point-list-page {} #point-list-page .ui.message, #cash-list-page .ui.message {background:none;} #point-list-page .ui.message .statistics .label, #cash-list-page .ui.message .statistics .label {padding-bottom:10px;} #point-list-page .ui.message .statistics .value, #cash-list-page .ui.message .statistics .value {font-size:1.143rem;} /* 관심상품 */ #goods-wish-list-page {} #goods-wish-list-page .info {vertical-align: top;} #goods-wish-list-page .thumb {width:60px;} /* 노이미지 폴백 박스 */ #goods-wish-list-page .thumb-box {display:inline-block; width:60px; height:60px; position:relative;} #goods-wish-list-page .thumb-box .thumb {width:60px; height:60px; object-fit:cover;} #goods-wish-list-page .thumb-box .no-image {width:60px; height:60px; align-items:center; justify-content:center; background:#f5f5f5; border:1px solid #eee; color:#d1d1d1; font-size:1.3rem;} /* 최근본상품 */ #recent-list-page {} #recent-list-page .info {vertical-align: top;} /* 회원 페이지 모바일 반응형 오버라이드 (아래는 모두 모바일 전용) */ /* ---- 인증계열(로그인/회원가입/비번찾기/소셜연결) 공통 ---- */ #login-page, #find-password-page, #social-connect-page { padding: 10px 0 40px; } /* 데스크톱 중앙 4wide 컬럼 → 모바일 전체폭 카드 */ #login-page .ui.grid, #find-password-page .ui.grid, #social-connect-page .ui.grid { margin: 0; min-height: 0 !important; } #login-page .ui.grid > .column, #find-password-page .ui.grid > .column, #social-connect-page .ui.grid > .column { width: 100% !important; margin: 0 auto; padding: 0 20px; float: none; } /* 로고 */ #login-page .logo, #find-password-page .logo, #social-connect-page .logo, #signup-page .logo { margin: 24px 0 18px; text-align: center; } .logo img { max-height: 50px; width: auto; } /* 가입/비회원 버튼 라운드 */ #login-page .join .column a, #login-page .signup { border-radius: 5px; } /* SNS 3열 → 세로 스택(터치 편의) */ #login-page .sns.grid { display: block; padding: 0 0 10px; } #login-page .sns.grid .column { width: 100% !important; padding: 0 !important; } #login-page .sns .column a { margin-bottom: 8px; border-radius: 5px; justify-content: center; } /* 아이디저장/비번찾기 행 */ #login-page .two.fields { display: flex; justify-content: space-between; align-items: center; } #login-page .keep.login label, #login-page .find.password a { font-size: 0.875rem; } /* 카피라이트 */ .copyright { margin: 26px 0 0 !important; text-align: center; font-size: 0.75rem; color: #aaa; } /* ---- 콘텐츠 폼 계열(info/qna 작성) 공통 ---- */ #info-page, #user-qna-write-page { padding: 20px 16px 40px; background:#fff; } #info-page .page-title, #user-qna-write-page .page-title { padding: 16px 0; font-size: 1.1429rem; font-weight: 700; color: #111; } /* 섹션 구분 */ /* 1. Semantic/Formantic grid의 기본 음수 마진 제거 → 폭 기준 통일 */ #info-page .ui.grid, #info-page .ui.centered.grid { margin: 0 !important; width: 100% !important; } #info-page .ui.centered.grid .row, #info-page .ui.centered.grid .column { padding: 0 !important; } #info-page .ui.form .inline.fields .field {padding-right:0;} /* 2. 하단 버튼 영역 - grid 대신 flex 기준으로 폭 고정 */ #info-page .ui.centered.grid .column { display: flex; gap: 8px; padding: 16px 0 0 !important; width: 100% !important; } #info-page .ui.centered.grid .ui.button { flex: 1; margin: 0; border-radius: 8px; padding: 15px 0; font-size: 0.9375rem; font-weight: 700; box-sizing: border-box; } /* 3. 페이지 전체 가로 넘침 방지 (스크롤바 원인 제거) */ #info-page { overflow-x: hidden; box-sizing: border-box; } #info-page * { box-sizing: border-box; } /* 4. 토글 줄도 카드와 동일한 좌우 기준으로 고정 */ #info-page .toggle-row { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 0; } #info-page .form-section { margin-bottom: 14px; padding: 18px 16px 6px; border: 1px solid #eee; border-radius: 8px; background: #fff; } #info-page .section-title { margin-bottom: 14px; font-size: 0.875rem; font-weight: 700; color: #333; letter-spacing: 0.02em; } /* 프로필 사진 영역 - 사진 없을 때 placeholder 원 추가 */ #info-page .avatar-section { display:flex; flex-direction:column; align-items:center; padding: 24px 0 24px; } #info-page .avatar-wrap { position:relative; width:88px; height:88px; border-radius:50%; background:#f0f0f0; /* ← 사진 없을 때 보일 기본 원형 배경 */ display:flex; align-items:center; justify-content:center; } #info-page .avatar-wrap::before { content:''; position:absolute; inset:0; border-radius:50%; border:1px solid #e6e6e6; } #info-page .user-avatar-preview { width:88px; height:88px; object-fit:cover; border-radius:50%; border:1px solid #eee; background:#f7f7f7; position:absolute; top:0; left:0; } #info-page .avatar-upload-btn { position:absolute; right:-2px; bottom:-2px; width:30px; height:30px; display:flex; align-items:center; justify-content:center; background:#111; color:#fff; border-radius:50%; cursor:pointer; font-size:0.85rem; border:2px solid #fff; z-index:2; /* ← 카메라 버튼이 원 위에 확실히 올라오도록 */ } #info-page .avatar-upload-btn input[type="file"] { display:none; } #info-page .avatar-desc { margin-top:6px; font-size:0.8125rem; color:#aaa; } /* inline fields 라벨 상단 스택 */ #info-page .inline.fields, #user-qna-write-page .inline.fields { display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 14px; } #info-page .inline.fields > label, #user-qna-write-page .inline.fields > label { flex: 0 0 100%; width: 100%; min-width: 0 !important; margin: 0 0 6px; padding-left: 2px; font-size: 0.875rem; font-weight: 600; color: #555; } #info-page .inline.fields .field, #info-page .inline.fields .field[class*="wide"], #info-page .inline.fields .five.field, #user-qna-write-page .inline.fields .field { width: 100% !important; margin: 0; } #info-page .inline.fields .field input, #info-page .inline.fields .field select, #info-page .inline.fields .field textarea, #info-page .inline.fields .field .ui.input, #info-page .inline.fields .field .ui.action.input { width: 100%; } #info-page .inline.fields .field .ui.action.input input { flex: 1; } /* 입력창 공통 스타일 */ #info-page input[type="text"], #info-page input[type="password"] { height: 44px; padding: 0 12px; border: 1px solid #e2e2e2; border-radius: 6px; font-size: 0.9rem; color: #222; background: #fff; } #info-page input[type="text"]:focus, #info-page input[type="password"]:focus { border-color: #111; } #info-page input[readonly] { background: #f7f7f7; color: #888; } #info-page input::placeholder { color: #bbb; } /* 아이디(읽기전용 텍스트) */ #info-page .readonly-text { height: 44px; display:flex; align-items:center; padding: 0 12px; border-radius: 6px; background: #f7f7f7; font-size: 0.9286rem; font-weight: 600; color: #444; } /* 필드 보조 설명 */ #info-page .field-hint { display:block; margin-top:6px; font-size:0.8125rem; color:#aaa; } /* 액션 인풋(우편번호 찾기, 인증번호 등) */ #info-page .ui.action.input { display:flex; gap:6px; } #info-page .ui.action.input .ui.button { flex-shrink:0; margin:0; height:44px; border-radius:6px; font-size:0.8214rem; background:#f2f2f2; color:#333; box-shadow:none; } #info-page #cert-direct-wrap { font-size:0.75rem; color:#999; } #info-page #cert-direct-wrap .reset { color:#76b9bd; } /* 본인인증 버튼 */ #info-page .cert-btn { margin:0; border-radius:6px; background:#76b9bd; } /* 토글(알림 설정) */ #info-page .toggle-row:not(:last-child) { border-bottom: 1px solid #f2f2f2; } #info-page .toggle-label { font-size: 0.8571rem; color:#333; } #info-page .ui.toggle.checkbox { min-height:auto; min-width:34px;} #info-page .ui.toggle.checkbox label { padding:0; } /* 구분선 제거(섹션 카드로 대체) */ #info-page .ui.divider, #user-qna-write-page .ui.divider { display:none; } /* 하단 버튼 */ #info-page .ui.centered.grid { margin-top: 4px; } #info-page .ui.centered.grid .submit.button { background: var(--point-color); color: var(--text-on-white-point); } #info-page .ui.centered.grid .ui.basic.button { border-color:#ddd; color:#666; } /* ---- 고정폭 요소 해제(공통) ---- */ #confirm-page .info { width: 100% !important; } #confirm-page { padding: 0 16px 40px; } #coupon-list-page .coupon-input { width: 100% !important; margin-left: 0 !important; } /* ---- 마이페이지 ---- */ #mypage-page { padding: 0 16px 40px; } /* 요약 스탯 3열 카드 */ .mileage-info { display: flex; flex-direction: row; margin: 20px 0 12px 0; padding: 0; background: #fafafa; border: 1px solid #eee; border-radius: 10px; overflow: hidden; } .mileage-info .stat-cell { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 6px; text-align: center; border-left: 1px solid #eee; color: #333; } .mileage-info .stat-cell:first-child { border-left: 0; } .mileage-info .stat-label { font-size: 0.8125rem; color: #888; } .mileage-info .stat-value { font-size: 1rem; font-weight: 700; color: #222; } .mileage-info .stat-value strong { color:#000; } /* 회원정보 정의형 카드 */ #mypage-page .info-card { margin: 12px 0; border: 1px solid #eee; border-radius: 10px; overflow: hidden; } #mypage-page .info-card-title { margin: 0; padding: 12px 14px; background: #f9f9f9; border-bottom: 1px solid #eee; font-size: 0.9375rem; font-weight: 700; color: #333; } #mypage-page .info-dl { margin: 0; padding: 6px 14px; overflow: hidden; } #mypage-page .info-dl dt { float: left; clear: left; width: 112px; /* 92px → 112px: '연결된 AI 서비스' 등 긴 라벨이 눌려 줄바꿈되던 것 완화 */ padding: 8px 0; font-size: 0.875rem; color: #999; } #mypage-page .info-dl dd { margin: 0; padding: 8px 0 8px 120px; /* dt 폭 확장에 맞춰 100px → 120px */ font-size: 0.875rem; color: #333; border-bottom: 1px solid #f4f4f4; word-break: break-all; } #mypage-page .info-dl dd:last-child { border-bottom: 0; } /* 회원 이름 옆 레벨 뱃지: 사용자 화면에서 본인 레벨을 확인하는 유일한 자리 */ #mypage-page .user-level-badge {display:inline-block; margin-left:6px; padding:1px 8px; border-radius:10px; background:var(--point-color, #2464eb); color:var(--text-on-point, #fff); font-size:0.75rem; font-weight:500; line-height:1.6; vertical-align:middle; white-space:nowrap;} /* 최근 목록 */ #mypage-page .latest { margin: 25px 0; } #mypage-page .latest .latest-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } #mypage-page .latest .latest-head h4 { margin: 0; font-size: 0.9375rem; font-weight: 700; color: #333; } #mypage-page .latest .btn-more { display: inline-flex; align-items: center; font-size:0.8125rem; color: #777; } #mypage-page .latest-list { display: flex; flex-direction: column; gap: 10px; } #mypage-page .latest-order-group { border: 1px solid #eee; border-radius: 10px; overflow: hidden; } #mypage-page .latest-order-group .group-top { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: #f9f9f9; border-bottom: 1px solid #eee; font-size: 0.8125rem; } #mypage-page .latest-order-group .group-date { font-weight: 600; color: #555; } #mypage-page .latest-order-group .btn-detail { color: #777; } #mypage-page .latest-line { display: flex; gap: 10px; padding: 12px; border: 1px solid #eee; border-radius: 10px; background: #fff; } #mypage-page .latest-order-group .latest-line { border: 0; border-radius: 0; border-bottom: 1px solid #f4f4f4; } #mypage-page .latest-order-group .latest-line:last-child { border-bottom: 0; } #mypage-page .latest-line .thumb-box { position: relative; flex-shrink: 0; width: 60px; height: 60px; border-radius: 8px; overflow: hidden; background: #f8f8f8; } #mypage-page .latest-line .thumb-box img.thumb { width: 100%; height: 100%; object-fit: cover; } #mypage-page .latest-line .thumb-box .no-image { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#d1d1d1; font-size:1.3rem; } #mypage-page .latest-line .line-info { flex: 1; min-width: 0; } #mypage-page .latest-line .name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.875rem; line-height: 1.4; color: #222; font-weight: 500; } #mypage-page .latest-line .sub { margin: 3px 0 0; font-size:0.8125rem; color: #999; word-break: break-all; } #mypage-page .latest-line .line-bottom { display: flex; justify-content: space-between; align-items: baseline; margin-top: 5px; } #mypage-page .latest-line .line-bottom .status { font-size: 0.8125rem; font-weight: 600; } #mypage-page .latest-line .line-bottom .price { font-size: 0.875rem; font-weight: 700; color: #111; } #mypage-page .latest-line .line-bottom .wish-date { font-size: 0.8125rem; color: #aaa; } #mypage-page .latest-line .btn-tracking { display: inline-block; margin: 6px 0 0; padding: 5px 10px; border: 1px solid #ddd; border-radius: 6px; background:#fff; color:#555; font-size: 0.6875rem; } #mypage-page .latest-empty { padding: 30px; text-align: center; color: #aaa; font-size: 0.8125rem; } #mypage-page .list-no-data { padding: 30px; text-align: center; color: #aaa; font-size: 0.8125rem; } #mypage-page .list-no-data i {width:50px; height:40px; font-size:3rem;} /* ---- 마이페이지 리스트 공통(관심/최근/적립금) ---- */ .mypage-list-page { padding: 0 16px 20px; } .mypage-list-page .page-title { padding: 16px 0 4px; } .mypage-list-page .list-count { padding:20px 0 10px 0; font-size: 0.8125rem; color: #666; } .mypage-list-page .list-count strong { color: #000; } .mypage-list-page .list-empty { padding: 60px 20px; text-align: center; color: #999; } .mypage-list-page .list-empty i { font-size: 3rem; color: #ddd; } .mypage-list-page .list-empty p { margin-top: 12px; font-size: 0.875rem; } /* 상품 카드 리스트(관심/최근) */ .goods-card-list { display: flex; flex-direction: column; gap: 10px; } .goods-card-list .goods-line { position: relative; display: flex; gap: 12px; padding: 12px; border: 1px solid #eee; border-radius: 10px; background: #fff; } .goods-card-list .goods-line .thumb-box { position: relative; flex-shrink: 0; width: 72px; height: 72px; border-radius: 8px; overflow: hidden; background: #f8f8f8; } .goods-card-list .goods-line .thumb-box img.thumb { width: 100%; height: 100%; object-fit: cover; } .goods-card-list .goods-line .thumb-box .no-image { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#d1d1d1; font-size:1.5rem; } .goods-card-list .goods-line .line-info { flex: 1; min-width: 0; padding-right: 25px; } .goods-card-list .goods-line .name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.875rem; line-height: 1.4; color: #222; font-weight: 500; } .goods-card-list .goods-line .sub { margin: 4px 0 0; font-size: 0.75rem; color: #999; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .goods-card-list .goods-line .line-bottom { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; } .goods-card-list .goods-line .line-bottom .date { font-size: 0.8125rem; color: #aaa; } .goods-card-list .goods-line .line-bottom .price { font-size: 0.875rem; font-weight: 600; color: #111; } .goods-card-list .goods-line .btn-remove { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: #bbb; font-size: 1.3rem; } /* 관심상품: 상품제안서 일괄출력 선택 체크박스 + 하단 액션바(전체선택/출력) */ .goods-card-list .goods-line .line-check { align-self: center; flex-shrink: 0; } .wish-bottom-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; } .wish-bottom-actions.single { justify-content: flex-end; } /* 버튼 1개(초대장 새 만들기)면 우측정렬 */ /* 적립금 요약 카드 */ .point-summary { display: flex; margin: 12px 0; background: #fafafa; border: 1px solid #eee; border-radius: 10px; overflow: hidden; } .point-summary .summary-cell { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 6px; text-align: center; border-left: 1px solid #eee; } .point-summary .summary-cell:first-child { border-left: 0; } .point-summary .s-label { font-size: 0.75rem; color: #888; } .point-summary .s-value { font-size: 0.9375rem; font-weight: 800; color: #222; } .point-summary .s-value.plus { color: #424d9d; } .point-summary .s-value.minus { color: var(--point-color); } .point-summary .summary-cell.total { background: #fff5f5; } /* 적립금 로그 리스트 */ .point-log-list { display: flex; flex-direction: column; border-top:2px solid #111;} .point-log { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 4px; border-bottom: 1px solid #f2f2f2; } .point-log .log-info { min-width: 0; } .point-log .log-memo { margin: 0; font-size: 0.875rem; color: #333; word-break: break-all; } .point-log .log-date { margin: 4px 0 0; font-size: 0.75rem; color: #aaa; } /* 적립금 만료일 줄 — 지급행에만 노출 */ .point-log .log-expire { margin: 2px 0 0; font-size: 0.75rem; color: #b98900; } .point-log .log-amount { flex-shrink: 0; font-size: 0.9375rem; font-weight: 600; } .point-log .log-amount.plus { color: #000; } .point-log .log-amount.minus { color: var(--point-color); } /* ---- 1:1 상담문의 목록 ---- */ .qna-card-list { display: flex; flex-direction: column; gap: 10px; } .qna-card-list .qna-line { display: block; padding: 14px; border: 1px solid #eee; border-radius: 10px; background: #fff; } .qna-card-list .qna-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .qna-card-list .qna-cat { font-size: 0.75rem; color: #666; background: #f2f2f2; padding: 3px 10px; border-radius: 20px; } .qna-card-list .qna-status { font-size: 0.8125rem; font-weight: 700; } .qna-card-list .qna-status.done { color: var(--point-color); } .qna-card-list .qna-status.wait { color: #999; } .qna-card-list .qna-subject { margin: 0; font-size: 0.875rem; color: #222; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .qna-card-list .qna-date { margin: 6px 0 0; font-size: 0.8125rem; color: #aaa; } /* 문의 작성 버튼 */ /* 마이페이지 목록 하단 작성/추가 버튼 바 — 1:1 상담문의(qna)·배송 주소록 공용 */ .qna-write-bar, .list-write-bar { margin: 16px 0; } .qna-write-bar .btn-qna-write, .list-write-bar .ui.button { display: block; width: 100%; margin: 0; padding: 14px 0; text-align: center; font-weight: 700; } /* ---- 회원가입 ---- */ #signup-page { padding: 10px 0 40px; } #signup-page .ui.grid { margin: 0; min-height: 0 !important; } #signup-page .ui.grid > .column { width: 100% !important; max-width: 460px; margin: 0 auto; padding: 0 20px !important; float: none; } /* 비밀번호/확인 2단 → 스택 */ #signup-page .two.fields { display: block; margin-bottom: 0; } #signup-page .two.fields > .field { width: 100% !important; margin-bottom: 1em; } #signup-page .field > label { font-size: 0.875rem; font-weight: 600; color: #555; } #signup-page .ui.segment { border-radius: 10px; margin: 1em 0; } #signup-page .agreement-button { color: var(--point-color); text-decoration: underline; } /* ---- 회원탈퇴 ---- */ #withdraw-page { padding: 0 16px 40px; } #withdraw-page .page-title { padding: 16px 0 0; } #withdraw-page .ui.form .inline.fields .field {padding-right:0;} /* 유의사항 */ #withdraw-page .withdraw-info { margin: 14px 0; padding: 14px; background: #fff8f8; border: 1px solid #f3dede; border-radius: 10px; } #withdraw-page .withdraw-info h4 { margin: 0 0 8px; font-size: 0.8125rem; font-weight: 700; color: #c0392b; } #withdraw-page .withdraw-info ul { margin: 0; padding: 0; } #withdraw-page .withdraw-info ul li { margin: 4px 0; padding: 0 0 0 10px; font-size: 0.75rem; color: #888; list-style: none; line-height: 1.5; } #withdraw-page .withdraw-info ul li:before { content:"-"; } /* 폼 inline fields 스택 */ #withdraw-page .ui.segment { border-radius: 10px; padding: 14px; } #withdraw-page .inline.fields { display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 6px; } #withdraw-page .inline.fields > label { flex: 0 0 100%; width: 100%; min-width: 0 !important; margin: 0 0 6px; font-size: 0.8125rem; font-weight: 600; color: #555; } #withdraw-page .inline.fields .field, #withdraw-page .inline.fields .sixteen.wide.field { width: 100% !important; margin: 0 0 4px; } #withdraw-page .inline.fields .field input, #withdraw-page .inline.fields .field textarea { width: 100%; } #withdraw-page .inline-radio { display: block; margin: 4px 0; } #withdraw-page .ui.divider { margin: 8px 0; border-color: #f2f2f2; } /* 하단 버튼 */ #withdraw-page .ui.centered.grid .column { display: flex; gap: 8px; padding: 16px 16px 0; } #withdraw-page .ui.centered.grid .ui.button { flex: 1; margin: 0; padding: 14px 0; font-weight: 600; } /* ---- 1:1 문의 작성 ---- */ #user-qna-write-page .field[class*="wide"] { width: 100% !important; } #user-qna-write-page .field > label { font-size: 0.8125rem; font-weight: 600; color: #555; } #user-qna-write-page .field input:not([type="submit"]), #user-qna-write-page .field select, #user-qna-write-page .field textarea { width: 100%; } #user-qna-write-page textarea { min-height: 140px; } #user-qna-write-page .ui.centered.grid .column { display: flex; gap: 8px; padding: 16px 16px 0; } #user-qna-write-page .ui.centered.grid .ui.button {flex: 1; margin: 0; border-radius: 5px; font-weight: 600;} /* ---- 1:1 문의 보기 ---- */ #user-qna-view-page { padding: 0 16px 40px; } #user-qna-view-page .page-title { padding: 16px 0; } #user-qna-view-page .ui.grid { display: flex; margin: 12px 0 0; gap: 8px; } #user-qna-view-page .ui.grid > .column { width: auto !important; padding: 0 !important; } #user-qna-view-page .ui.grid > .five.wide.column { flex: 0 0 auto; } #user-qna-view-page .ui.grid > .eleven.wide.column { flex: 1; text-align: right; } /* QnA 정의테이블 = 카드 */ #user-qna-view-page .qna-info-table { table-layout:fixed; width:100%; margin:20px 0 0; border:1px solid #eee; border-radius:10px; overflow:hidden; } #user-qna-view-page .qna-info-table td { word-break:break-word; } #user-qna-view-page .qna-info-table td.col { color:#555; font-weight:600; } @media (max-width: 767.98px) { /* Fomantic 자동스택 재정의: 행 상하 패딩 */ #user-qna-view-page .qna-info-table > tbody > tr { padding:0 !important; box-shadow:none !important; border-top:1px solid #eee; } #user-qna-view-page .qna-info-table > tbody > tr:first-child { border-top:0; } #user-qna-view-page .qna-info-table > tbody > tr > td { padding:11px 14px !important; } /* 라벨 = 섹션 상단을 꽉 채우는 회색 헤더 스트립 (좌우·상단 밀착) */ #user-qna-view-page .qna-info-table > tbody > tr > td.col { background:#f7f8fa !important; padding:8px 14px !important; white-space:normal !important; } } /* ---- 비밀번호 확인 ---- */ #confirm-page { padding: 0 16px 40px; } #confirm-page .sub-desc { padding: 14px 0; font-size: 0.875rem; line-height: 1.6; } #confirm-page .ui.segment { border-radius: 10px; } #confirm-page .inline.fields { display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 6px; } #confirm-page .inline.fields > label { flex: 0 0 100%; width: 100%; min-width: 0 !important; margin: 0 0 6px; font-size: 0.8125rem; font-weight: 600; color: #555; } #confirm-page .inline.fields .field { width: 100% !important; } #confirm-page .inline.fields .field input { width: 100%; } #confirm-page .ui.centered.grid .column { display: flex; gap: 8px; padding: 16px 0 0; } #confirm-page .ui.centered.grid .ui.button { flex: 1; margin: 0; border-radius: 10px; padding: 14px 0; font-weight: 700; } #confirm-page .ui.centered.grid .submit { background: var(--point-color); color: var(--text-on-white-point); } /* ---- 회원가입 환영 ---- */ #welcome-page { padding:50px 18px 60px; text-align:center; } #welcome-page .welcome-icon { display:block; margin:0 auto 20px; font-size:6rem; line-height:1; color:var(--point-color); } #welcome-page .header { margin:20px 0 24px; font-size:1.25rem; font-weight:600; color:#111; line-height:1.6; } /* 아이디/이메일 정보 */ #welcome-page .user-info { margin:0 0 28px; border:1px solid #eee; border-radius:6px; overflow:hidden; } #welcome-page .user-info .row { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid #eee; } #welcome-page .user-info .row:last-child { border-bottom:0; } #welcome-page .user-info .label { font-size:0.875rem; color:#999; } #welcome-page .user-info strong { font-size:0.9375rem; font-weight:600; color:#222; word-break:break-all; } /* 안내 리스트 */ #welcome-page .notice-list { text-align:left; margin:0 0 30px; padding:16px 22px; border-radius:6px; background:#fafafa; } #welcome-page .notice-list .item { font-size:0.875rem; color:#666; line-height:1.6; } #welcome-page .notice-list .item::before {margin-left:-10px; color:#bbb; } /* 공급처/가맹점 입점신청 폼 (모바일) */ .apply-page {box-sizing: border-box; overflow-x: hidden; } .apply-page * { box-sizing: border-box; } .apply-page .apply-inner { padding: 16px 16px 40px; } .apply-page .apply-guide { padding: 4px 0 18px; text-align: center; color: #888; font-size: 1rem; line-height: 1.5; } .apply-page .apply-guide a { color: #333; font-weight: 600; text-decoration: underline; } /* 섹션 카드 */ .apply-page .form-section { margin-bottom: 14px; padding: 18px 16px 6px; border: 1px solid #e8e8e8; border-radius: 12px; background: #fff; } .apply-page .section-title { margin: 0 0 14px; padding-bottom: 10px; font-size: 1.125rem; font-weight: 700; color: #111; border-bottom: 1px solid #111; } /* 라벨 상단 스택 (inline fields = info-page 규약) */ .apply-page .inline.fields { display: flex; flex-wrap: wrap; margin: 0 0 14px; } .apply-page .inline.fields > label { flex: 0 0 100%; width: 100%; min-width: 0 !important; margin: 0 0 6px; padding-left: 2px; font-size: 0.875rem; font-weight: 600; color: #555; } .apply-page .inline.fields .ui.action.input > input {min-width:150px;} .apply-page .inline.fields .ui.file .text {min-width:200px;} .apply-page .inline.fields .field { width: 100% !important; margin: 0; padding-right:0 !important; } .apply-page .req::after { content: '*'; color: #e03131; font-weight: 700; margin-left: 3px; } /* 모바일은 묶음 인풋도 세로 스택 */ .apply-page .field-group { display: flex; flex-direction: column; gap: 8px; } .apply-page .field-group > input { max-width: none !important; } .apply-page .inline.fields .field-group > .inline.fields {margin-bottom:0;} .apply-page .field-hint { display: block; margin-top: 6px; font-size: 0.8125rem; color: #aaa; } /* 서비스 선택(라디오 리스트) */ .apply-page .service-list .ui.radio.checkbox { display: block; padding: 12px 2px; } .apply-page .service-list .ui.radio.checkbox + .ui.radio.checkbox { border-top: 1px solid #f2f2f2; } .apply-page .service-list .price { color: #999; font-weight: 500; } /* 동의 박스 */ .apply-page .agree-row { margin: 6px 0 0; padding: 16px; border: 1px solid #e8e8e8; border-radius: 10px; background: #fff; } .apply-page .agree-row .agree-item { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .apply-page .agree-row .agree-item .ui.checkbox { display: inline-flex; align-items: center; } .apply-page .agree-row .field { margin-bottom: 15px; } .apply-page .agreement-box { max-height:200px;overflow-y:auto;border:1px solid #e5e5e5;border-radius:6px;padding:12px; margin-bottom:12px; background:#fafafa;font-size:13px;line-height:1.6;} .apply-page .agree-item .agreement-button { flex-shrink: 0; margin-left: 12px; font-size: 0.875rem; color: #3478b8 !important; } .apply-page .agree-item .agreement-button:hover { color:#0061bc !important; text-decoration: underline; } .apply-page .ui.custom-segment { position: relative; background: #fff; border:1px solid #e9e9e9; border-radius:12px; margin:1rem auto 2rem; padding: 40px 20px; text-align:center; } .apply-page .apply-section i {margin:0 0 30px; font-size:5rem; line-height:1; color:var(--point-color);} .apply-page .apply-section p.desc {font-size:1.25rem; line-height:1.6; font-weight:600; margin-top:30px;} .apply-page .apply-section p.sub-desc {font-size:1rem; line-height:1.6;} /* 제출 버튼 */ .apply-page .form-actions { margin-top: 22px; } .apply-page .form-actions .ui.button { width: 100%;} /* ---- 입점신청 완료 ---- */ .apply-result {padding:20px 16px 30px;} .apply-result .result-section {padding:50px 0 50px 0; text-align:center;} .apply-result .result-section i {margin:0 0 30px; font-size:5rem; line-height:1; color:var(--point-color);} .apply-result .result-section p.desc {font-size:1.25rem; line-height:1.6; font-weight:600; margin-top:30px;} .apply-result .result-section p.sub-desc {font-size:1rem; line-height:1.6;} .apply-result .result-section a.order-number {font-weight:bold; color:#000;} .apply-result .ui.custom-segment { position: relative; background: #fff; border:1px solid #e9e9e9; border-radius:12px; margin:1rem auto 2rem; padding: 1em 1em; } /* ---- 굿즈 시안 목록 ---- */ .design-card-list { display: flex; flex-direction: column; gap: 10px; } .design-card { padding: 14px; border: 1px solid #eee; border-radius: 10px; background: #fff; } .design-card .design-info { min-width: 0; } .design-card .design-name { margin: 0; font-size: 0.9375rem; font-weight: 700; color: #222; word-break: break-all; } /* 시안명 앞 고유번호 뱃지 — PC 목록·관리자 목록과 동일 개념, 연회색 톤 */ .design-card .design-name .design-no { display: inline-block; margin-right: 6px; padding: 1px 6px; font-size: 0.6875rem; font-weight: 600; color: #666; background: #f0f0f0; border-radius: 4px; vertical-align: 1px; } .design-card .design-goods { margin: 5px 0 0; font-size: 0.875rem; color: #666; } /* 상품명 링크(최근본상품처럼): 카드 텍스트색 유지 + 밑줄은 탭 시에만 → 링크 티는 안 나되 이동 가능 */ .design-card .design-goods a { color: inherit; text-decoration: none; } .design-card .design-goods a:active, .design-card .design-goods a:hover { text-decoration: underline; } .design-card .design-goods .code { margin-left: 4px; font-size: 0.75rem; color: #999; } .design-card .design-date { margin: 4px 0 0; font-size: 0.8125rem; color: #aaa; } .design-card .design-actions { display: flex; gap: 6px; margin-top: 12px; } .design-card .design-actions a { flex: 1; padding: 7px 0; text-align: center; border: 1px solid #ddd; border-radius: 5px; font-size: 0.8125rem; color: #555; background: #fff; } .design-card .design-actions .btn-goods-designer { border-color: var(--point-color); color: var(--point-color); font-weight: 600; } .design-card .design-actions .btn-goods-design-delete { border-color: #e5b4b4; color: #d0605e; } /* 배송 주소록 카드 리스트(마이페이지) — 굿즈 시안 카드와 동일 톤 */ .delivery-list { display: flex; flex-direction: column; gap: 10px; } .delivery-card { padding: 14px; border: 1px solid #eee; border-radius: 10px; background: #fff; } .delivery-card .card-header { margin-bottom: 10px; } .delivery-card .card-header .place-name { font-size: 0.9375rem; font-weight: 700; color: #222; word-break: break-all; } .delivery-card .card-body { display: flex; flex-direction: column; gap: 5px; } .delivery-card .info-row { display: flex; gap: 8px; font-size: 0.875rem; line-height: 1.4; } .delivery-card .info-row .label { flex-shrink: 0; width: 60px; color: #999; } .delivery-card .info-row .value { color: #444; word-break: break-all; } .delivery-card .info-row.address .value { color: #222; } .delivery-card .card-actions { display: flex; gap: 6px; margin-top: 12px; } /* 굿즈 시안 카드(.design-actions)와 동일 톤: 기본 회색 테두리, 수정=포인트색, 삭제=톤다운 레드 */ .delivery-card .card-actions .button { flex: 1; margin: 0; padding: 8px 0; border: 1px solid #ddd; border-radius: 5px; background: #fff; color: #555; font-size: 0.8125rem; font-weight: 600; box-shadow: none; } .delivery-card .card-actions .btn-address-edit { border-color: var(--point-color); color: var(--point-color); } .delivery-card .card-actions .btn-address-delete { border-color: #e5b4b4; color: #d0605e; } /* 최근 굿즈 시안 '수정' 버튼(마이페이지 latest 카드) */ #mypage-page .latest-line .btn-design-edit { flex-shrink: 0; display: inline-flex; align-items: center; gap: 3px; padding: 5px 11px; border: 1px solid #000; border-radius: 6px; background: #333; color:#fff; font-size: 0.75rem; font-weight: 600; line-height: 1; } #mypage-page .latest-line .btn-design-edit:active { background:#000; } #mypage-page .latest-line .sub .code { color: #bbb; } /* 초대장 카드 버튼 — 굿즈 시안(.design-actions)과 동일 톤: 편집=포인트색, 삭제=톤다운 레드 */ .design-card .design-actions .btn-invite-edit { border-color: var(--point-color); color: var(--point-color); font-weight: 600; } .design-card .design-actions .btn-invite-delete { border-color: #e5b4b4; color: #d0605e; } /* 캐시 내역(/user/cash) — 모바일 */ #cash-list-page .cash-payout-title { margin: 0 0 8px; font-size: 0.9375rem; font-weight: 700; color: #222; } #cash-list-page .cash-payout-form { margin: 16px 0 24px; padding: 16px 14px; background: #fafafa; border: 1px solid #eee; border-radius: 10px; } #cash-list-page .cash-payout-info { margin: 0 0 4px; font-size: 0.875rem; color: #333; } #cash-list-page .cash-payout-info .cash-payout-available { color: var(--point-color); } #cash-list-page .cash-payout-info .cash-payout-sep { margin: 0 5px; color: #ccc; } #cash-list-page .cash-payout-rule { margin: 0 0 14px; font-size: 0.75rem; color: #888; line-height: 1.5; } #cash-list-page .cash-payout-note { margin: 10px 0 0; font-size: 0.75rem; color: #888; line-height: 1.5; } #cash-list-page .btn-cash-payout-submit { margin-top: 6px; } #cash-list-page .cash-payout-history { margin-bottom: 24px; } #cash-list-page .payout-log-list { display: flex; flex-direction: column; border-top: 2px solid #111; } #cash-list-page .payout-log { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 4px; border-bottom: 1px solid #f2f2f2; } #cash-list-page .payout-log .log-info { min-width: 0; } #cash-list-page .payout-log .log-memo { margin: 0; font-size: 0.875rem; color: #333; word-break: break-all; } #cash-list-page .payout-log .log-date { margin: 4px 0 0; font-size: 0.75rem; color: #aaa; } #cash-list-page .payout-log .log-right { flex-shrink: 0; text-align: right; } #cash-list-page .payout-log .log-amount { font-size: 0.9375rem; font-weight: 600; color: #000; } #cash-list-page .payout-log .cash-payout-cancel-form { display: block; margin: 6px 0 0; } /* 적립금 내역 문구 속 주문번호 링크: 눌러서 주문상세로 간다 */ #point-list-page .memo-order-link { color: var(--point-color, #2464eb); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } #point-list-page .memo-order-link:hover { text-decoration: none; }