/* 갈래 M 마이페이지(/mypage/ 탭·/subscriptions/·/wishlist/·/downloads/·/account/). 마크업·data-*·name 불변, 모양만. 규칙은 #main 안만 */ /* 1. 플러그인 토큰 재연결 */ .fx-plugin--mypage :is(.fx-ui,.fluxshop,.fhs-wrap,.fhs-account,.fluxmember-mypage,.fluxmember,.fxm,.acct,.fhs-dash,.fhb-home,.fhb-sites-tab,.fhb-tickets,.fluxboard){ --fx-surface:#fff;--fx-canvas:var(--fx-paper-2);--fx-sunken:var(--fx-paper-2); --fx-line:var(--fx-edge-paper);--fx-line-strong:var(--fx-edge-paper-strong); --fx-ink:var(--fx-k1);--fx-ink-2:var(--fx-k2);--fx-ink-3:var(--fx-k3); --fx-radius:var(--fx-radius-m);--fx-radius-lg:var(--fx-radius-l);--fx-shadow-card:none; --fx-font:var(--fx-face); } /* 2. 면·틀 */ .fx-plugin--mypage{overflow-x:clip;background:var(--mp-canvas)} .fx-plugin--mypage .fx-plugin__head{padding:calc(76px + var(--fx-sp-6)) 0 var(--fx-sp-6);background:var(--fx-s1);color:var(--fx-t1)} .fx-plugin--mypage .fx-plugin__head-in,.fx-plugin--mypage .fx-plugin__wrap{max-width:var(--fx-wrap-w);margin:0 auto;padding:0 var(--fx-gut)} .fx-plugin--mypage .fx-plugin__title{margin:0;font-size:var(--fx-size-h3);font-weight:700;letter-spacing:-.025em;line-height:1.3;color:var(--fx-t1)} .fx-plugin--mypage .fx-plugin__body{padding:var(--fx-sp-8) 0 var(--fx-sp-24);background:var(--mp-canvas);color:var(--fx-k1);font-size:16px} #main .fs-plugin{display:block;padding:0;background:none;color:var(--fx-k1);font-family:var(--fx-face);font-size:16px} #main .fluxmember-mypage{display:grid;grid-template-columns:248px minmax(0,1fr);gap:var(--fx-sp-12);max-width:none;margin:0;padding:0;min-height:0} #main .fluxmember-mypage>*{min-width:0} /* 3. 사이드·메뉴 : 어두운 인사 띠 + 글자 메뉴 */ #main .fluxmember-mypage__nav{position:sticky;top:96px;align-self:start;padding:0;background:none;border:0} #main .fluxmember-mypage__user-card{display:block;margin:0 0 var(--fx-sp-6);padding:var(--fx-sp-6) var(--fx-sp-6) var(--fx-sp-3);border:0;border-radius:var(--fx-radius-l);background:var(--fx-s1);color:var(--fx-t1)} /* 프로필 요약 본체(.fx-pchip)는 css/fx/profile-chip.css — 여기는 사이드 맥락 덮기만 */ #main .fluxmember-mypage__user-card .fx-pchip__name{font-size:20px} #main .fluxmember-mypage__user-card .fx-pchip__sites{margin-top:var(--fx-sp-1)} #main .fluxmember-mypage__menu{display:block;margin:0;padding:0;list-style:none;border:0} #main .fluxmember-mypage__menu-title{margin:var(--fx-sp-6) 0 var(--fx-sp-1);padding:0 var(--fx-sp-3);font-size:var(--fx-size-min);font-weight:600;line-height:1.5;letter-spacing:.02em;color:var(--fx-k3)} #main .fluxmember-mypage__menu-title:first-child{margin-top:0} #main .fluxmember-mypage__menu-item{border:0} #main .fluxmember-mypage__menu-item a{display:flex;align-items:center;min-height:44px;padding:0 var(--fx-sp-3);border:0;border-radius:var(--fx-radius-s);background:none;font-size:15px;font-weight:500;letter-spacing:-.01em;color:var(--fx-k2);transition:background var(--fx-time-fast) var(--fx-ease-std),color var(--fx-time-fast) var(--fx-ease-std)} #main .fluxmember-mypage__menu-item a::before{display:none} #main .fluxmember-mypage__menu-item a:hover{padding-left:var(--fx-sp-3);background:var(--fx-paper-2);color:var(--fx-k1)} #main .fluxmember-mypage__menu-item.is-active a{background:var(--fx-brand);color:var(--fx-brand-ink);font-weight:700} #main .fluxmember-mypage__menu-item--logout{margin-top:var(--fx-sp-4);padding-top:var(--fx-sp-2);border-top:1px solid var(--fx-edge-paper)} #main .fluxmember-mypage__menu-item--logout a{font-size:var(--fx-size-small);color:var(--fx-k3)} #main .fluxmember-mypage__menu-item a:focus-visible{outline:2px solid var(--fx-k1);outline-offset:2px} /* 4. 본문 공통 */ #main .fluxmember-mypage__content{min-width:0;padding:0} #main .fhb-subnav{display:flex;flex-wrap:wrap;gap:var(--fx-sp-2);margin:0 0 var(--fx-sp-6);padding:0;border:0;overflow:visible} #main a.fhb-subnav__item{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--fx-sp-4);border:1px solid var(--fx-edge-paper-strong);border-radius:var(--fx-radius-pill);background:#fff;font-size:15px;font-weight:600;color:var(--fx-k2);text-decoration:none;transition:border-color var(--fx-time-fast) var(--fx-ease-std),background var(--fx-time-fast) var(--fx-ease-std)} #main a.fhb-subnav__item:hover{border-color:var(--fx-k1);color:var(--fx-k1)} #main a.fhb-subnav__item.is-on,#main a.fhb-subnav__item.is-on:hover{border-color:var(--fx-k1);background:var(--fx-k1);color:#fff} #main a.fhb-subnav__item:focus-visible{outline:2px solid var(--fx-k1);outline-offset:2px} #main .fhs-mypage-title{margin:0 0 var(--fx-sp-6);font-size:var(--fx-size-h3);font-weight:700;line-height:1.3;letter-spacing:-.025em;color:var(--fx-k1)} #main .fhb-home__title{margin:0 0 var(--fx-sp-3);font-size:20px;font-weight:700;line-height:1.3;letter-spacing:-.02em;color:var(--fx-k1)} #main .fhs-mypage-section{margin:0} /* 버튼 규격(2026-10-24 대표): 1024 이상 36px, 768~1023 44px, 360~767 40px(글자 14px·좌우 14~16px). 터치 영역 44px은 ::before 확장으로 확보. 칩·탭은 모바일 36px(--mp-chip-h). 주 1종(검정 면)·보조 1종(윤곽) */ #main{--mp-btn-h:36px;--mp-btn-fs:14px;--mp-btn-px:16px;--mp-field-h:40px;--mp-chip-h:44px} @media (max-width:1023px){#main{--mp-btn-h:44px;--mp-field-h:44px}} @media (max-width:767px){#main{--mp-btn-h:40px;--mp-btn-px:14px;--mp-chip-h:36px}} #main .fhs-mypage-section>.fhs-mypage-title{margin:0 0 var(--fx-sp-4);padding:0} /* 버튼: 44px 알약. 기본은 윤곽, 주 행동만 잉크 면 */ #main .fhs-od-btn,#main .fxu-btn,#main .fluxshop-btn,#main .flux-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:var(--mp-btn-h);padding:0 var(--mp-btn-px);border:1px solid var(--fx-edge-paper-strong);border-radius:var(--fx-radius-pill);background:#fff;font-size:var(--mp-btn-fs);font-weight:600;line-height:1.2;color:var(--fx-k1);text-decoration:none;cursor:pointer;transition:background var(--fx-time-fast) var(--fx-ease-std),border-color var(--fx-time-fast) var(--fx-ease-std),color var(--fx-time-fast) var(--fx-ease-std),transform .1s var(--fx-ease-std)} #main :is(.fhs-od-btn,.fxu-btn,.fluxshop-btn,.flux-btn):active{transform:scale(.97)} /* 터치 영역 44px: 보이는 높이가 44 미만이면 ::before 로 위아래를 넓힌다(클릭은 버튼으로 간다) */ @media (max-width:767px){#main :is(.fhs-od-btn,.fxu-btn,.fluxshop-btn,.flux-btn)::before{content:"";position:absolute;inset:-2px 0}} #main .fhs-od-btn:hover,#main .fxu-btn:hover,#main .fluxshop-btn:hover,#main .flux-btn:hover{border-color:var(--fx-k1);background:var(--fx-paper-2);color:var(--fx-k1)} #main .fhs-od-btn--primary,#main .fhs-od-btn--solid,#main .fxu-btn:not(.fxu-btn--ghost):not(.fxu-btn--danger),#main .fluxshop-btn--primary,#main .flux-btn--primary{border-color:var(--fx-k1);background:var(--fx-k1);color:#fff} #main .fhs-od-btn--primary:hover,#main .fhs-od-btn--solid:hover,#main .fxu-btn:not(.fxu-btn--ghost):not(.fxu-btn--danger):hover,#main .fluxshop-btn--primary:hover,#main .flux-btn--primary:hover{background:#000;border-color:#000;color:var(--fx-brand)} #main .fxu-btn--danger,#main .fluxshop-btn--danger{border-color:var(--fx-alert-paper);background:#fff;color:var(--fx-alert-paper)} #main .fxu-btn--danger:hover,#main .fluxshop-btn--danger:hover{background:var(--fx-alert-paper);border-color:var(--fx-alert-paper);color:#fff} #main :is(.fhs-od-btn,.fxu-btn,.fluxshop-btn,.flux-btn):focus-visible,#main a:focus-visible{outline:2px solid var(--fx-k1);outline-offset:2px} #main .fhs-od-btn:disabled,#main .fxu-btn:disabled{opacity:1;border-color:var(--fx-edge-paper);background:var(--fx-paper-2);color:var(--fx-k3);cursor:not-allowed} /* 상태 칩: 13px, 글자 항상 표시. 켜짐만 라임 */ #main .fhs-badge{display:inline-flex;align-items:center;min-height:28px;padding:0 var(--fx-sp-3);border:1px solid var(--fx-edge-paper-strong);border-radius:var(--fx-radius-pill);background:#fff;font-size:var(--fx-size-min);font-weight:600;line-height:1.2;color:var(--fx-k2);white-space:nowrap} #main :is(.fhs-badge--paid,.fhs-badge--active,.fhs-badge--processing,.fhs-badge--shipped,.fhs-badge--delivered,.fhs-badge--approved,.fhs-badge--requested){border-color:var(--fx-brand);background:var(--fx-brand);color:var(--fx-brand-ink)} #main :is(.fhs-badge--cancelled,.fhs-badge--refunded,.fhs-badge--partial_refunded,.fhs-badge--completed,.fhs-badge--done,.fhs-badge--rejected,.fhs-badge--expired,.fhs-badge--paused){border-color:var(--fx-edge-paper);background:var(--fx-paper-2);color:var(--fx-k2)} #main :is(.fhs-badge--failed,.fhs-badge--payment_failed,.fhs-badge--error){border-color:var(--fx-alert-paper);background:#fff;color:var(--fx-alert-paper)} #main .fhs-badge--pending_payment{border-color:var(--fx-k1);background:#fff;color:var(--fx-k1)} /* 5. 주문·주문 상세 — 12절(페이지별 정리)에서 그린다. 여기는 공통 상태 칩 연결만 */ #main .fhs-oc .fhs-claim-btn{border-color:var(--fx-edge-paper-strong);background:#fff;color:var(--fx-k1)} #main .fhs-oc .fhs-claim-btn:hover{border-color:var(--fx-k1);background:var(--fx-paper-2);color:var(--fx-k1)} #main :is(.fhs-od__card,.fhs-cl__item){padding:var(--fx-sp-6);border:1px solid var(--fx-edge-paper);border-radius:var(--fx-radius-l);background:#fff;box-shadow:none} /* 6. 구독(2026-10-24 개편): 구독마다 흰 시트 1장 — 머리(상품·금액·상태) → 이용 기간 막대(D-n, 시작~종료 축, 오늘 표시) → 사실 3칸(만료일·결제 수단·자동연장) → 버튼 줄. 그림자 없음, 호버는 테두리 한 단 진하게 + 1px 올림 */ #main .fluxshop-my-subscription{display:flex;flex-direction:column;gap:var(--fx-sp-4)} #main .fhs-sub-card.fxu-card{margin:0;padding:0;overflow:hidden;border:1px solid var(--mp-sheet-edge);border-radius:var(--fx-radius-l);background:var(--mp-sheet);box-shadow:none;transition:border-color var(--fx-time-fast) var(--fx-ease-std),transform var(--fx-time-fast) var(--fx-ease-std)} #main .fhs-sub-card--active.fxu-card:hover{border-color:var(--fx-k3);transform:translateY(-1px)} #main .fhs-sub-card--ended.fxu-card{border-color:var(--fx-edge-paper);background:var(--mp-inset)} #main .fhs-sub-card__header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--fx-sp-3);min-height:0;margin:0;padding:20px var(--fx-sp-6) 0;border:0} #main .fhs-sub-card__title{min-width:0} #main .fhs-sub-card__header h3{margin:0;font-size:20px;font-weight:700;line-height:1.3;letter-spacing:-.02em;color:var(--fx-k1);word-break:keep-all} #main .fhs-sub-card__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--fx-sp-2);margin:var(--fx-sp-1) 0 0;font-size:var(--fx-size-small);color:var(--fx-k3);font-variant-numeric:tabular-nums} #main .fhs-sub-card__price strong{font-size:18px;font-weight:700;color:var(--fx-k1)} #main .fhs-sub-card .fhs-sub-term{display:inline;margin:0;padding:0;border:0;border-radius:0;background:none;font-size:var(--fx-size-small);font-weight:400;color:var(--fx-k3)} /* 「사이트」 한 줄(.fhb-siteline) — 주문 상세에서도 쓴다(기본 규칙). 구독 카드 안에서는 머리 바로 아래 작은 글씨 */ #main .fhb-siteline{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--fx-sp-1) var(--fx-sp-4);margin:0;padding:var(--fx-sp-3) var(--fx-sp-6);border-bottom:1px solid var(--fx-edge-paper);font-size:var(--fx-size-small);line-height:1.5;color:var(--fx-k2);word-break:keep-all} #main .fhb-siteline__label{flex:0 0 auto;font-weight:500;color:var(--fx-k2)} #main .fhb-siteline__name{font-weight:600;color:var(--fx-k1)} #main .fhb-siteline__addr{min-width:0;color:var(--fx-k3);overflow-wrap:anywhere} #main .fhs-sub-card .fhb-siteline{gap:0 var(--fx-sp-2);margin:6px 0 0;padding:0 var(--fx-sp-6);border:0} #main .fhs-sub-card .fhb-siteline__label{font-weight:500;color:var(--fx-k3)} #main .fhs-sub-card__body{display:grid;gap:var(--fx-sp-4);margin:0;padding:var(--fx-sp-4) var(--fx-sp-6) 20px} /* 이용 기간 막대 — 8px 막대 + 시작·종료 축 + 오늘 표시 */ #main .fhs-sub-meter__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--fx-sp-3);margin:0 0 10px;font-size:var(--fx-size-small);color:var(--fx-k3)} #main .fhs-sub-meter__dwrap{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--fx-sp-2);min-width:0} #main .fhs-sub-meter__dwrap small{font-size:var(--fx-size-small);font-weight:500;color:var(--fx-k3)} #main .fhs-sub-meter__note{flex:0 0 auto;font-size:var(--fx-size-min);color:var(--fx-k3)} #main .fhs-sub-meter__d{font-size:var(--fx-size-small);font-weight:600;line-height:1.4;color:var(--fx-k1);font-variant-numeric:tabular-nums} #main .fhs-sub-meter__d.is-warn{color:var(--v2-warn,#9a5b00)} #main .fhs-sub-meter__d.is-danger{color:var(--fx-alert-paper)} #main .fhs-sub-meter__d.is-ended{color:var(--fx-k2)} #main .fhs-sub-meter__bar{position:relative;height:8px;border-radius:4px;background:var(--fx-edge-paper)} #main .fhs-sub-meter__fill{display:block;height:100%;border-radius:4px;background:var(--fx-k1);transform-origin:left} #main .fhs-sub-meter__fill.is-warn{background:var(--v2-warn,#9a5b00)} #main .fhs-sub-meter__fill.is-danger{background:var(--fx-alert-paper)} #main .fhs-sub-meter__fill.is-ended{background:var(--fx-edge-paper-strong)} #main .fhs-sub-meter__now{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;border-radius:1px;background:var(--fx-k1)} #main .fhs-sub-meter__foot{display:flex;justify-content:space-between;gap:var(--fx-sp-3);margin:var(--fx-sp-2) 0 0;font-size:var(--fx-size-min);color:var(--fx-k3);font-variant-numeric:tabular-nums} /* 사실 3칸: 칸 사이 세로선, 칸 수가 달라도 같은 폭 */ #main .fhs-sub-facts{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin:0;border:1px solid var(--mp-line);border-radius:var(--fx-radius-m);overflow:hidden} #main .fhs-sub-fact{display:flex;flex-direction:column;gap:2px;min-width:0;margin:0;padding:var(--fx-sp-3) var(--fx-sp-4);border-left:1px solid var(--mp-line);background:none} #main .fhs-sub-fact:first-child{border-left:0} #main .fhs-sub-fact dt{margin:0;font-size:var(--fx-size-min);font-weight:500;color:var(--fx-k3)} #main .fhs-sub-fact dd{margin:0;font-size:15px;font-weight:600;line-height:1.5;color:var(--fx-k1);font-variant-numeric:tabular-nums;overflow-wrap:anywhere} #main .fhs-sub-fact dd.fhs-sub-fact__cap{font-size:var(--fx-size-min);font-weight:400;color:var(--fx-k2)} #main .fhs-sub-autorenew--on dd:nth-of-type(1)::before{content:"";display:inline-block;width:8px;height:8px;margin-right:var(--fx-sp-2);border-radius:50%;background:var(--fx-brand);box-shadow:0 0 0 1.5px var(--fx-k1)} /* 버튼 줄: 주 「연장하기」 1개 + 보조 + 텍스트 링크 */ #main .fhs-sub-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--fx-sp-2);padding:0} #main .fhs-sub-textbtn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin-left:auto;padding:0 var(--fx-sp-2);border:0;background:none;font:inherit;font-size:var(--fx-size-min);color:var(--fx-k3);text-decoration:underline;text-underline-offset:3px;cursor:pointer;transition:color var(--fx-time-fast) var(--fx-ease-std)} #main .fhs-sub-textbtn:hover{color:var(--fx-k1)} #main .fhs-sub-textbtn:focus-visible{outline:2px solid var(--fx-k1);outline-offset:2px} /* 지난 구독: 접힘(안쪽 면) */ #main .fhs-sub-past{margin:0} #main summary.fhs-sub-past__sum{display:flex;align-items:center;justify-content:space-between;gap:var(--fx-sp-3);min-height:52px;padding:0 20px;border:1px solid var(--mp-sheet-edge);border-radius:var(--fx-radius-l);background:var(--mp-inset);list-style:none;font-size:14px;font-weight:600;color:var(--fx-k2);cursor:pointer;transition:color var(--fx-time-fast) var(--fx-ease-std),border-color var(--fx-time-fast) var(--fx-ease-std)} #main summary.fhs-sub-past__sum::-webkit-details-marker{display:none} #main summary.fhs-sub-past__sum::after{content:"";width:7px;height:7px;margin-top:-3px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform var(--fx-time-fast) var(--fx-ease-std)} #main .fhs-sub-past[open]>summary.fhs-sub-past__sum::after{margin-top:3px;transform:rotate(-135deg)} #main summary.fhs-sub-past__sum:hover{border-color:var(--fx-k3);color:var(--fx-k1)} #main summary.fhs-sub-past__sum:focus-visible{outline:2px solid var(--fx-k1);outline-offset:2px} #main .fhs-sub-past__list{display:flex;flex-direction:column;gap:var(--fx-sp-3);margin:var(--fx-sp-3) 0 0} #main .fhs-sub-past[open] .fhs-sub-past__list{animation:mp-fold .22s var(--fx-ease-out)} @keyframes mp-fold{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} /* 막대 채움: 화면에 들어올 때 한 번(처음 값부터 정확한 값 — 숫자 카운트업은 쓰지 않는다). 행마다 60ms 간격 */ @keyframes mp-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}} @media (prefers-reduced-motion:no-preference){#main .fhs-sub-meter__fill{animation:mp-fill 1.2s var(--fx-ease-out) both}} /* 구독 해지: 맨 아래 회색 작은 글자 링크(확인 단계는 fluxshop.js 의 해지 사유 창) */ #main .fhx-sub-cancel{margin:var(--fx-sp-6) 0 0;text-align:center} #main .fhx-sub-cancel__link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 var(--fx-sp-2);border:0;background:none;font:inherit;font-size:var(--fx-size-min);color:var(--fx-k3);text-decoration:underline;text-underline-offset:3px;cursor:pointer} #main .fhx-sub-cancel__link:hover{color:var(--fx-k1)} #main .fhx-sub-cancel__link:focus-visible{outline:2px solid var(--fx-k1);outline-offset:2px} /* 탭 「구독 N · 결제 내역 N」(시안 .tabs): 글자 탭 + 밑줄이 미끄러짐. 서버가 두 패널을 모두 그리고 인라인 스크립트가 전환한다(스크립트 없으면 둘 다 보임). 그림자 없음 */ #main .fhs-sub-tabs{display:flex;flex-direction:column;gap:var(--fx-sp-6)} #main .fhs-sub-tabs__list{position:relative;display:flex;gap:28px;border-bottom:1px solid var(--fx-edge-paper-strong);overflow-x:auto;scrollbar-width:none} #main .fhs-sub-tabs__list::-webkit-scrollbar{display:none} #main .fhs-sub-tab{position:relative;display:inline-flex;align-items:center;gap:var(--fx-sp-1);min-height:48px;padding:0 2px;border:0;background:none;font:inherit;font-size:16px;font-weight:600;color:var(--fx-k2);white-space:nowrap;cursor:pointer;transition:color var(--fx-time-fast) var(--fx-ease-std)} #main .fhs-sub-tab:hover,#main .fhs-sub-tab[aria-selected=true]{color:var(--fx-k1)} #main .fhs-sub-tab__n{font-weight:500;color:var(--fx-k3);font-variant-numeric:tabular-nums} #main .fhs-sub-tab:focus-visible{outline:2px solid var(--fx-k1);outline-offset:2px} #main .fhs-sub-tabs__ink{position:absolute;left:0;bottom:0;width:100px;height:3px;background:var(--fx-k1);transform-origin:left;transition:transform .25s var(--fx-ease-std)} #main .fhs-sub-panel{display:flex;flex-direction:column;gap:var(--fx-sp-4)} #main .fhs-sub-panel[hidden]{display:none} #main .fhs-sub-panel.is-enter{animation:mp-tabfade .25s var(--fx-ease-std)} @keyframes mp-tabfade{from{opacity:0}to{opacity:1}} @media (prefers-reduced-motion:reduce){#main .fhs-sub-tabs__ink{transition:none}#main .fhs-sub-panel.is-enter{animation:none}} /* 결제 내역 행(시안 .orow) — 흰 시트 1장 안의 행, 호버는 안쪽 면 + 「›」 2px */ #main .fhx-pay__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--fx-sp-3);margin:0 0 var(--fx-sp-3)} #main .fhx-pay__t{margin:0;font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.3;color:var(--fx-k1)} #main .fhx-pay__all,#main .fhx-pay__more a{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;font:inherit;font-size:var(--fx-size-small);color:var(--fx-k2);text-decoration:underline;text-underline-offset:3px;cursor:pointer} #main .fhx-pay__all:hover,#main .fhx-pay__more a:hover{color:var(--fx-k1)} #main .fhx-pay__all:focus-visible{outline:2px solid var(--fx-k1);outline-offset:2px} #main .fhx-pay__more{margin:var(--fx-sp-2) 0 0;text-align:center} #main .fhx-pay__list{margin:0;padding:0;list-style:none;overflow:hidden;border:1px solid var(--mp-sheet-edge);border-radius:var(--fx-radius-l);background:var(--mp-sheet)} #main .fhx-pay__list>li+li{border-top:1px solid var(--mp-line)} #main .fhx-pay-row{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:var(--fx-sp-3);min-height:56px;padding:var(--fx-sp-3) 20px;color:var(--fx-k1);text-decoration:none;transition:background var(--fx-time-fast) var(--fx-ease-std)} #main .fhx-pay-row:hover{background:var(--mp-inset)} #main .fhx-pay-row:focus-visible{outline:2px solid var(--fx-k1);outline-offset:-2px} #main .fhx-pay-row__date{font-size:var(--fx-size-small);color:var(--fx-k3);font-variant-numeric:tabular-nums} #main .fhx-pay-row__name{display:flex;flex-direction:column;min-width:0;font-size:15px;font-weight:600;line-height:1.4;word-break:keep-all} #main .fhx-pay-row__st{font-size:var(--fx-size-min);font-weight:400;color:var(--fx-k3)} #main .fhx-pay-row__st.is-bad{color:var(--fx-alert-paper)} #main .fhx-pay-row__name,#main .fhx-pay-row__st{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #main .fhx-pay-row__amt{display:inline-flex;align-items:center;gap:var(--fx-sp-1);font-variant-numeric:tabular-nums} #main .fhx-pay-row__val{font-size:15px;font-weight:700} #main .fhx-pay-row.is-gone .fhx-pay-row__val{font-weight:400;color:var(--fx-k3);text-decoration:line-through} #main .fhx-pay-row__go{display:inline-block;color:var(--fx-k3);transition:transform var(--fx-time-fast) var(--fx-ease-std)} #main .fhx-pay-row:hover .fhx-pay-row__go{transform:translateX(4px)} #main .fhx-pay__empty{display:flex;flex-direction:column;align-items:flex-start;gap:var(--fx-sp-3);padding:20px;border:1px solid var(--mp-sheet-edge);border-radius:var(--fx-radius-l);background:var(--mp-sheet)} #main .fhx-pay__empty p{margin:0;font-size:15px;color:var(--fx-k2)} @media (max-width:767px){ #main .fhs-sub-tabs__list{gap:20px} #main .fhs-sub-tab{min-height:var(--mp-chip-h);font-size:14px} #main .fhs-sub-tab::after{content:"";position:absolute;inset:-4px -4px} #main .fhx-pay-row{grid-template-columns:44px minmax(0,1fr) auto;padding:var(--fx-sp-3) 16px} } /* 빈 상태: .fx-empty 와 같은 모양 */ #main :is(.fhb-wish-empty,.fhb-sites__empty,.fhb-tickets__empty,.fhb-home__empty,.fxu-empty,.fluxshop-empty,.fxm-empty,.fx-empty){display:grid;align-content:start;justify-items:start;gap:var(--fx-sp-3);margin:0;padding:var(--fx-sp-8);border:1px dashed var(--fx-edge-paper-strong);border-radius:var(--fx-radius-l);background:var(--fx-tint);text-align:left} #main p.fhs-empty,#main p.fhs-empty__cta{margin:0;border:1px dashed var(--fx-edge-paper-strong);background:var(--fx-tint)} #main p.fhs-empty{padding:var(--fx-sp-8) var(--fx-sp-8) var(--fx-sp-2);border-bottom:0;border-radius:var(--fx-radius-l) var(--fx-radius-l) 0 0;font-size:var(--fx-size-h3);font-weight:700;line-height:1.3;color:var(--fx-k1);text-align:left!important} #main p.fhs-empty__cta{padding:0 var(--fx-sp-8) var(--fx-sp-8);border-top:0;border-radius:0 0 var(--fx-radius-l) var(--fx-radius-l);text-align:center} #main a.fhs-btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--mp-btn-h);padding:0 var(--mp-btn-px);border:1px solid var(--fx-k1);border-radius:var(--fx-radius-pill);background:var(--fx-k1);font-size:var(--mp-btn-fs);font-weight:600;color:#fff;text-decoration:none} #main a.fhs-btn:hover{background:#000;color:var(--fx-brand)} #main :is(.fhb-wish-empty__t,.fhb-tickets__empty-t,.fhb-sites__empty h3,.fxu-empty h3,.fluxshop-empty h3,.fxm-empty__title,.fx-empty__t){margin:0;font-size:var(--fx-size-h3);font-weight:700;line-height:1.3;letter-spacing:-.025em;color:var(--fx-k1)} #main :is(.fhb-wish-empty__d,.fhb-tickets__empty-d,.fhb-sites__empty p,.fxu-empty p,.fluxshop-empty p,.fxm-empty__desc,.fx-empty__d){max-width:520px;margin:0;font-size:16px;line-height:1.7;color:var(--fx-k2)} #main :is(.fhb-sites__empty-icon,.fxu-empty .fxu-ico){display:none} #main :is(a.fhb-wish-empty__cta,.fhb-tickets__empty a,.fxm-empty .fxm-btn,.fhb-sites__empty .flux-btn,.fxu-empty .fxu-btn){display:inline-flex;align-items:center;justify-content:center;min-height:var(--mp-btn-h);margin-top:var(--fx-sp-2);padding:0 var(--mp-btn-px);border:1px solid var(--fx-k1);border-radius:var(--fx-radius-pill);background:var(--fx-k1);font-size:var(--mp-btn-fs);font-weight:600;color:#fff;text-decoration:none} #main :is(a.fhb-wish-empty__cta,.fhb-tickets__empty a,.fxm-empty .fxm-btn,.fhb-sites__empty .flux-btn,.fxu-empty .fxu-btn):hover{border-color:#000;background:#000;color:var(--fx-brand)} /* 7. 대시보드·내 사이트 — 구획 머리: 제목 20 + 수 + 오른쪽 링크(검정 밑줄 없음). 배치·시트·할 일 판은 plugin mypage-home.css */ #main .fhb-home__title-row{display:flex;align-items:center;justify-content:space-between;gap:var(--fx-sp-4);min-height:36px;margin:0 0 var(--fx-sp-3);padding:0;border:0} #main .fhb-home__title-row .fhb-home__title{margin:0} #main .fhb-home__count{margin-left:var(--fx-sp-2);font-size:16px;font-weight:600;color:var(--fx-k2);font-variant-numeric:tabular-nums} #main .fhb-home__section--status :is(.fhb-status__top,.fhb-home__title-row)>.fhb-home__title,#main .fhb-home__section--status>.fhb-home__title{margin:0;padding:0;border:0;color:var(--fx-t1)} #main .fhb-home__section--minor>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:var(--fx-sp-4);margin:0 0 var(--fx-sp-3);padding:0;border:0} #main .fhb-home__section--minor .fhb-home__title{margin:0} #main .fhb-home__more-link{display:inline-flex;align-items:center;min-height:44px;font-size:var(--fx-size-small);font-weight:600;color:var(--fx-k2);text-decoration:underline;text-decoration-color:var(--fx-edge-paper-strong);text-underline-offset:4px;transition:color var(--fx-time-fast) var(--fx-ease-std),text-decoration-color var(--fx-time-fast) var(--fx-ease-std)} #main .fhb-home__more-link:hover{color:var(--fx-k1);text-decoration-color:var(--fx-k1)} /* 「확인할 일」 판은 어두운 면 — 글자는 어두운 면 3단 */ #main .fhb-todo__none{margin:0;padding:var(--fx-sp-2) 0 0;border:0;font-size:16px;line-height:1.6;color:var(--fx-t2)} #main .fhb-hero__benefits{margin:20px 0 0;padding:0;border-top:1px solid var(--fx-edge-ink);font-size:var(--fx-size-small);color:var(--fx-t2)} #main .fhb-hero__benefit{display:flex;flex-wrap:wrap;align-items:center;gap:0 24px;min-height:48px;padding:var(--fx-sp-2) 0;font-size:14px;font-weight:400;color:var(--fx-t2);font-variant-numeric:tabular-nums;text-decoration:none} #main .fhb-hero__benefit b{margin-left:6px;font-weight:600;color:var(--fx-t1)} #main a.fhb-hero__benefit:hover b{text-decoration:underline;text-decoration-color:var(--fx-brand);text-underline-offset:4px} #main .fhb-hero__benefit:focus-visible{outline:2px solid var(--fx-brand);outline-offset:2px} /* 최근 주문 행(시안 2026-10-31): 날짜 | 이름 | 상태 | 금액 한 줄. 좁은 화면(≤599)은 이름·금액 / 날짜·상태 두 줄 */ #main a.fhb-recent-orders__row{display:grid;grid-template-columns:96px minmax(0,1fr) 88px 110px;grid-template-areas:"date name status total";align-items:center;gap:var(--fx-sp-4);min-height:48px;padding:14px 24px;border:0;border-top:1px solid var(--mp-line);color:var(--fx-k1);text-decoration:none;font-variant-numeric:tabular-nums;transition:background var(--fx-time-fast) var(--fx-ease-std)} #main .fhb-recent-orders>a.fhb-recent-orders__row:first-child{border-top:0} #main a.fhb-recent-orders__row:hover{background:var(--mp-inset)} #main .fhb-recent-orders__date{grid-area:date;font-size:var(--fx-size-min);color:var(--fx-k3)} #main .fhb-recent-orders__name{grid-area:name;min-width:0;font-size:15px;font-weight:600;text-decoration:none;overflow-wrap:anywhere} #main .fhb-recent-orders__status{grid-area:status;font-size:var(--fx-size-min);color:var(--fx-k3)} #main .fhb-recent-orders__total{grid-area:total;font-size:15px;font-weight:700;text-align:right;white-space:nowrap} @media (max-width:599px){#main a.fhb-recent-orders__row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name total" "date status";gap:2px var(--fx-sp-4);padding:12px 20px}#main .fhb-recent-orders__status{text-align:right}} /* 대시보드의 「내 사이트」 빈 상태는 시작 지점이라 어둡게(첫 사이트 만들기 판): 지금 할 일이 보이게 */ #main .fhb-home__empty{padding:var(--fx-sp-8);border:0;border-radius:var(--fx-radius-l);background:var(--mp-ink);color:var(--fx-t1)} #main .fhb-home__empty p{margin:0;font-size:var(--fx-size-lead);font-weight:600;line-height:1.5;color:var(--fx-t1)} #main .fhb-home__empty .flux-btn{border-color:var(--fx-brand);background:var(--fx-brand);color:var(--fx-brand-ink)} #main .fhb-home__empty .flux-btn:hover{border-color:#fff;background:var(--fx-brand);color:var(--fx-brand-ink)} #main .fhb-sites__header{display:flex;align-items:center;justify-content:space-between;gap:var(--fx-sp-4);min-height:36px;margin:0 0 var(--fx-sp-3);padding:0;border:0} #main .fhb-sites__header h3{margin:0;font-size:var(--fx-size-h3);font-weight:700;line-height:1.3;letter-spacing:-.025em} #main .fhb-sites__count{margin-left:var(--fx-sp-2);font-size:16px;font-weight:600;color:var(--fx-k2);font-variant-numeric:tabular-nums} #main .fhb-sites-tab{display:block;width:100%;max-width:none;min-width:0;margin:0;padding:0} #main :is(.fhb-sites__grid,.fhb-sites__guide,.fhb-account-security){max-width:none;min-width:0;margin-left:0;margin-right:0} #main .fluxmember-mypage__content .fxi{max-width:none;margin:0} /* 8. 찜·다운로드·쿠폰·적립금·내 활동 */ #main :is(.fhs-cp__chip,.fhs-pts__tab,.fxu-chip){display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 var(--fx-sp-4);font-size:15px} #main :is(.fhs-cp__chip,.fhs-pts__tab,.fxu-chip):not(.is-active){border-color:var(--fx-edge-paper-strong);background:#fff;color:var(--fx-k1)} #main :is(.fhs-cp__chip.is-active,.fhs-pts__tab.is-active,.fxu-chip.is-active){border-color:var(--fx-k1);background:var(--fx-k1);color:#fff} #main .fhs-pts__info{min-width:44px;min-height:44px} #main :is(.fhs-od-btn--sm,.fxu-btn--sm,.fluxshop-btn--sm,.fxu-btn.fhs-od-btn,.fhs-cp .fxu-btn.fhs-od-btn){min-height:var(--mp-btn-h);padding:0 var(--mp-btn-px);font-size:var(--mp-btn-fs)} #main :is(select,.fhs-cp__sort select){min-height:44px} #main .fluxboard-my-posts__btn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px} #main .fluxboard-my-posts a:not(.fluxboard-my-posts__btn){display:inline-flex;align-items:center;min-height:44px} /* 쿠폰: 실물 쿠폰 카드 — 좌측 금액 칸 | 점선 절취선(좌우 반원 홈) | 우측 이름·조건·유효기간. 3열 / 768 이하 2열 / 360 이하 1열 */ #main .fhs-cp__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--fx-sp-4);margin:0;padding:0;list-style:none} #main .fhs-cp__list--past{margin-top:var(--fx-sp-2)} #main .fhs-cp__card.fxu-card{--cp-stub:80px;position:relative;display:grid;grid-template-columns:var(--cp-stub) minmax(0,1fr);margin:0;padding:0;overflow:hidden;border:1px solid var(--fx-edge-paper-strong);border-radius:var(--fx-radius-m);background:#fff;box-shadow:none;opacity:1} #main .fhs-cp__card[hidden]{display:none} #main .fhs-cp__card::before,#main .fhs-cp__card::after{content:'';position:absolute;left:calc(var(--cp-stub) - 8px);width:16px;height:16px;box-sizing:border-box;border:1px solid var(--fx-edge-paper-strong);border-radius:50%;background:var(--mp-canvas)} #main .fhs-cp__card::before{top:-8px} #main .fhs-cp__card::after{bottom:-8px} #main .fhs-cp__head{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:center;justify-content:center;gap:var(--fx-sp-1);margin:0;padding:var(--fx-sp-3) var(--fx-sp-1);border:0;border-right:1px dashed var(--fx-edge-paper-strong);text-align:center} #main .fhs-cp__amount{font-size:18px;font-weight:700;line-height:1.2;letter-spacing:-.02em;color:var(--fx-k1);font-variant-numeric:tabular-nums;overflow-wrap:anywhere} #main .fhs-cp__state{font-size:var(--fx-size-min);font-weight:600;line-height:1.4;color:var(--fx-k2)} #main .fhs-cp__body{display:flex;flex-direction:column;align-items:flex-start;gap:var(--fx-sp-1);min-width:0;padding:var(--fx-sp-3)} #main .fhs-cp__name{margin:0;font-size:16px;font-weight:600;line-height:1.4;color:var(--fx-k1);overflow-wrap:anywhere} #main .fhs-cp__stack{font-size:var(--fx-size-min);font-style:normal;font-weight:600;color:var(--fx-k2)} #main .fhs-cp__cond{margin:0;font-size:var(--fx-size-small);line-height:1.5;color:var(--fx-k2)} #main .fhs-cp__tags{display:flex;flex-wrap:wrap;gap:var(--fx-sp-1)} #main .fhs-cp__tag{padding:0 var(--fx-sp-2);border:1px solid var(--fx-edge-paper-strong);border-radius:var(--fx-radius-pill);background:none;font-size:var(--fx-size-min);font-weight:500;line-height:20px;color:var(--fx-k2)} #main .fhs-cp__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--fx-sp-1) var(--fx-sp-3);width:100%;margin:auto 0 0} #main .fhs-cp__when{margin:0;font-size:var(--fx-size-small);color:var(--fx-k2);font-variant-numeric:tabular-nums} #main .fhs-cp__when.is-soon{font-weight:700;color:var(--fx-k1)} #main .fhs-cp__scope{display:inline-flex;align-items:center;min-height:44px;margin:-10px 0;font-size:var(--fx-size-small);color:var(--fx-k1);text-decoration:underline;text-underline-offset:3px} #main .fhs-cp__scope.is-all{color:var(--fx-k2);text-decoration:none} #main .fhs-cp__body .fhs-cp-claim{margin-top:var(--fx-sp-2)} #main .fhs-cp__card.is-used,#main .fhs-cp__card.is-expired{background:var(--fx-paper-2)} #main :is(.fhs-cp__card.is-used,.fhs-cp__card.is-expired) .fhs-cp__amount{color:var(--fx-k2);text-decoration:line-through} #main :is(.fhs-cp__card.is-used,.fhs-cp__card.is-expired) .fhs-cp__state{color:var(--fx-k2)} #main .fhs-cp__scope:focus-visible{outline:2px solid var(--fx-k1);outline-offset:2px} /* /account/ 세로 탭 */ #main .fhs-account__nav{padding:0;border:0;border-radius:0;background:none;box-shadow:none} #main a.fhs-account__tab{display:flex;align-items:center;min-height:44px;padding:0 var(--fx-sp-3);border:0;border-radius:var(--fx-radius-s);font-size:15px;font-weight:500;color:var(--fx-k2);text-decoration:none} #main a.fhs-account__tab:hover{background:var(--fx-paper-2);color:var(--fx-k1)} #main a.fhs-account__tab.is-active{background:var(--fx-brand);color:var(--fx-brand-ink);font-weight:700} /* 9. 계정·폼 */ #main .fluxmember-mypage__title{margin:0 0 var(--fx-sp-6);font-size:var(--fx-size-h3);font-weight:700;line-height:1.3;letter-spacing:-.025em;color:var(--fx-k1)} #main .fluxmember-subtabs{display:flex;flex-wrap:wrap;gap:var(--fx-sp-6);height:auto;margin:0 0 var(--fx-sp-6);padding:0;overflow:visible;border:0;border-bottom:1px solid var(--fx-edge-paper)} #main .fluxmember-subtab{display:inline-flex;align-items:center;min-height:48px;margin-bottom:-1px;padding:0 var(--fx-sp-1);border:0;border-bottom:3px solid transparent;border-radius:0;background:none;font-size:16px;font-weight:600;color:var(--fx-k3);cursor:pointer} #main .fluxmember-subtab:hover{color:var(--fx-k1)} #main .fluxmember-subtab.is-active{border-bottom-color:var(--fx-k1);background:none;color:var(--fx-k1)} #main .fluxmember-form__group{margin:0 0 var(--fx-sp-4)} #main .fluxmember-form__label{display:block;margin:0 0 var(--fx-sp-2);font-size:var(--fx-size-small);font-weight:600;color:var(--fx-k1)} #main :is(.fluxmember-form__input,.fluxmember-form__select,select.fluxmember-form__input){width:100%;min-height:52px;padding:0 var(--fx-sp-4);border:1px solid var(--fx-edge-paper-strong);border-radius:var(--fx-radius-m);background:#fff;font-size:16px;color:var(--fx-k1);box-shadow:none} #main .fluxmember-form__input--short{width:auto;max-width:160px} #main .fluxmember-form__textarea{width:100%;min-height:120px;padding:var(--fx-sp-3) var(--fx-sp-4);border:1px solid var(--fx-edge-paper-strong);border-radius:var(--fx-radius-m);background:#fff;font-size:16px;color:var(--fx-k1)} #main :is(.fluxmember-form__input,.fluxmember-form__textarea,.fluxmember-form__select):focus{border-color:var(--fx-k1);outline:2px solid var(--fx-k1);outline-offset:1px;box-shadow:none} #main :is(.fluxmember-form__input,.fluxmember-form__textarea)::placeholder{color:var(--fx-k3)} #main .fluxmember-form__checkbox{display:flex;align-items:center;gap:var(--fx-sp-3);min-height:44px;font-size:16px;color:var(--fx-k1);cursor:pointer} #main .fluxmember-form__checkbox input{flex:0 0 20px;width:20px;height:20px;accent-color:var(--fx-k1)} #main .fluxmember-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 var(--fx-sp-6);border:1px solid var(--fx-edge-paper-strong);border-radius:var(--fx-radius-pill);background:#fff;font-size:16px;font-weight:600;color:var(--fx-k1);cursor:pointer;text-decoration:none} #main .fluxmember-btn:hover{border-color:var(--fx-k1);background:var(--fx-paper-2)} #main .fluxmember-btn--primary{border-color:var(--fx-k1);background:var(--fx-k1);color:#fff} #main .fluxmember-btn--primary:hover{border-color:#000;background:#000;color:var(--fx-brand)} #main .fluxmember-btn--danger{border-color:var(--fx-alert-paper);background:#fff;color:var(--fx-alert-paper)} #main .fluxmember-btn--danger:hover{border-color:var(--fx-alert-paper);background:var(--fx-alert-paper);color:#fff} #main .fluxmember-address-manual{min-height:44px;padding:0 var(--fx-sp-3);font-size:var(--fx-size-small)} #main .fluxmember-notice{margin:0 0 var(--fx-sp-6);padding:var(--fx-sp-4) var(--fx-sp-6);border:0;border-left:4px solid var(--fx-k1);border-radius:var(--fx-radius-s);background:var(--fx-paper-2);color:var(--fx-k1)} #main .fluxmember-notice--warning{border-left-color:var(--fx-alert-paper)} #main .fluxmember-notice strong{font-weight:700} #main .fluxmember-notice ul{margin:var(--fx-sp-2) 0 0;padding-left:var(--fx-sp-4);list-style:disc;font-size:var(--fx-size-small);line-height:1.7;color:var(--fx-k2)} #main .fluxmember-form__message{margin-top:var(--fx-sp-3);font-size:var(--fx-size-small);font-weight:600} #main .fluxmember-marketing{margin:var(--fx-sp-12) 0 0;padding:var(--fx-sp-6) 0 0;border-top:1px solid var(--fx-edge-paper)} #main .fluxmember-marketing__title{margin:0 0 var(--fx-sp-3);font-size:var(--fx-size-lead);font-weight:700;letter-spacing:-.02em} #main .fluxmember-marketing__more summary{display:inline-flex;align-items:center;min-height:44px;font-size:var(--fx-size-small);font-weight:600;color:var(--fx-k2);cursor:pointer} /* 1:1 문의 탭(fhb-tickets*) — 목록 행 + 상태 칩 */ #main .fhb-tickets__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--fx-sp-4);margin:0 0 var(--fx-sp-6);padding:0 0 var(--fx-sp-4);border-bottom:1px solid var(--fx-k1)} #main .fhb-tickets__title{margin:0;font-size:var(--fx-size-h3);font-weight:700;letter-spacing:-.025em;line-height:1.3} #main .fhb-tickets__desc{margin:var(--fx-sp-1) 0 0;font-size:var(--fx-size-small);color:var(--fx-k3)} #main a.fhb-tickets__new{display:inline-flex;align-items:center;justify-content:center;min-height:var(--mp-btn-h);padding:0 var(--mp-btn-px);border:1px solid var(--fx-k1);border-radius:var(--fx-radius-pill);background:var(--fx-k1);font-size:var(--mp-btn-fs);font-weight:600;color:#fff;text-decoration:none} #main a.fhb-tickets__new:hover{border-color:#000;background:#000;color:var(--fx-brand)} #main .fhb-tickets__list{margin:0;padding:0;list-style:none;border:0} #main .fhb-tickets__item{border:0;border-bottom:1px solid var(--fx-edge-paper)} #main a.fhb-tickets__link{display:grid;grid-template-columns:96px minmax(0,1fr) auto;align-items:center;gap:var(--fx-sp-4);min-height:64px;padding:var(--fx-sp-3) var(--fx-sp-1);color:var(--fx-k1);text-decoration:none} #main a.fhb-tickets__link:hover{background:var(--fx-paper-2)} #main .fhb-tickets__subject{font-size:17px;font-weight:600;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #main .fhb-tickets__date{font-size:var(--fx-size-small);color:var(--fx-k3);font-variant-numeric:tabular-nums} #main .fhb-tickets__status{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:0 var(--fx-sp-3);border:1px solid var(--fx-edge-paper-strong);border-radius:var(--fx-radius-pill);background:#fff;font-size:var(--fx-size-min);font-weight:600;color:var(--fx-k2)} #main .fhb-tickets__status--done{border-color:var(--fx-brand);background:var(--fx-brand);color:var(--fx-brand-ink)} #main .fhb-tickets__foot{margin:var(--fx-sp-6) 0 0;font-size:var(--fx-size-small);line-height:1.7;color:var(--fx-k3)} #main .fhb-tickets__foot a{display:inline-flex;align-items:center;min-height:44px;color:var(--fx-k1);text-decoration:underline;text-underline-offset:3px} /* 내 문의(S4-D) — 종류 탭(링크형)·쪽 이동·상태 4종. 선택 탭은 검정 면, 라임은 「답변 완료」 한 곳 */ #main .fhb-tickets__title{text-wrap:balance} #main .fhb-tickets__desc,#main .fhb-tickets__subject,#main .fhb-tickets__empty-d{word-break:keep-all} #main .fhb-tickets__tabs,#main .fhb-wl__tabs{display:flex;flex-wrap:wrap;gap:var(--fx-sp-2);margin:0 0 var(--fx-sp-4)} #main :is(a.fhb-tickets__tab,a.fhb-wl__tab){display:inline-flex;align-items:center;gap:var(--fx-sp-2);min-height:44px;padding:0 var(--fx-sp-4);border:1px solid var(--fx-edge-paper-strong);border-radius:var(--fx-radius-pill);background:#fff;font-size:15px;font-weight:600;color:var(--fx-k2);text-decoration:none;transition:background .2s ease,color .2s ease,border-color .2s ease} #main :is(a.fhb-tickets__tab,a.fhb-wl__tab):hover{border-color:var(--fx-k1);color:var(--fx-k1)} #main :is(a.fhb-tickets__tab,a.fhb-wl__tab).is-current{border-color:var(--fx-k1);background:var(--fx-k1);color:#fff} #main :is(a.fhb-tickets__tab,a.fhb-wl__tab):focus-visible,#main :is(a.fhb-tickets__pg,.fhb-wl__btn,.fhb-wl__remove):focus-visible{outline:2px solid var(--fx-k1);outline-offset:2px} #main :is(.fhb-tickets__count,.fhb-wl__count){font-size:var(--fx-size-small);font-weight:600;font-variant-numeric:tabular-nums;opacity:.7} #main .fhb-tickets__status--checking,#main .fhb-tickets__status--working{border-color:var(--fx-k1);color:var(--fx-k1)} #main .fhb-tickets__pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--fx-sp-1);margin:var(--fx-sp-6) 0 0} #main a.fhb-tickets__pg{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 var(--fx-sp-3);border:1px solid transparent;border-radius:var(--fx-radius-pill);font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--fx-k2);text-decoration:none} #main a.fhb-tickets__pg:hover{border-color:var(--fx-edge-paper-strong);color:var(--fx-k1)} #main a.fhb-tickets__pg.is-current{border-color:var(--fx-k1);background:var(--fx-k1);color:#fff} #main .fhb-tickets__gap{display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:44px;color:var(--fx-k3)} /* 찜(S4-D) — 흰 카드 + 1px 보더, 그림자 없음. 버튼 2종(채움·테두리) */ #main .fhb-wl__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--fx-sp-4);margin:0;padding:0;list-style:none} #main .fhb-wl__card{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--fx-edge-paper);border-radius:var(--fx-radius-l);background:#fff} #main .fhb-wl__thumb{position:relative;display:block;overflow:hidden;aspect-ratio:4/3;background:var(--fx-paper-2)} #main .fhb-wl__thumb img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover} #main .fhb-wl__body{display:flex;flex-direction:column;gap:var(--fx-sp-2);padding:var(--fx-sp-4)} #main .fhb-wl__name{margin:0;font-size:18px;font-weight:700;line-height:1.35;letter-spacing:-.02em;text-wrap:balance;word-break:keep-all} #main .fhb-wl__name a{color:var(--fx-k1);text-decoration:none} #main .fhb-wl__name a:hover{text-decoration:underline;text-underline-offset:3px} #main .fhb-wl__price{margin:0;font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--fx-k2)} #main .fhb-wl__actions{display:flex;flex-wrap:wrap;gap:var(--fx-sp-2);margin-top:var(--fx-sp-2)} #main a.fhb-wl__btn{display:inline-flex;flex:1 1 auto;align-items:center;justify-content:center;min-height:var(--mp-btn-h);padding:0 var(--mp-btn-px);border:1px solid var(--fx-k1);border-radius:var(--fx-radius-pill);font-size:var(--mp-btn-fs);font-weight:600;text-decoration:none;transition:background .2s ease,color .2s ease} #main a.fhb-wl__btn--primary{background:var(--fx-k1);color:#fff} #main a.fhb-wl__btn--primary:hover{background:#000;color:var(--fx-brand)} #main a.fhb-wl__btn--ghost{border-color:var(--fx-edge-paper-strong);background:#fff;color:var(--fx-k1)} #main a.fhb-wl__btn--ghost:hover{border-color:var(--fx-k1);background:var(--fx-paper-2)} #main .fhb-wl__remove{align-self:flex-start;min-height:44px;padding:0 var(--fx-sp-1);border:0;background:none;font-size:var(--fx-size-small);color:var(--fx-k3);text-decoration:underline;text-underline-offset:3px;cursor:pointer} #main .fhb-wl__remove:hover{color:var(--fx-k1)}#main .fhb-wl__remove.fhs-wishlist-btn{position:static;display:inline-flex;align-items:center;width:auto!important;height:auto!important;min-height:44px;border:0;border-radius:0;background:none;box-shadow:none;font-size:var(--fx-size-small);line-height:1.4;color:var(--fx-k3)}#main .fhb-wl__remove.fhs-wishlist-btn:hover,#main .fhb-wl__remove.fhs-wishlist-btn.active:hover{background:none;color:var(--fx-k1)}#main .fhb-wl__remove.fhs-wishlist-btn.active{background:none;color:var(--fx-k3)}#main .fhb-wl__thumb--empty{display:flex;align-items:center;justify-content:center;padding:var(--fx-sp-4);text-align:center}#main .fhb-wl__thumb-name{font-size:20px;font-weight:700;line-height:1.35;letter-spacing:-.02em;word-break:keep-all;text-wrap:balance;color:var(--fx-k2)}#main span.fhb-wl__btn--off{display:inline-flex;flex:1 1 auto;align-items:center;justify-content:center;min-height:var(--mp-btn-h);padding:0 var(--mp-btn-px);border:1px solid transparent;font-size:var(--mp-btn-fs);font-weight:600;visibility:hidden} #main .fhb-wl__rows{margin:0;padding:0;list-style:none;border:1px solid var(--fx-edge-paper);border-radius:var(--fx-radius-l);background:#fff} #main .fhb-wl__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--fx-sp-3);padding:var(--fx-sp-3) var(--fx-sp-4);border-bottom:1px solid var(--fx-edge-paper)} #main .fhb-wl__row:last-child{border-bottom:0} #main a.fhb-wl__row-name{display:inline-flex;align-items:center;min-height:44px;flex:1 1 200px;min-width:0;font-size:17px;font-weight:600;line-height:1.4;color:var(--fx-k1);text-decoration:none;word-break:keep-all} #main .fhb-wl__row a.fhb-wl__btn{flex:0 0 auto} /* 9. 내 사이트 탭 카드(.fhb-site-card*) — 흰 시트(진한 테두리, 그림자 없음). 위: 이름·상태·주소 + 버튼 2 / 본문 2열(플랜·켜진 기능 | 저장 공간·트래픽 막대) / 바닥 띠(보안 한 줄 · 로그인 정보 접힘). 카드 사이 12px. 호버는 테두리 진하게 + 1px 올림. 모바일 규칙은 이 파일 아래 10절 */ #main .fhb-sites__grid{display:flex;flex-direction:column;gap:var(--fx-sp-3)} #main .fhb-sites__loading{padding:var(--fx-sp-8) 0;text-align:center;color:var(--fx-k3)} #main .fhb-site-card{position:relative;margin:0;padding:0;overflow:hidden;border:1px solid var(--mp-sheet-edge);border-radius:var(--fx-radius-l);background:var(--mp-sheet);color:var(--fx-k1);font-variant-numeric:tabular-nums;word-break:keep-all;transition:border-color var(--fx-time-fast) var(--fx-ease-std),transform var(--fx-time-fast) var(--fx-ease-std)} #main .fhb-site-card:active{transform:scale(.98)} @media (hover:hover) and (pointer:fine){#main .fhb-site-card:hover{border-color:var(--fx-k1);transform:translateY(-2px);box-shadow:0 2px 4px color-mix(in srgb,var(--fx-k1) 6%,transparent)}#main .fhb-site-card:hover:active{transform:translateY(-2px) scale(.98)}} #main .fhb-site-card--demo,#main .fhb-site-card--ended{border-color:var(--fx-edge-paper);background:var(--mp-inset)} #main .fhb-site-card__top{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--fx-sp-3) var(--fx-sp-6);margin:0;padding:20px var(--fx-sp-6) var(--fx-sp-4)} #main .fhb-site-card__id{flex:1 1 240px;min-width:0} #main .fhb-site-card__name{display:flex;flex-wrap:wrap;align-items:center;gap:var(--fx-sp-2) 10px;margin:0;font-size:20px;font-weight:700;line-height:1.3;letter-spacing:-.02em;color:var(--fx-k1);overflow-wrap:anywhere} #main .fhb-site-card__addr{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--fx-sp-1);margin-top:2px} #main a.fhb-site-card__domain{display:inline-flex;align-items:center;min-height:36px;font-size:var(--fx-size-small);color:var(--fx-k3);text-decoration:none;overflow-wrap:anywhere} #main a.fhb-site-card__domain:hover{color:var(--fx-k1);text-decoration:underline;text-underline-offset:4px} #main span.fhb-site-card__domain{display:inline-flex;align-items:center;min-height:36px;font-size:var(--fx-size-small);color:var(--fx-k3)} /* 상태: 점 + 글자 (이용 중 = 라임 점·잉크 테두리, 체험 = 빈 점, 주의 = 주의색, 위험 = 위험색) — 초록·주황 칩 없음 */ #main .fhb-site-card__status{display:inline-flex;align-items:center;gap:6px;min-height:0;padding:0;border-radius:0;background:none;color:var(--fx-k2);font-size:var(--fx-size-min);font-weight:600;line-height:1.3;letter-spacing:0;white-space:nowrap} #main .fhb-site-card__dot{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:var(--fx-k1)} #main .fhb-site-card__status--success .fhb-site-card__dot{background:var(--fx-brand);box-shadow:0 0 0 1.5px var(--fx-k1)} #main .fhb-site-card__status--warn{color:var(--v2-warn,#9a5b00)} #main .fhb-site-card__status--warn .fhb-site-card__dot{background:var(--v2-warn,#9a5b00)} #main .fhb-site-card__status--danger{color:var(--fx-alert-paper)} #main .fhb-site-card__status--danger .fhb-site-card__dot{background:var(--fx-alert-paper)} #main .fhb-site-card__status--demo::before{content:"";width:8px;height:8px;flex:0 0 8px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--fx-k2)} #main .fhb-site-card__actions{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--fx-sp-2);flex:0 0 auto} #main a.fhb-site-card__link{display:inline-flex;align-items:center;justify-content:center;min-height:var(--mp-btn-h);font-size:var(--fx-size-small);font-weight:600;color:var(--fx-k2);text-decoration:underline;text-decoration-color:var(--fx-edge-paper-strong);text-underline-offset:4px} #main a.fhb-site-card__link:hover{color:var(--fx-k1);text-decoration-color:var(--fx-k1)} /* 본문 2열 */ #main .fhb-site-card__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--fx-sp-6) 40px;align-items:start;padding:0 var(--fx-sp-6) 20px} #main .fhb-site-card__body:not(:has(.fhb-site-card__meters)){grid-template-columns:minmax(0,1fr)} #main .fhb-site-card__info{min-width:0} #main .fhb-site-card__plan-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--fx-sp-1) var(--fx-sp-2);margin:0;font-size:var(--fx-size-small);color:var(--fx-k3)} #main .fhb-site-card__plan{font-weight:600;color:var(--fx-k1)} #main .fhb-site-card__modules{margin:var(--fx-sp-3) 0 0} #main .fhb-site-card__meters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--fx-sp-4) var(--fx-sp-6);align-items:start;margin:0;min-width:0} #main .fhb-site-card__meters>.fhb-site-card__period{grid-column:1/-1;grid-row:auto} #main .fhb-site-card__meters>.fhb-usage{grid-row:span 4;grid-template-rows:subgrid} /* 막대: 6px, 80% 눈금, 막대 아래 축 라벨(0 · 80% · 한도) */ #main .fhb-site-card__bar-header{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px var(--fx-sp-3);margin:0 0 var(--fx-sp-2);font-size:var(--fx-size-min);color:var(--fx-k3)} #main .fhb-site-card__bar-header span:last-child{font-size:var(--fx-size-small);font-weight:600;color:var(--fx-k1)} #main .fhb-site-card__bar{position:relative;height:6px;border-radius:3px;background:var(--fx-edge-paper)} #main .fhb-site-card__bar-fill{height:100%;border-radius:3px;background:var(--fx-k1);transform-origin:left} #main .fhb-site-card__bar-wrap:not(.fhb-site-card__period)>.fhb-site-card__bar::after{content:"";position:absolute;top:-3px;bottom:-3px;left:80%;width:1px;background:var(--fx-k3)} /* 사용량 계기(S10)의 80% 눈금: 대시보드 막대와 같은 1px 한 줄(흰 2px+테두리 모양이면 세로선 2개로 보인다) */ #main .fhb-site-card__bar-wrap .fhb-usage__tick{width:1px;margin-left:0;background:var(--fx-k3);box-shadow:none;border-radius:0} /* 마이페이지 폼 덩어리는 정적 그림자 없이 */ #main .fx-n3-formwrap{box-shadow:none} #main .fhb-axis{container-type:inline-size;position:relative;height:12px;margin-top:var(--fx-sp-2);font-size:12px;line-height:1;color:var(--fx-k3);font-variant-numeric:tabular-nums} #main .fhb-axis span{position:absolute;top:0;white-space:nowrap} #main .fhb-axis span:nth-child(1){left:0} #main .fhb-axis span:nth-child(2){left:80%;transform:translateX(-50%)} #main .fhb-axis span:nth-child(3){right:0} #main .fhb-site-card__period .fhb-site-card__bar-fill--warn{background:var(--v2-warn,#9a5b00)} #main .fhb-site-card__period .fhb-site-card__bar-fill--danger{background:var(--fx-alert-paper)} #main .fhb-site-card__period-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--fx-sp-1) var(--fx-sp-3);margin-top:var(--fx-sp-2);font-size:var(--fx-size-min);color:var(--fx-k3)} #main .fhb-site-card__renew.is-on{font-weight:600;color:var(--fx-k1)} #main .fhb-site-card__delete-left{font-weight:600;color:var(--fx-alert-paper)} /* 연장·새로 시작 = 주 버튼(검정 채움) */ #main a.fhb-site-card__extend{display:inline-flex;align-items:center;justify-content:center;min-height:var(--mp-btn-h);margin-left:auto;padding:0 var(--mp-btn-px);border:1px solid var(--fx-k1);border-radius:var(--fx-radius-pill);background:var(--fx-k1);color:#fff;font-size:var(--fx-size-small);font-weight:600;line-height:1.2;text-decoration:none;transition:background var(--fx-time-fast) var(--fx-ease-std),color var(--fx-time-fast) var(--fx-ease-std),transform .1s var(--fx-ease-std)} #main a.fhb-site-card__extend:hover{border-color:#000;background:#000;color:var(--fx-brand)} #main a.fhb-site-card__extend:active{transform:scale(.97)} /* 바닥 띠(안쪽 면): 보안 한 줄 · 관리자 로그인 정보(접힘) */ #main .fhb-site-card__foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--fx-sp-1) var(--fx-sp-6);padding:var(--fx-sp-1) var(--fx-sp-6);border-top:1px solid var(--mp-line);background:var(--mp-inset)} #main .fhb-site-card__foot .fhb-secline{flex:1 1 auto;min-width:0} #main .fhb-site-card__creds{flex:0 0 auto;margin:0 0 0 auto;padding:0;border:0;background:none} #main .fhb-site-card__creds[open]{flex:1 1 100%;margin:0} #main summary.fhb-site-card__creds-title{display:flex;align-items:center;gap:var(--fx-sp-2);width:fit-content;min-height:44px;margin:0;list-style:none;font-size:var(--fx-size-small);font-weight:600;color:var(--fx-k2);cursor:pointer;transition:color var(--fx-time-fast) var(--fx-ease-std)} #main summary.fhb-site-card__creds-title:hover{color:var(--fx-k1)} #main summary.fhb-site-card__creds-title::-webkit-details-marker{display:none} #main summary.fhb-site-card__creds-title::after{content:"";width:7px;height:7px;margin-top:-3px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform var(--fx-time-fast) var(--fx-ease-std)} #main .fhb-site-card__creds[open] summary.fhb-site-card__creds-title{color:var(--fx-k1)} #main .fhb-site-card__creds[open] summary.fhb-site-card__creds-title::after{margin-top:3px;transform:rotate(-135deg)} #main .fhb-site-card__creds[open]>:not(summary){animation:mp-fold .22s var(--fx-ease-out)} #main summary.fhb-site-card__creds-title:focus-visible,#main button.fhb-site-card__pw-btn:focus-visible{outline:2px solid var(--fx-k1);outline-offset:2px} #main .fhb-site-card__creds-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--fx-sp-2) var(--fx-sp-4);max-width:560px;padding:var(--fx-sp-2) 0;border-top:1px solid var(--mp-line);font-size:var(--fx-size-small)} #main .fhb-site-card__creds-row:last-child{margin-bottom:var(--fx-sp-2)} #main .fhb-site-card__creds-row>span:first-child{color:var(--fx-k3)} #main .fhb-site-card__creds-row code{padding:2px var(--fx-sp-2);border-radius:4px;background:var(--mp-sheet);font-size:var(--fx-size-small);color:var(--fx-k1)} #main .fhb-site-card__pw{display:flex;flex-wrap:wrap;align-items:center;gap:var(--fx-sp-2)} #main .fhb-site-card__pw-note{font-size:var(--fx-size-min);color:var(--fx-k3)} /* 비밀번호 버튼 = 보조(외곽선) */ #main button.fhb-site-card__pw-btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--mp-btn-h);padding:0 var(--mp-btn-px);border:1px solid var(--fx-edge-paper-strong);border-radius:var(--fx-radius-pill);background:#fff;color:var(--fx-k1);font:inherit;font-size:var(--fx-size-small);font-weight:600;line-height:1.2;cursor:pointer;transition:border-color var(--fx-time-fast) var(--fx-ease-std),transform .1s var(--fx-ease-std)} #main button.fhb-site-card__pw-btn:hover:not(:disabled){border-color:var(--fx-k1)} #main button.fhb-site-card__pw-btn:active:not(:disabled){transform:scale(.97)} /* 막대 채움(처음 한 번). 라이브 값으로 카드가 다시 그려져도 다시 재생하지 않는다(.is-settled) */ @media (prefers-reduced-motion:no-preference){ #main .fhb-sites__grid:not(.is-settled) .fhb-site-card__bar-fill,#main .fhb-sites__grid:not(.is-settled) .fhb-usage__fill{animation:mp-fill 1.2s var(--fx-ease-out) both} } /* 10. 반응형 (모바일 먼저가 아니라 기존 구조를 덮으 */ @media (max-width:1024px){ #main .fluxmember-mypage{grid-template-columns:minmax(0,1fr);gap:var(--fx-sp-6)} #main .fluxmember-mypage__nav{position:static} #main .fluxmember-mypage__user-card{margin:0 0 var(--fx-sp-3);padding:var(--fx-sp-4) var(--fx-sp-6) var(--fx-sp-1)} #main .fluxmember-mypage__menu{display:flex;gap:var(--fx-sp-2);overflow-x:auto;overscroll-behavior-x:contain;padding:0 0 var(--fx-sp-1);scrollbar-width:none;-webkit-overflow-scrolling:touch} #main .fluxmember-mypage__menu::-webkit-scrollbar{display:none} #main .fluxmember-mypage__menu-title{display:none} #main .fluxmember-mypage__menu-item{flex:0 0 auto} #main .fluxmember-mypage__menu-item a{padding:0 var(--fx-sp-4);border:1px solid var(--fx-edge-paper-strong);border-radius:var(--fx-radius-pill);background:#fff;white-space:nowrap} #main .fluxmember-mypage__menu-item.is-active a{border-color:var(--fx-brand)} #main .fluxmember-mypage__menu-item--logout{margin:0;padding:0;border:0} #main .fluxmember-mypage__content{padding:0} } @media (max-width:768px){ .fx-plugin--mypage .fx-plugin__head{padding-top:calc(76px + var(--fx-sp-4));padding-bottom:var(--fx-sp-4)} .fx-plugin--mypage .fx-plugin__body{padding-top:var(--fx-sp-6);padding-bottom:var(--fx-sp-16)} #main .fhs-order-card.fhs-oc{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "items" "foot";gap:var(--fx-sp-3);padding:var(--fx-sp-4) var(--fx-sp-1)} #main .fhs-oc__head{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between} #main .fhs-oc__meta{flex-direction:row;gap:var(--fx-sp-3)} #main .fhs-oc__foot{align-items:stretch} #main .fhs-oc__actions{justify-content:stretch} #main .fhs-oc__actions>*{flex:1 1 auto} #main a.fhb-recent-orders__row{padding:10px var(--fx-sp-4)} #main a.fhb-tickets__link{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"status date" "subject subject";gap:var(--fx-sp-1) var(--fx-sp-3)} #main .fhb-tickets__status{grid-area:status;justify-self:start} #main .fhb-tickets__date{grid-area:date} #main .fhb-tickets__subject{grid-area:subject;white-space:normal} #main .fhs-sub-card__header{padding:20px 20px 0} #main .fhs-sub-card .fhb-siteline{padding:0 20px} #main .fhs-sub-card__body{gap:var(--fx-sp-4);padding:var(--fx-sp-4) 20px 20px} #main .fluxshop-my-subscription,#main .fhs-sub-panel{gap:12px} #main summary.fhs-sub-past__sum{padding:0 var(--fx-sp-4)} #main .fhs-sub-facts{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:minmax(0,1fr)} #main .fhs-sub-fact{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--fx-sp-3);align-items:baseline;border-left:0;border-top:1px solid var(--mp-line)} #main .fhs-sub-fact:first-child{border-top:0} #main .fhs-sub-fact dd{text-align:right} #main .fhs-sub-fact dd.fhs-sub-fact__cap{grid-column:1 / -1} #main .fhb-siteline{padding:var(--fx-sp-3) var(--fx-sp-4)} #main .fhs-cp__list{grid-template-columns:repeat(2,minmax(0,1fr))} #main :is(.fhb-wish-empty,.fhb-sites__empty,.fhb-tickets__empty,.fhb-home__empty,.fxu-empty,.fluxshop-empty,.fxm-empty){padding:var(--fx-sp-6)} #main .fluxmember-form__input--short{max-width:none} } #main .screen-reader-text{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);border:0;white-space:nowrap} html[data-fx-surface] .fhc-bell .fhc-bell__badge{min-width:20px;height:20px;font-size:var(--fx-size-min);line-height:20px} @media (max-width:560px){ #main .fhs-cp__list{grid-template-columns:minmax(0,1fr)} } /* 12. 페이지별 정리(2026-10-21 mypage-design) — 기준: 대시보드·내 사이트·구독 행 구조. 흰 그룹 카드 + 행, 그림자 없음, 라임은 선택·켜진 면에만 */ /* 12-1 본문 폭: 쿠폰·적립금·주문 상세·취소/반품·예치금도 다른 탭과 같은 본문 폭(플러그인의 720px 열 해제) */ #main :is(.fhs-cp,.fhs-pts,.fhs-od,.fhs-order-detail,.fhs-cl,.fhs-dep){width:100%;max-width:none;margin:0} /* 12-2 주문 상태 칩: 완료는 윤곽(잉크 선), 결제 대기는 잉크 면(지금 할 일). 라임 칩 반복 금지 */ #main :is(.fhs-orders,.fhs-od,.fhs-oc) :is(.fhs-badge--paid,.fhs-badge--processing,.fhs-badge--shipped,.fhs-badge--delivered){border-color:var(--fx-k1);background:#fff;color:var(--fx-k1)} #main :is(.fhs-orders,.fhs-od,.fhs-oc) .fhs-badge--pending_payment{border-color:var(--fx-k1);background:var(--fx-k1);color:#fff} /* 12-3 주문내역: 흰 그룹 카드 안의 행. 주문일·번호(작게) | 상품명 | 금액 | 상태 칩 | 행동 */ #main .fhs-orders{display:flex;flex-direction:column;margin:0;overflow:hidden;border:1px solid var(--fx-edge-paper);border-radius:var(--fx-radius-l);background:#fff} #main .fhs-order-card.fhs-oc{display:grid;grid-template-columns:minmax(168px,max-content) minmax(0,1fr) 168px 112px;grid-template-areas:"meta items total detail" "meta items status detail" "meta site site detail" "primary primary primary primary";align-items:center;column-gap:var(--fx-sp-6);row-gap:0;margin:0;padding:var(--fx-sp-4) var(--fx-sp-6);border:0;border-bottom:1px solid var(--fx-edge-paper);border-radius:0;background:none;box-shadow:none} #main .fhs-order-card.fhs-oc:last-child{border-bottom:0} #main .fhs-order-card[data-status="pending_payment"]{order:-1;background:none;box-shadow:none} #main .fhs-oc :is(.fhs-oc__head,.fhs-oc__foot){display:contents} #main .fhs-oc__meta{grid-area:meta;display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin:0;font-size:var(--fx-size-small);line-height:1.5;color:var(--fx-k2);font-variant-numeric:tabular-nums} #main .fhs-oc__meta>span:first-child{font-weight:600;color:var(--fx-k1)} #main .fhs-oc__meta .fhs-oc__no{font-size:var(--fx-size-min);color:var(--fx-k3);white-space:nowrap} #main .fhs-oc__items{grid-area:items;margin:0;padding:0;border:0;list-style:none} #main .fhs-oc__item{display:block;padding:0} #main .fhs-oc__item+.fhs-oc__item{margin-top:var(--fx-sp-2)} #main .fhs-oc__item .fhs-od__thumb{display:none} #main .fhs-oc__item-body{min-width:0} #main .fhs-oc .fhs-od__item-name{display:block;margin:0;font-size:16px;font-weight:700;line-height:1.4;letter-spacing:-.01em;color:var(--fx-k1);overflow:visible;word-break:keep-all;overflow-wrap:anywhere} #main .fhs-oc .fhs-od__item-meta{display:block;margin:2px 0 0;font-size:var(--fx-size-min);line-height:1.5;color:var(--fx-k3);font-variant-numeric:tabular-nums} #main .fhs-oc .fhs-od__item-meta .fhs-od__opt::before{display:none} #main .fhs-oc .fhs-oc__item:nth-child(n+2) .fhs-od__item-meta{display:none} #main .fhs-oc__rest{margin:var(--fx-sp-1) 0 0;padding:0;font-size:var(--fx-size-min);color:var(--fx-k3)} #main .fhs-oc__total{grid-area:total;justify-self:end;margin:0;font-size:var(--fx-size-min);font-weight:500;color:var(--fx-k3);white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums} #main .fhs-oc__total strong{margin-left:var(--fx-sp-1);font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--fx-k1)} #main .fhs-oc__total .fhs-od__muted{display:block;margin-top:2px} #main .fhs-oc__status{grid-area:status;justify-self:end;margin:var(--fx-sp-1) 0 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--fx-sp-1);font-size:var(--fx-size-min);color:var(--fx-k3)} #main .fhs-oc>.fhb-siteline,#main .fhs-oc .fhb-siteline{grid-area:site;margin:var(--fx-sp-1) 0 0;padding:0;border:0;font-size:var(--fx-size-min);color:var(--fx-k3)} #main .fhs-oc__actions{display:contents} #main .fhs-oc__actions>a.fhs-od-btn:last-child{grid-area:detail;justify-self:end;align-self:center} #main .fhs-oc__actions>:not(:last-child){grid-area:primary;justify-self:end;margin-top:var(--fx-sp-3)} #main .fhs-oc__actions .fhs-od-btn{width:auto;white-space:nowrap} #main .fhs-oc__actions>a.fhs-od-btn:last-child{background:#fff;border-color:var(--fx-edge-paper-strong);color:var(--fx-k1)} #main .fhs-oc__actions>a.fhs-od-btn:last-child::after{content:"›";margin-left:var(--fx-sp-1);font-size:1.2em;line-height:1} #main .fhs-oc__actions .fhs-od-btn--primary{border-color:var(--fx-k1);background:var(--fx-k1);color:#fff} /* 12-4 주문 상세: 상단 요약 + 섹션 카드(라벨-값 행). 카드 안은 패딩 0, 행마다 1px 구분선 */ #main .fhs-od{display:block} #main .fhs-od__back{display:inline-flex;align-items:center;min-height:44px;margin:0 0 var(--fx-sp-1);font-size:var(--fx-size-small);font-weight:600;color:var(--fx-k2);text-decoration:none} #main .fhs-od__back:hover{color:var(--fx-k1);text-decoration:underline;text-underline-offset:3px} #main .fhs-od__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--fx-sp-3) var(--fx-sp-6);margin:0 0 var(--fx-sp-6);padding:0 0 var(--fx-sp-4);border-bottom:1px solid var(--fx-k1)} #main .fhs-od__date{display:flex;flex-wrap:wrap;align-items:center;gap:var(--fx-sp-2);margin:0;font-size:var(--fx-size-small);color:var(--fx-k3);font-variant-numeric:tabular-nums} #main .fhs-od__no{display:flex;flex-wrap:wrap;align-items:center;gap:var(--fx-sp-2);margin:var(--fx-sp-1) 0 0;font-size:var(--fx-size-lead);font-weight:700;line-height:1.3;letter-spacing:-.02em;color:var(--fx-k1)} #main .fhs-od__num{font-variant-numeric:tabular-nums} #main .fhs-od__section{margin:var(--fx-sp-8) 0 0} #main .fhs-od__head+.fhs-od__section{margin-top:0} #main .fhs-od__title{margin:0 0 var(--fx-sp-3);font-size:var(--fx-size-lead);font-weight:700;line-height:1.3;letter-spacing:-.02em;color:var(--fx-k1)} #main .fhs-od .fhs-od__card{padding:0;overflow:hidden;border:1px solid var(--fx-edge-paper);border-radius:var(--fx-radius-l);background:#fff;box-shadow:none} #main .fhs-od__seller{display:flex;align-items:center;justify-content:space-between;gap:var(--fx-sp-3);min-height:56px;margin:0;padding:var(--fx-sp-2) var(--fx-sp-6);border-bottom:1px solid var(--fx-edge-paper)} #main .fhs-od__seller-name{display:inline;font-size:var(--fx-size-small);font-weight:600;color:var(--fx-k2)} #main .fhs-od__seller-fee{margin-left:var(--fx-sp-2);font-size:var(--fx-size-min);color:var(--fx-k3)} #main .fhs-od__status{margin:0;padding:var(--fx-sp-3) var(--fx-sp-6);border-bottom:1px solid var(--fx-edge-paper);font-size:var(--fx-size-small);color:var(--fx-k2)} #main .fhs-od__status strong{font-weight:700;color:var(--fx-k1)} #main .fhs-od .fhb-siteline{padding:var(--fx-sp-3) var(--fx-sp-6)} #main .fhs-od__items{margin:0;padding:0;list-style:none} #main .fhs-od__item{display:flex;align-items:flex-start;gap:var(--fx-sp-4);padding:var(--fx-sp-4) var(--fx-sp-6)} #main .fhs-od__item+.fhs-od__item{border-top:1px solid var(--fx-edge-paper)} #main .fhs-od__thumb{width:56px;height:56px;border-radius:var(--fx-radius-s);background:var(--fx-paper-2)} #main .fhs-od__item-body{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--fx-sp-4);row-gap:2px;align-items:baseline;min-width:0;flex:1} #main .fhs-od__item-body>*{grid-column:1/-1} #main .fhs-od .fhs-od__item-name{grid-column:1;display:block;margin:0;font-size:16px;font-weight:600;line-height:1.45;color:var(--fx-k1);overflow:visible;word-break:keep-all;overflow-wrap:anywhere} #main .fhs-od .fhs-od__item-meta{grid-column:1;margin:0;font-size:var(--fx-size-small);color:var(--fx-k3)} #main .fhs-od .fhs-od__opt::before{display:none} #main .fhs-od .fhs-od__item-price{grid-column:2;grid-row:1;margin:0;font-size:16px;font-weight:700;color:var(--fx-k1);text-align:right;font-variant-numeric:tabular-nums} #main .fhs-od__item-claim{margin:0;font-size:var(--fx-size-min);font-weight:600;color:var(--fx-k2)} #main .fhs-od__item-claim.is-open{color:var(--fx-k1)} #main .fhs-od__item-body .fhs-od-btn{grid-column:1/-1;justify-self:start;margin-top:var(--fx-sp-2)} #main .fhs-od__actions{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:var(--fx-sp-2);margin:0;padding:var(--fx-sp-4) var(--fx-sp-6);border-top:1px solid var(--fx-edge-paper)} #main .fhs-od__grid{display:contents} #main .fhs-od .fhs-od-btn{width:auto;background:#fff;border-color:var(--fx-edge-paper-strong);color:var(--fx-k1);font-weight:600} #main .fhs-od .fhs-od-btn:hover{border-color:var(--fx-k1);background:var(--fx-paper-2)} #main .fhs-od .fhs-od-btn--primary,#main .fhs-od .fhs-od-btn--solid{width:auto;border-color:var(--fx-k1);background:var(--fx-k1);color:#fff} #main .fhs-od .fhs-od-btn--primary:hover,#main .fhs-od .fhs-od-btn--solid:hover{border-color:#000;background:#000;color:var(--fx-brand)} #main .fhs-od__actions>.fhs-od-btn--primary{order:-1} #main .fhs-od__ship{padding:var(--fx-sp-4) var(--fx-sp-6)} #main .fhs-od__ship p{margin:0;font-size:16px;line-height:1.7;color:var(--fx-k1)} #main .fhs-od__ship-name{font-weight:700} #main .fhs-od__muted{margin:0;font-size:var(--fx-size-small);line-height:1.6;color:var(--fx-k3)} /* 진행 상태 */ #main .fhs-od__section--flow .fhs-od__card{padding:var(--fx-sp-4) var(--fx-sp-6)} /* 결제 정보: 합계 행 강조(큰 글자·굵게·아래 잉크 선), 나머지는 라벨-값 행 */ #main .fhs-od__sum{display:flex;align-items:baseline;justify-content:space-between;gap:var(--fx-sp-3);margin:0;padding:var(--fx-sp-4) var(--fx-sp-6);border-bottom:1px solid var(--fx-k1);font-size:var(--fx-size-small);font-weight:600;color:var(--fx-k2)} #main .fhs-od__sum strong{font-size:var(--fx-size-lead);font-weight:700;letter-spacing:-.02em;color:var(--fx-k1);font-variant-numeric:tabular-nums} #main .fhs-od__rows{margin:0;padding:var(--fx-sp-2) var(--fx-sp-6);border:0} #main .fhs-od__row{display:flex;justify-content:space-between;gap:var(--fx-sp-3);padding:var(--fx-sp-2) 0;font-size:var(--fx-size-small);line-height:1.5;color:var(--fx-k2)} #main .fhs-od__row+.fhs-od__row{margin:0;border-top:1px solid var(--fx-edge-paper)} #main .fhs-od__row dd{color:var(--fx-k1);font-weight:600;font-variant-numeric:tabular-nums} #main .fhs-od__row.is-minus dd,#main .fhs-od__method.is-minus strong{color:var(--fx-alert-paper)} #main .fhs-od__method{display:flex;justify-content:space-between;gap:var(--fx-sp-3);margin:0;padding:var(--fx-sp-3) var(--fx-sp-6);border-top:1px solid var(--fx-edge-paper);background:var(--fx-paper-2);font-size:var(--fx-size-small);color:var(--fx-k2)} #main .fhs-od__method strong{font-weight:700;color:var(--fx-k1);font-variant-numeric:tabular-nums} #main .fhs-od__method+.fhs-od__method{margin:0;padding-top:var(--fx-sp-3)} #main .fhs-od__section .fhs-od__card>.fhs-od__muted{margin:0;padding:var(--fx-sp-3) var(--fx-sp-6)} #main .fhs-od__accent{color:var(--fx-k1)} #main .fhs-od__copy,#main .fhs-od-copy.fxu-btn{min-height:var(--mp-btn-h)} /* 12-5 쿠폰: 금액이 카드 안 최상위 위계, 조건·기한은 캡션. 사용 완료·만료는 흐리게 + 글자 라벨(색만으로 구분하지 않는다) */ #main .fhs-cp__card.fxu-card{--cp-stub:96px} #main .fhs-cp__head{gap:var(--fx-sp-2)} #main .fhs-cp__amount{font-size:22px;font-weight:800;letter-spacing:-.03em} #main .fhs-cp__state{display:inline-flex;align-items:center;min-height:22px;padding:0 var(--fx-sp-2);border:1px solid var(--fx-edge-paper-strong);border-radius:var(--fx-radius-pill);background:#fff;font-size:11px;font-weight:600;line-height:1;color:var(--fx-k2);white-space:nowrap} #main .fhs-cp__name{font-size:15px;font-weight:700;letter-spacing:-.01em} #main .fhs-cp__cond,#main .fhs-cp__when,#main .fhs-cp__scope{font-size:var(--fx-size-min)} #main .fhs-cp__cond{color:var(--fx-k3)} #main .fhs-cp__when{color:var(--fx-k2)} #main .fhs-cp__when.is-soon{padding:0 var(--fx-sp-2);border:1px solid var(--fx-k1);border-radius:var(--fx-radius-pill);background:none;font-weight:700;line-height:20px;color:var(--fx-k1)} #main :is(.fhs-cp__card.is-used,.fhs-cp__card.is-expired){background:var(--fx-paper-2)} #main :is(.fhs-cp__card.is-used,.fhs-cp__card.is-expired) .fhs-cp__amount{color:var(--fx-k3);font-weight:700;text-decoration:line-through} #main :is(.fhs-cp__card.is-used,.fhs-cp__card.is-expired) .fhs-cp__name{color:var(--fx-k2);font-weight:600} #main :is(.fhs-cp__card.is-used,.fhs-cp__card.is-expired) .fhs-cp__state{border-color:var(--fx-k3);background:transparent;color:var(--fx-k1)} #main :is(.fhs-cp__card.is-used,.fhs-cp__card.is-expired) :is(.fhs-cp__cond,.fhs-cp__when){color:var(--fx-k3)} /* 12-6 적립금: 상단 잔액 요약(큰 숫자 + 맥락) + 내역 행. 부호(+/−)와 글자(적립/사용)로 구분 */ #main .fhs-pts__hero.fxu-card--hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px);grid-template-areas:"label sub" "balance sub" "rule rule";column-gap:var(--fx-sp-8);align-items:end;margin:0 0 var(--fx-sp-6);padding:var(--fx-sp-6);border:1px solid var(--fx-edge-paper);border-radius:var(--fx-radius-l);background:#fff;box-shadow:none} #main .fhs-pts__label{grid-area:label;margin:0;font-size:var(--fx-size-small);font-weight:600;color:var(--fx-k2)} #main .fhs-pts__info{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;min-height:44px;margin:-12px 0 -12px -8px;padding:0;border:0;background:none;font-size:var(--fx-size-min);font-style:italic;font-weight:700;color:var(--fx-k2);cursor:pointer} #main .fhs-pts__info::before{content:"";position:absolute;inset:11px;border:1px solid var(--fx-k3);border-radius:50%} #main .fhs-pts__info:focus-visible{outline:2px solid var(--fx-k1);outline-offset:-2px;border-radius:50%} #main .fhs-pts__balance{grid-area:balance;margin:var(--fx-sp-1) 0 0;font-size:40px;font-weight:700;line-height:1.15;letter-spacing:-.03em;color:var(--fx-k1);font-variant-numeric:tabular-nums} #main .fhs-pts__balance span{margin-left:var(--fx-sp-1);font-size:20px;font-weight:600;color:var(--fx-k2)} #main .fhs-pts__rule{grid-area:rule;margin:var(--fx-sp-4) 0 0;padding:var(--fx-sp-3) var(--fx-sp-4);border-radius:var(--fx-radius-s);background:var(--fx-paper-2);font-size:var(--fx-size-small);line-height:1.6;color:var(--fx-k2)} #main .fhs-pts__sub{grid-area:sub;align-self:stretch;display:flex;flex-direction:column;justify-content:flex-end;margin:0;padding:0 0 0 var(--fx-sp-6);border-left:1px solid var(--fx-edge-paper)} #main .fhs-pts__sub-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--fx-sp-3);padding:var(--fx-sp-2) 0;font-size:var(--fx-size-small);color:var(--fx-k2)} #main .fhs-pts__sub-row+.fhs-pts__sub-row{border-top:1px solid var(--fx-edge-paper)} #main .fhs-pts__sub-row dd{font-weight:700;color:var(--fx-k1);font-variant-numeric:tabular-nums} #main .fhs-pts__sub-row.is-warn dd{color:var(--fx-alert-paper)} #main .fhs-pts__tabs{display:flex;flex-wrap:wrap;gap:var(--fx-sp-2);margin:0 0 var(--fx-sp-4);border:0;overflow:visible} #main .fhs-pts__tab::after{display:none} #main .fhs-pts__list.fxu-card{margin:0 0 var(--fx-sp-4);padding:0;overflow:hidden;border:1px solid var(--fx-edge-paper);border-radius:var(--fx-radius-l);background:#fff;box-shadow:none;list-style:none} #main .fhs-pts__row{display:flex;align-items:center;justify-content:space-between;gap:var(--fx-sp-4);min-height:72px;margin:0;padding:var(--fx-sp-3) var(--fx-sp-6);border:0;border-top:1px solid var(--fx-edge-paper)} #main .fhs-pts__row:first-child{border-top:0} #main .fhs-pts__row-link{margin:calc(var(--fx-sp-3) * -1) calc(var(--fx-sp-6) * -1);padding:var(--fx-sp-3) var(--fx-sp-6);align-items:center} #main .fhs-pts__row-link:hover{background:var(--fx-paper-2)} #main .fhs-pts__row-link:focus-visible{outline:2px solid var(--fx-k1);outline-offset:-2px} #main .fhs-pts__row-main{gap:2px} #main .fhs-pts__row-main strong{font-size:16px;font-weight:600;color:var(--fx-k1)} #main .fhs-pts__row-desc{font-size:var(--fx-size-small);color:var(--fx-k2)} #main .fhs-pts__row-when{font-size:var(--fx-size-min);color:var(--fx-k3)} #main .fhs-pts__amt{font-size:18px;font-weight:700;letter-spacing:-.02em;color:var(--fx-alert-paper);white-space:nowrap;font-variant-numeric:tabular-nums} #main .fhs-pts__amt.is-plus{color:var(--fx-k1)} #main .fhs-pts__pager{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--fx-sp-1);margin:var(--fx-sp-6) 0 0} #main .fhs-pts__pager a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border-radius:var(--fx-radius-pill);font-weight:600;font-variant-numeric:tabular-nums;color:var(--fx-k2);text-decoration:none} #main .fhs-pts__pager a.is-active{background:var(--fx-k1);color:#fff} #main .fhs-pts__pager a:focus-visible{outline:2px solid var(--fx-k1);outline-offset:2px} #main .fhs-pts__empty{text-align:left} #main .fhs-pts__empty h3{font-size:var(--fx-size-lead)} #main .fhs-pts__sub-title{margin:var(--fx-sp-6) 0 var(--fx-sp-2);font-size:var(--fx-size-small);font-weight:700;line-height:1.4;color:var(--fx-k2)} #main .fhs-pts__sub-title:first-of-type{margin-top:0} #main .fhs-pts__how{margin:0;padding:0 0 0 var(--fx-sp-4);list-style:disc;font-size:16px;line-height:1.7;color:var(--fx-k2)} /* 12-7 반응형 보정 */ @media (max-width:1023px){ #main .fhs-order-card.fhs-oc{grid-template-columns:minmax(168px,max-content) minmax(0,1fr) 152px 112px;column-gap:var(--fx-sp-4)} } @media (max-width:768px){ /* 주문 행: 1줄 상품명 | 금액, 2줄 일자·번호 | 상태 칩 | 상세 ›, (결제 대기만) 3줄 결제하기 */ #main .fhs-order-card.fhs-oc{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"items items total" "meta meta status" "site site site" "primary primary detail";column-gap:var(--fx-sp-3);row-gap:0;padding:var(--fx-sp-4)} #main .fhs-oc__meta{flex-direction:row;flex-wrap:wrap;gap:0 var(--fx-sp-2);align-self:center} #main .fhs-oc__meta>span:first-child{font-size:var(--fx-size-min)} #main .fhs-oc__status{align-self:center;justify-self:end} #main .fhs-oc__meta,#main .fhs-oc__status,#main .fhs-oc__actions>a.fhs-od-btn:last-child{margin-top:var(--fx-sp-2)} #main .fhs-oc__actions>:not(:last-child){justify-self:stretch;width:100%} #main .fhs-oc__actions>a.fhs-od-btn:last-child{justify-self:end} #main .fhs-oc__total strong{font-size:18px} #main .fhs-od__head{align-items:flex-start} #main .fhs-od__seller,#main .fhs-od__status,#main .fhs-od__item,#main .fhs-od__actions,#main .fhs-od__ship,#main .fhs-od__sum,#main .fhs-od__rows,#main .fhs-od__method,#main .fhs-od .fhb-siteline,#main .fhs-od__section .fhs-od__card>.fhs-od__muted{padding-left:var(--fx-sp-4);padding-right:var(--fx-sp-4)} #main .fhs-od__section--flow .fhs-od__card{padding:var(--fx-sp-4)} #main .fhs-od__actions .fhs-od-btn{flex:1 1 auto} #main .fhs-pts__hero.fxu-card--hero{grid-template-columns:minmax(0,1fr);grid-template-areas:"label" "balance" "sub" "rule";padding:var(--fx-sp-4)} #main .fhs-pts__sub{margin-top:var(--fx-sp-4);padding:var(--fx-sp-2) 0 0;border-left:0;border-top:1px solid var(--fx-edge-paper)} #main .fhs-pts__row{padding-left:var(--fx-sp-4);padding-right:var(--fx-sp-4)} #main .fhs-pts__row-link{margin-left:calc(var(--fx-sp-4) * -1);margin-right:calc(var(--fx-sp-4) * -1);padding-left:var(--fx-sp-4);padding-right:var(--fx-sp-4)} #main .fhs-pts__balance{font-size:32px} } /* 13. 2차 정리(2026-10-21 mypage-design-pass-2) — 구독(6절)·알림(inbox.css) 외 나머지 탭: 회원정보·탈퇴·예치금·증빙·취소/반품·내 문의·내 활동. 1차와 같은 규칙(흰 그룹 카드 + 행, 버튼 36/44, 라임은 켜진 면에만) */ /* 13-1 폼: 섹션 카드 + 라벨 위·입력 아래. 입력 높이 40(데스크톱)·44(모바일), 읽기 전용은 회색 면 */ #main .fluxmember-profile,#main .fluxmember-withdrawal{width:100%;max-width:none} #main .fluxmember-subpanel{display:none} #main .fluxmember-subpanel.is-active{display:block} #main .fhx-fcard{margin:0 0 var(--fx-sp-4);padding:var(--fx-sp-6) var(--fx-sp-6) var(--fx-sp-2);border:1px solid var(--fx-edge-paper);border-radius:var(--fx-radius-l);background:#fff} #main .fhx-fcard__title{margin:0 0 var(--fx-sp-4);padding:0 0 var(--fx-sp-3);border-bottom:1px solid var(--fx-edge-paper);font-size:var(--fx-size-lead);font-weight:700;line-height:1.3;letter-spacing:-.02em;color:var(--fx-k1)} #main .fhx-fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--fx-sp-6)} #main .fhx-fgrid__wide{grid-column:1/-1} #main :is(.fluxmember-form__input,.fluxmember-form__select,select.fluxmember-form__input){min-height:var(--mp-field-h)} #main .fluxmember-form__textarea{min-height:96px} #main .fluxmember-form__input:is(:disabled,[readonly]){border-color:var(--fx-edge-paper);background:var(--fx-paper-2);color:var(--fx-k2);cursor:default} #main .fluxmember-form__label{font-size:var(--fx-size-small)} #main .fluxmember-form__hint{margin:0;font-size:var(--fx-size-min);line-height:1.6;color:var(--fx-k3)} #main .fhx-fgrid .fluxmember-form__hint{padding-top:calc(var(--fx-size-small) * 1.6 + var(--fx-sp-2))} #main .fhx-zip{display:flex;flex-wrap:wrap;align-items:center;gap:var(--fx-sp-2) var(--fx-sp-3)} #main .fhx-zip .fluxmember-form__input--short{flex:0 1 160px;width:160px} #main .fluxmember-btn{min-height:var(--mp-btn-h);padding:0 var(--fx-sp-6);font-size:var(--mp-btn-fs)} #main .fluxmember-address-manual{display:inline-flex;align-items:center;border:0;background:none;color:var(--fx-k2);text-decoration:underline;text-underline-offset:3px;cursor:pointer} #main .fluxmember-address-manual:hover{color:var(--fx-k1)} #main .fluxmember-address-manual:focus-visible,#main .fluxmember-btn:focus-visible{outline:2px solid var(--fx-k1);outline-offset:2px} #main .fhx-fform-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--fx-sp-3) var(--fx-sp-4);margin:var(--fx-sp-2) 0 var(--fx-sp-4)} #main .fhx-fform-foot .fluxmember-form__message{margin:0} /* 수신 동의: 같은 카드 톤, 저장은 보조 버튼(주 버튼은 폼 저장 1개) */ #main .fluxmember-marketing{margin:0 0 var(--fx-sp-4);padding:var(--fx-sp-6);border:1px solid var(--fx-edge-paper);border-radius:var(--fx-radius-l);background:#fff} #main .fluxmember-marketing__title{margin:0 0 var(--fx-sp-4);padding:0 0 var(--fx-sp-3);border-bottom:1px solid var(--fx-edge-paper);font-size:var(--fx-size-lead)} #main .fluxmember-marketing__status{margin:0 0 var(--fx-sp-3);font-size:var(--fx-size-min);color:var(--fx-k3)} #main .fluxmember-marketing__flash{margin:0 0 var(--fx-sp-3);padding:var(--fx-sp-3) var(--fx-sp-4);border-radius:var(--fx-radius-s);background:var(--fx-paper-2);font-size:var(--fx-size-small);font-weight:600;color:var(--fx-k1)} #main .fluxmember-marketing .fluxmember-btn--primary{border-color:var(--fx-edge-paper-strong);background:#fff;color:var(--fx-k1)} #main .fluxmember-marketing .fluxmember-btn--primary:hover{border-color:var(--fx-k1);background:var(--fx-paper-2);color:var(--fx-k1)} /* 탈퇴: 주의 안내 카드 + 폼 카드 + 위험 버튼 1개(위험색 면) */ #main .fluxmember-withdrawal .fluxmember-notice{margin:0 0 var(--fx-sp-4);padding:var(--fx-sp-6);border:1px solid var(--fx-alert-paper);border-radius:var(--fx-radius-l);background:#fff} #main .fluxmember-withdrawal .fluxmember-notice strong{display:block;font-size:var(--fx-size-lead);color:var(--fx-alert-paper)} #main .fluxmember-withdrawal .fluxmember-notice ul{margin:var(--fx-sp-3) 0 0;font-size:16px;line-height:1.8;color:var(--fx-k1)} #main .fluxmember-withdrawal #fluxmember-withdrawal-form{padding:var(--fx-sp-6) var(--fx-sp-6) var(--fx-sp-2);border:1px solid var(--fx-edge-paper);border-radius:var(--fx-radius-l);background:#fff} #main .fluxmember-withdrawal .fluxmember-btn--danger{border-color:var(--fx-alert-paper);background:var(--fx-alert-paper);color:#fff} #main .fluxmember-withdrawal .fluxmember-btn--danger:hover{border-color:var(--fx-k1);background:#fff;color:var(--fx-alert-paper)} /* 13-2 예치금: 상단 잔액 + 내역 표를 흰 그룹 카드로(적립금과 같은 모양) */ #main .fhs-dep .fxu-card--hero{display:flex;flex-direction:column;align-items:flex-start;gap:var(--fx-sp-1);margin:0 0 var(--fx-sp-4);padding:var(--fx-sp-6);border:1px solid var(--fx-edge-paper);border-radius:var(--fx-radius-l);background:#fff;box-shadow:none;text-align:left} #main .fhs-dep .fhs-points-label{font-size:var(--fx-size-small);font-weight:600;color:var(--fx-k2)} #main .fhs-dep .fhs-points-amount{font-size:40px;font-weight:700;line-height:1.15;letter-spacing:-.03em;color:var(--fx-k1);font-variant-numeric:tabular-nums} #main :is(.fhs-dep__table,.fhs-invoice-list .fhs-table){width:100%;overflow:hidden;border:1px solid var(--fx-edge-paper);border-collapse:separate;border-spacing:0;border-radius:var(--fx-radius-l);background:#fff;box-shadow:none} #main :is(.fhs-dep__table,.fhs-invoice-list .fhs-table) th{padding:var(--fx-sp-3) var(--fx-sp-6);border:0;border-bottom:1px solid var(--fx-edge-paper);background:var(--fx-paper-2);font-size:var(--fx-size-min);font-weight:600;color:var(--fx-k2);text-align:left} #main :is(.fhs-dep__table,.fhs-invoice-list .fhs-table) td{padding:var(--fx-sp-3) var(--fx-sp-6);border:0;border-top:1px solid var(--fx-edge-paper);font-size:15px;color:var(--fx-k1);font-variant-numeric:tabular-nums} #main :is(.fhs-dep__table,.fhs-invoice-list .fhs-table) tbody tr:first-child td{border-top:0} #main :is(.fhs-dep__table,.fhs-invoice-list .fhs-table) :is(th,td).fxu-num{text-align:right} #main .fhs-dep__amt{font-weight:700} /* 13-3 증빙(세금계산서/현금영수증): 프로필 폼 카드 + 발행 내역 카드 */ #main .fhs-mypage-section:has(.fhs-invoice-profile-form)>h3,#main .fhs-invoice-list>h3{margin:0 0 var(--fx-sp-1);padding:0;border:0;font-size:var(--fx-size-lead);font-weight:700;letter-spacing:-.02em;color:var(--fx-k1)} #main .fhs-mypage-section:has(.fhs-invoice-profile-form)>.description{margin:0 0 var(--fx-sp-4);font-size:var(--fx-size-small);color:var(--fx-k3)} #main .fhs-invoice-profile-form{max-width:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--fx-sp-4) var(--fx-sp-6);margin:0 0 var(--fx-sp-12);padding:var(--fx-sp-6);border:1px solid var(--fx-edge-paper);border-radius:var(--fx-radius-l);background:#fff} #main .fhs-invoice-profile-form>p{margin:0} #main .fhs-invoice-profile-form>p:has(button),#main .fhs-invoice-profile-form>input[type=hidden]{grid-column:1/-1} #main .fhs-invoice-profile-form>p:first-of-type:empty{display:none} #main .fhs-invoice-profile-form label{display:block;font-size:var(--fx-size-small);font-weight:600;color:var(--fx-k1)} #main .fhs-invoice-profile-form input:not([type=hidden]){display:block;width:100%;min-height:var(--mp-field-h);margin:var(--fx-sp-2) 0 0;padding:0 var(--fx-sp-4);border:1px solid var(--fx-edge-paper-strong);border-radius:var(--fx-radius-m);background:#fff;font-size:16px;font-weight:400;color:var(--fx-k1);box-shadow:none} #main .fhs-invoice-profile-form input:focus{border-color:var(--fx-k1);outline:2px solid var(--fx-k1);outline-offset:1px} #main .fhs-invoice-list>h3{margin-bottom:var(--fx-sp-3)} #main .fhs-invoice-list td a{display:inline-flex;align-items:center;min-height:44px;color:var(--fx-k1);text-decoration:underline;text-underline-offset:3px} /* 13-4 취소·교환·반품: 흰 그룹 카드 안 행 목록 */ #main .fhs-cl__list{margin:0;padding:0;overflow:hidden;list-style:none;border:1px solid var(--fx-edge-paper);border-radius:var(--fx-radius-l);background:#fff} #main .fhs-cl__list>.fhs-cl__item{margin:0;padding:var(--fx-sp-4) var(--fx-sp-6);border:0;border-top:1px solid var(--fx-edge-paper);border-radius:0;background:#fff} #main .fhs-cl__list>.fhs-cl__item:first-child{border-top:0} #main .fhs-cl__head{display:flex;align-items:center;justify-content:space-between;gap:var(--fx-sp-3);margin:0 0 var(--fx-sp-1)} #main .fhs-cl__head strong{font-size:var(--fx-size-small);font-weight:600;color:var(--fx-k2)} #main .fhs-cl__state{display:inline-flex;align-items:center;min-height:28px;padding:0 var(--fx-sp-3);border:1px solid var(--fx-edge-paper-strong);border-radius:var(--fx-radius-pill);background:#fff;font-size:var(--fx-size-min);font-weight:600;line-height:1.2;color:var(--fx-k2);white-space:nowrap} #main .fhs-cl__state.is-rejected{border-color:var(--fx-alert-paper);color:var(--fx-alert-paper)} #main .fhs-cl__prod{margin:0;font-size:17px;font-weight:600;line-height:1.4;color:var(--fx-k1);word-break:keep-all} #main .fhs-cl__meta{display:flex;flex-wrap:wrap;gap:0 var(--fx-sp-3);margin:var(--fx-sp-1) 0 0;font-size:var(--fx-size-min);color:var(--fx-k3);font-variant-numeric:tabular-nums} #main .fhs-cl__refund{margin:var(--fx-sp-3) 0 0;font-size:var(--fx-size-small);color:var(--fx-k2);font-variant-numeric:tabular-nums} #main .fhs-cl__refund strong{margin-left:var(--fx-sp-1);font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--fx-k1)} #main .fhs-cl__note{margin:var(--fx-sp-2) 0 0;font-size:var(--fx-size-small);color:var(--fx-alert-paper)} #main .fhs-cl__item .fhs-od-btn{margin-top:var(--fx-sp-3)} /* 13-5 내 문의: 목록을 흰 그룹 카드로(행 구조는 그대로) */ #main .fhb-tickets__list{overflow:hidden;border:1px solid var(--fx-edge-paper);border-radius:var(--fx-radius-l);background:#fff} #main .fhb-tickets__item:last-child{border-bottom:0} #main a.fhb-tickets__link{padding:var(--fx-sp-3) var(--fx-sp-6)} /* 13-6 내 활동: 보기 전환 칩 + 흰 그룹 카드 목록 + 빈 상태 */ #main .fbmp-subnav{display:flex;flex-wrap:wrap;gap:var(--fx-sp-2);margin:0 0 var(--fx-sp-6);padding:0;overflow:visible;border:0} #main a.fbmp-subnav__item{display:inline-flex;align-items:center;min-height:44px;margin:0;padding:0 var(--fx-sp-4);border:1px solid var(--fx-edge-paper-strong);border-radius:var(--fx-radius-pill);background:#fff;font-size:15px;font-weight:600;color:var(--fx-k2);text-decoration:none} #main a.fbmp-subnav__item::after{display:none} #main a.fbmp-subnav__item:hover{border-color:var(--fx-k1);color:var(--fx-k1)} #main a.fbmp-subnav__item.is-on,#main a.fbmp-subnav__item.is-on:hover{border-color:var(--fx-k1);background:var(--fx-k1);color:#fff} #main a.fbmp-subnav__item:focus-visible{outline:2px solid var(--fx-k1);outline-offset:2px} #main .fbmp :is(.fluxboard-my-posts__header,.fluxboard-my-comments__header,.fluxboard-my-scraps__header,.fluxboard-my-points__header){display:flex;align-items:baseline;justify-content:space-between;gap:var(--fx-sp-3);margin:0 0 var(--fx-sp-4);padding:0 0 var(--fx-sp-3);border:0;border-bottom:1px solid var(--fx-k1)} #main .fbmp :is(.fluxboard-my-posts__title,.fluxboard-my-comments__title,.fluxboard-my-scraps__title,.fluxboard-my-points__title){margin:0;font-size:var(--fx-size-h3);font-weight:700;line-height:1.3;letter-spacing:-.025em;color:var(--fx-k1)} #main .fbmp :is(.fluxboard-my-posts__count,.fluxboard-my-comments__count,.fluxboard-my-scraps__count){margin:0;font-size:var(--fx-size-small);color:var(--fx-k2);font-variant-numeric:tabular-nums} #main .fbmp .fluxboard-my-posts__table{width:100%;overflow:hidden;border:1px solid var(--fx-edge-paper);border-collapse:separate;border-spacing:0;border-radius:var(--fx-radius-l);background:#fff} #main .fbmp .fluxboard-my-posts__table th{padding:var(--fx-sp-3) var(--fx-sp-4);border:0;border-bottom:1px solid var(--fx-edge-paper);background:var(--fx-paper-2);font-size:var(--fx-size-min);font-weight:600;color:var(--fx-k2);text-align:left} #main .fbmp .fluxboard-my-posts__table td{padding:var(--fx-sp-3) var(--fx-sp-4);border:0;border-top:1px solid var(--fx-edge-paper);font-size:15px;color:var(--fx-k1);font-variant-numeric:tabular-nums} #main .fbmp .fluxboard-my-posts__table tbody tr:first-child td{border-top:0} #main .fbmp :is(.fluxboard-my-comments__list,.fluxboard-my-scraps__list){margin:0;padding:0;overflow:hidden;list-style:none;border:1px solid var(--fx-edge-paper);border-radius:var(--fx-radius-l);background:#fff} #main .fbmp :is(.fluxboard-my-comments__item,.fluxboard-my-scraps__item){margin:0;padding:var(--fx-sp-4) var(--fx-sp-6);border:0;border-top:1px solid var(--fx-edge-paper);border-radius:0;background:#fff} #main .fbmp :is(.fluxboard-my-comments__item,.fluxboard-my-scraps__item):first-child{border-top:0} #main .fbmp .fluxboard-my-posts__empty,#main .fbmp :is(.fluxboard-my-comments__empty,.fluxboard-my-scraps__empty,.fluxboard-my-points__empty){display:grid;align-content:start;justify-items:start;gap:var(--fx-sp-3);margin:0;padding:var(--fx-sp-8);border:1px dashed var(--fx-edge-paper-strong);border-radius:var(--fx-radius-l);background:var(--fx-tint);text-align:left} #main .fbmp .fbmp-empty__title{margin:0;font-size:var(--fx-size-h3);font-weight:700;line-height:1.3;letter-spacing:-.025em;color:var(--fx-k1)} #main .fbmp .fbmp-empty__desc{max-width:520px;margin:0;font-size:16px;line-height:1.7;color:var(--fx-k2)} #main .fbmp a.fbmp-empty__link{display:inline-flex;align-items:center;justify-content:center;min-height:var(--mp-btn-h);margin-top:var(--fx-sp-2);padding:0 var(--mp-btn-px);border:1px solid var(--fx-k1);border-radius:var(--fx-radius-pill);background:var(--fx-k1);font-size:var(--mp-btn-fs);font-weight:600;color:#fff;text-decoration:none} #main .fbmp a.fbmp-empty__link:hover{border-color:#000;background:#000;color:var(--fx-brand)} #main .fbmp a.fbmp-empty__link:focus-visible{outline:2px solid var(--fx-k1);outline-offset:2px} @media (max-width:768px){ #main .fhx-fcard,#main .fluxmember-marketing,#main .fluxmember-withdrawal .fluxmember-notice,#main .fluxmember-withdrawal #fluxmember-withdrawal-form{padding-left:var(--fx-sp-4);padding-right:var(--fx-sp-4)} #main .fhx-fgrid,#main .fhs-invoice-profile-form{grid-template-columns:minmax(0,1fr)} #main .fhx-fgrid .fluxmember-form__hint{padding-top:0;margin:0 0 var(--fx-sp-4)} #main .fhs-invoice-profile-form{padding:var(--fx-sp-4)} #main .fhx-fform-foot .fluxmember-btn,#main .fluxmember-withdrawal .fluxmember-btn--danger{width:100%} #main .fhx-zip .fluxmember-form__input--short{flex:1 1 120px;width:auto} #main :is(.fhs-dep__table,.fhs-invoice-list .fhs-table) td{padding-left:var(--fx-sp-4);padding-right:var(--fx-sp-4);border-top:0} #main :is(.fhs-dep__table,.fhs-invoice-list .fhs-table) tbody tr{border-bottom:1px solid var(--fx-edge-paper)} #main :is(.fhs-dep__table,.fhs-invoice-list .fhs-table) tbody tr:last-child{border-bottom:0} #main .fhs-dep__table td:nth-child(-n+3)::before{margin-right:var(--fx-sp-2)} #main .fhs-dep .fhs-points-amount{font-size:32px} #main .fhs-cl__list>.fhs-cl__item{padding-left:var(--fx-sp-4);padding-right:var(--fx-sp-4)} #main a.fhb-tickets__link{padding-left:var(--fx-sp-4);padding-right:var(--fx-sp-4)} #main .fbmp :is(.fluxboard-my-comments__item,.fluxboard-my-scraps__item){padding-left:var(--fx-sp-4);padding-right:var(--fx-sp-4)} #main .fbmp :is(.fluxboard-my-posts__empty,.fluxboard-my-comments__empty,.fluxboard-my-scraps__empty,.fluxboard-my-points__empty){padding:var(--fx-sp-6)} } /* 14. 표면 4단·모바일 규격 (2026-10-24 마이페이지 개편) — 바탕(--mp-canvas)을 한 단 내렸으므로 흰 묶음은 진한 테두리(--mp-sheet-edge), 시트 안 구분선은 옅은 선(--mp-line), 보조 면은 --mp-inset. 정적 시트에 그림자 없음 */ /* 14-1 흰 시트 테두리 */ #main :is(.fhs-od__card,.fhs-cl__item,.fhs-od .fhs-od__card,.fhs-orders,.fhs-pts__hero.fxu-card--hero,.fhs-pts__list.fxu-card,.fhs-dep .fxu-card--hero,.fhs-dep__table,.fhs-invoice-list .fhs-table,.fhs-cl__list,.fhb-tickets__list,.fhb-wl__card,.fhb-wl__rows,.fhx-fcard,.fluxmember-marketing,.fhs-invoice-profile-form,.fbmp .fluxboard-my-posts__table,.fbmp .fluxboard-my-comments__list,.fbmp .fluxboard-my-scraps__list,.fluxmember-withdrawal #fluxmember-withdrawal-form){border-color:var(--mp-sheet-edge)} #main :is(.fhs-dep__table,.fhs-invoice-list .fhs-table) th,#main .fbmp .fluxboard-my-posts__table th,#main .fhs-od__method,#main .fhs-pts__rule{background:var(--mp-inset)} /* 빈 상태: 흰 시트 위의 점선 + 다음 행동 버튼 */ #main :is(.fhb-wish-empty,.fhb-sites__empty,.fhb-tickets__empty,.fxu-empty,.fluxshop-empty,.fxm-empty,.fx-empty),#main p.fhs-empty,#main p.fhs-empty__cta,#main .fbmp .fluxboard-my-posts__empty,#main .fbmp :is(.fluxboard-my-comments__empty,.fluxboard-my-scraps__empty,.fluxboard-my-points__empty){background:var(--mp-sheet)} /* 눌러 들어가는 행: 호버 때 안쪽 면 */ #main a.fhb-tickets__link,#main .fhs-pts__row-link{transition:background var(--fx-time-fast) var(--fx-ease-std)} #main a.fhb-tickets__link:hover,#main .fhs-pts__row-link:hover{background:var(--mp-inset)} #main a.fhb-wl__btn,#main .fluxmember-btn{transition:background var(--fx-time-fast) var(--fx-ease-std),border-color var(--fx-time-fast) var(--fx-ease-std),color var(--fx-time-fast) var(--fx-ease-std),transform .1s var(--fx-ease-std)} #main :is(a.fhb-wl__btn,.fluxmember-btn,a.fhs-btn,a.fhb-tickets__new,.fbmp a.fbmp-empty__link):active{transform:scale(.97)} #main .fhs-order-card.fhs-oc{transition:background var(--fx-time-fast) var(--fx-ease-std)} #main .fhs-order-card.fhs-oc:hover{background:var(--mp-inset)} /* 14-2 모바일(360~767): 칩·탭 36px + ::before 로 터치 영역 44px 확보, 글자 14px. 버튼 높이는 위 --mp-btn-h(40px) */ @media (max-width:767px){ #main .fluxmember-mypage__menu{padding:var(--fx-sp-1) 0} #main .fluxmember-mypage__menu-item a{position:relative;min-height:var(--mp-chip-h);padding:0 var(--fx-sp-3);font-size:14px} #main .fluxmember-mypage__menu-item a::before{display:block;content:"";position:absolute;inset:-4px 0;width:auto;height:auto;background:none;transform:none;transition:none} #main :is(a.fhb-subnav__item,.fhs-cp__chip,.fhs-pts__tab,.fxu-chip,a.fhb-tickets__tab,a.fhb-wl__tab,a.fbmp-subnav__item){position:relative;min-height:var(--mp-chip-h);padding:0 var(--fx-sp-3);font-size:14px} #main .fhs-cp__tab{min-height:var(--mp-btn-h);font-size:15px} #main :is(a.fhb-subnav__item,.fhs-cp__chip,.fhs-pts__tab,.fxu-chip,a.fhb-tickets__tab,a.fhb-wl__tab,a.fbmp-subnav__item)::before{content:"";position:absolute;inset:-4px 0} #main .fhb-subnav{gap:var(--fx-sp-2)} #main .fhs-sub-card__header h3{font-size:18px} } @media (max-width:480px){ #main :is(.fhs-mypage-title,.fluxmember-mypage__title,.fhb-tickets__title,.fhb-sites__header h3){font-size:24px} #main .fhb-home__title{font-size:18px} } /* 11. 모션 줄이기 */ @media (prefers-reduced-motion:reduce){ .fx-plugin--mypage *{transition:none!important;animation:none!important} } /* 축 라벨: 막대가 좁아 80% 와 끝 라벨(한도 값)이 겹치면 끝 라벨을 접는다(한도는 값 줄 「/ 10GB」에 있다). 「0 · 80%」는 남는다 */ @container (max-width: 200px){#main .fhb-axis span:nth-child(3){display:none}} /* 주문 상세 하단 버튼(구매확정·주문취소 등): 좁은 폭에서 100% 폭으로 쌓이지 않고 한 줄에 같은 높이로 나란히. 글자는 14px 유지, 넘치면 버튼 안에서 줄바꿈. 1개뿐이면 꽉 채운다 */ @media (max-width:767px){ #main .fhs-od__actions{align-items:stretch} #main .fhs-od__actions .fhs-od-btn{flex:1 1 0;min-width:132px;width:auto;height:auto;min-height:var(--mp-btn-h);padding-top:8px;padding-bottom:8px;font-size:14px;line-height:1.35;white-space:normal;text-align:center;word-break:keep-all} } /* 쿠폰 거름 칩(2026-10-24 r5): 360 에서 「상품」만 둘째 줄로 넘어가던 것을 한 줄로. 칩 안쪽 여백·간격을 줄이고, 더 좁으면 가로 스크롤 */ @media (max-width:480px){ #main .fhs-cp__chips{flex-wrap:nowrap;overflow-x:auto;gap:6px;scrollbar-width:none} #main .fhs-cp__chips::-webkit-scrollbar{display:none} #main .fhs-cp__chips .fhs-cp__chip{flex:0 0 auto;padding:0 10px;white-space:nowrap} } /* 주문 상세 구매확정(r5): 버튼 글자는 「구매확정」 한 줄, 적립 안내는 버튼 아래 캡션 */ #main .fhs-od__confirm{display:flex;flex-direction:column;align-items:flex-start;gap:var(--fx-sp-1);order:-1} #main .fhs-od__confirm .fhs-od-btn{white-space:nowrap} #main .fhs-od__confirm-cap{margin:0;font-size:var(--fx-size-min);line-height:1.5;color:var(--fx-k3)} @media (max-width:767px){ #main .fhs-od__actions:has(.fhs-od__confirm){align-items:flex-start} #main .fhs-od__confirm{flex:1 1 0;min-width:132px;align-items:stretch} } /* 상담 내역 탭(fluxcs .fcs-my) — 카드 나열 대신 선으로 나눈 목록, 기존 마이페이지 토큰 */ #main .fcs-my__list{border-top:1px solid var(--fx-line)} #main .fcs-my__item{border-bottom:1px solid var(--fx-line)} #main .fcs-my__summary{min-height:56px;padding:var(--fx-sp-3) var(--fx-sp-1)} #main .fcs-my__summary:hover{background:var(--fx-canvas)} #main .fcs-my__summary:focus-visible{outline:2px solid var(--fx-k1);outline-offset:-2px} #main .fcs-my__title{font-size:16px;font-weight:600;color:var(--fx-k1)} #main .fcs-my__date{font-size:var(--fx-size-small);color:var(--fx-k3)} #main .fcs-my__state{font-size:var(--fx-size-small);font-weight:600;color:var(--fx-k1)} #main .fcs-my__thread{padding:var(--fx-sp-2) var(--fx-sp-1) var(--fx-sp-5)} #main .fcs-my__who{font-size:12px;font-weight:600;color:var(--fx-k3)} #main .fcs-my__text{font-size:15px;line-height:1.7;color:var(--fx-k2)} #main .fcs-my__lead,#main .fcs-my__empty{font-size:var(--fx-size-small);color:var(--fx-k3)} #main .fcs-my__page{min-height:44px;min-width:44px;color:var(--fx-k1);font-weight:600} #main .fcs-my__page:focus-visible{outline:2px solid var(--fx-k1);outline-offset:2px} /* 상태 표시 (2026-11-01 생동감): 이용 중 = 점이 숨 쉬듯 번짐(3.6초), 처리·진행 중 = 뱃지 아래 얇은 막대로 빛이 흐름(글자·점 고정), 끝난 상태(paid·delivered·approved·취소·실패·종료)는 점도 흐름도 없다. 목록형(주문·카드·클레임·문의 내역)은 행이 많아 점만 둔다. 움직임은 모션 허용일 때만 */ #main :is(.fhs-badge--active,.fhs-badge--processing,.fhs-badge--shipped,.fhs-badge--requested,.fhb-tickets__status--checking,.fhb-tickets__status--working)::before{content:"";flex:0 0 6px;width:6px;height:6px;margin-right:6px;border-radius:50%;background:currentColor} @media (prefers-reduced-motion:no-preference){ @keyframes fx-mp-live{0%{transform:scale(1);opacity:.3}70%,100%{transform:scale(2.4);opacity:0}} @keyframes fx-mp-flow{from{background-position:-60% 0,0 0}to{background-position:160% 0,0 0}} #main .fhs-badge--active{position:relative} #main .fhs-badge--active::after{content:"";position:absolute;left:var(--fx-sp-3);top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;border:1.5px solid currentColor;background:color-mix(in srgb,currentColor 14%,transparent);box-sizing:border-box;opacity:0;pointer-events:none;animation:fx-mp-live 3s cubic-bezier(.2,.5,.4,1) infinite} #main :is(.fhs-badge--processing,.fhs-badge--shipped,.fhs-badge--requested,.fhb-tickets__status--checking,.fhb-tickets__status--working){position:relative} #main :is(.fhs-badge--processing,.fhs-badge--shipped,.fhs-badge--requested,.fhb-tickets__status--checking,.fhb-tickets__status--working)::after{content:"";position:absolute;left:var(--fx-sp-3);right:var(--fx-sp-3);bottom:-5px;height:2px;border-radius:1px;pointer-events:none;background-image:linear-gradient(90deg,transparent,color-mix(in srgb,currentColor 55%,transparent),transparent),linear-gradient(color-mix(in srgb,currentColor 26%,transparent),color-mix(in srgb,currentColor 26%,transparent));background-repeat:no-repeat;background-size:55% 100%,100% 100%;background-position:-60% 0,0 0;animation:fx-mp-flow 1.4s linear infinite} /* 행이 많은 목록은 점만 (이용 중 번짐·진행 흐름 모두 끈다) */ #main :is(.fhs-orders,.fhs-oc,.fhs-cl,.fhb-tickets) :is(.fhs-badge--active,.fhs-badge--processing,.fhs-badge--shipped,.fhs-badge--requested,.fhb-tickets__status--checking,.fhb-tickets__status--working)::after{content:none;animation:none} /* 자동 결제 켜짐 점 */ #main .fhs-sub-autorenew--on dd:nth-of-type(1){position:relative} #main .fhs-sub-autorenew--on dd:nth-of-type(1)::after{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:50%;border:2px solid var(--fx-k1);background:color-mix(in srgb,var(--fx-k1) 12%,transparent);box-sizing:border-box;opacity:0;pointer-events:none;animation:fx-mp-live 3s cubic-bezier(.2,.5,.4,1) infinite} /* 내 사이트: 살아 있는 체험(데모) 점 (종료 카드는 --ended 로 제외, 이용 중 점은 플러그인 CSS 가 이미 번짐) */ #main .fhb-site-card--demo:not(.fhb-site-card--ended) .fhb-site-card__status--demo{position:relative} #main .fhb-site-card--demo:not(.fhb-site-card--ended) .fhb-site-card__status--demo::after{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;border:1.5px solid var(--fx-k2);background:color-mix(in srgb,var(--fx-k2) 12%,transparent);box-sizing:border-box;opacity:0;pointer-events:none;animation:fx-mp-live 3s cubic-bezier(.2,.5,.4,1) infinite} } /* 화면 이동 (2026-11-01): 마이페이지 탭 링크 이동은 짧은 페이드(미지원 브라우저는 이 규칙을 무시). 헤더도 같은 화면이라 눈에 띄는 변화 없음 */ @view-transition{navigation:auto} ::view-transition-old(root),::view-transition-new(root){animation-duration:.17s;animation-timing-function:ease-out} @media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}} /* 본문 첫 표시: 옅게 올라옴 한 단계(본문 덩어리 하나만, 줄줄이 등장 없음) */ @media (prefers-reduced-motion:no-preference){ @keyframes fx-mp-rise{from{opacity:0}to{opacity:1}} #main .fluxmember-mypage__content{animation:fx-mp-rise .25s var(--fx-ease-out) both} } /* 눌림 100ms: 메뉴·탭 (버튼은 위에서 이미 .97). 마우스 기기에서만 카드가 1px 떠오른다 */ #main .fluxmember-mypage__menu-item a{transition:background var(--fx-time-fast) var(--fx-ease-std),color var(--fx-time-fast) var(--fx-ease-std),transform .1s var(--fx-ease-out)} #main .fhs-sub-tab{transition:color var(--fx-time-fast) var(--fx-ease-std),transform .1s var(--fx-ease-out)} #main .fhb-sites-tab a.fhb-subtab{transition:color .2s var(--fx-ease-std),transform .1s var(--fx-ease-out)} #main :is(.fluxmember-mypage__menu-item a,.fhs-sub-tab,.fhb-sites-tab a.fhb-subtab):active{transform:scale(.98)} @media (hover:none),(pointer:coarse){#main .fhb-site-card:hover{transform:none;box-shadow:none;border-color:var(--mp-sheet-edge)}} /* ===== 생동감 2차 (2026-11-01): 사이트 카드 빛 줄기·막대 빛·알림 뱃지 등장 ===== */ @media (prefers-reduced-motion:no-preference){ @keyframes fx-mp-sweep{0%{transform:translateX(-110%)}55%,100%{transform:translateX(370%)}} @keyframes fx-mp-shine{0%{transform:translateX(-100%)}55%,100%{transform:translateX(260%)}} @keyframes fx-mp-pop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}} /* 이용 중 카드 윗선: 2px 빛 줄기가 5초에 한 번 가로지른다(주의·위험·종료·체험 종료·흐림 카드는 없음) */ #main .fhb-site-card--ok:not(.fhb-site-card--dim)::after{content:"";position:absolute;left:0;top:0;width:34%;height:1px;opacity:.25;background:linear-gradient(90deg,transparent,var(--fx-k1) 40%,var(--fx-k1) 60%,transparent);pointer-events:none;animation:fx-mp-sweep 7s var(--fx-ease-in-out,ease-in-out) infinite} /* 사용량 막대: 차오른 뒤 채운 부분 위로 빛이 3.5초 주기로 지나간다 */ #main .fhb-site-card--ok:not(.fhb-site-card--dim) .fhb-usage__fill{position:relative;overflow:hidden} #main .fhb-site-card--ok:not(.fhb-site-card--dim) .fhb-usage__fill::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,transparent,color-mix(in srgb,#fff 22%,transparent),transparent);pointer-events:none;animation:fx-mp-shine 5s ease-in-out 1.2s infinite} /* 알림 뱃지: 숫자가 있으면 한 번 튀어 들어온다 */ html[data-fx-surface] .fhc-bell .fhc-bell__badge{animation:fx-mp-pop .4s var(--fx-ease-out) .3s both} }