/* 11/08 대표: 2차 재디자인 — 구조 그대로, 색·유리·그림자만. 값은 여기 토큰만 바꾸면 사이트 전체 강도가 바뀜.
   층은 3단계: ① 페이지 바탕 ② 유리 카드 ③ 떠 있는 것(머리 메뉴·펼침·대화상자·아래 막대·문의하기).
   유리 카드 안의 작은 것(칩·숫자 칸·목록 줄·입력칸)은 유리로 만들지 않음. 무거운 회색 그림자 대신 빛(테두리·반사)으로 입체감. */
:root {
  /* 색 */
  --c-text: #1D1D1F; --c-text-2: #6E6E73;
  --c-main: #1B3A3D;      /* 주 버튼·선택 메뉴 */
  --c-point: #208888;     /* 강조 한 단어·링크·아이콘 */
  --c-soft: #E8F4F3;      /* 선택 칩·배지 바탕 */
  --c-inner: #F5F8F8;     /* 유리 카드 안 작은 칸 */
  /* 유리(중) */
  /* 11/08 대표: 강(强)으로 결정 */
  --glass-bg: rgba(255, 255, 255, .5);
  --glass-sheen: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 22%);
  --glass-blur: blur(28px) saturate(170%);
  --glass-edge: inset 0 0 0 1px rgba(255, 255, 255, .8), inset 0 1.5px 0 #fff, inset 0 -1px 0 rgba(27, 58, 61, .07), 0 0 0 1px rgba(27, 58, 61, .07);
  --glass-shadow: 0 1px 2px rgba(16, 40, 40, .06), 0 16px 40px rgba(16, 40, 40, .1);
  /* 떠 있는 것 */
  --glass-float-bg: rgba(255, 255, 255, .72);
  --glass-float-blur: blur(28px) saturate(150%);
  --glass-float: 0 2px 4px rgba(16, 40, 40, .06), 0 18px 44px rgba(16, 40, 40, .12);
  /* 버튼 */
  --btn-main-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 6px 16px rgba(27, 58, 61, .22);
  --btn-main-press: inset 0 1px 0 rgba(255, 255, 255, .18), 0 3px 8px rgba(27, 58, 61, .2);
  /* 모서리 */
  --r-card: 24px; --r-small: 16px; --r-input: 12px;
  /* 예전 유리 변수도 새 토큰을 따르게 */
  --gl-glass: var(--glass-sheen), var(--glass-bg);
  --gl-glass-hi: rgba(255, 255, 255, .78);
  --gl-blur: var(--glass-blur);
  --gl-edge: var(--glass-edge);
  --gl-shadow: var(--glass-shadow);
}
/* 다른 강도(비교용): html[data-glass="low|mid"] — 기본은 강 */
html[data-glass="low"] { --glass-bg: rgba(255, 255, 255, .82); --glass-blur: blur(12px) saturate(120%); --glass-sheen: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 20%);
  --glass-shadow: 0 1px 2px rgba(16, 40, 40, .04), 0 8px 24px rgba(16, 40, 40, .06); }
html[data-glass="mid"] { --glass-bg: rgba(255, 255, 255, .66); --glass-blur: blur(20px) saturate(140%); --glass-sheen: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 20%);
  --glass-edge: inset 0 0 0 1px rgba(255, 255, 255, .7), inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(27, 58, 61, .05), 0 0 0 1px rgba(27, 58, 61, .06);
  --glass-shadow: 0 1px 2px rgba(16, 40, 40, .05), 0 12px 32px rgba(16, 40, 40, .08); }

/* ① 페이지 바탕: 흰색 → 아주 옅은 틸, 위쪽에 빛 번짐 두 곳(6% 이하). 장식용 덩어리·떠다니는 아이콘은 끔 */
html { background: radial-gradient(900px 520px at 88% -8%, rgba(32, 136, 136, .06), rgba(32, 136, 136, 0) 70%),
  radial-gradient(700px 420px at 6% 2%, rgba(27, 58, 61, .04), rgba(27, 58, 61, 0) 70%),
  linear-gradient(180deg, #FAFAFA, #F3F8F8) fixed #FAFAFA; min-height: 100%; }
html body, html .gl-on body, html body.gl-on { background: transparent !important; }
.gl-blob, .gl-fl, .nh-glassbg { display: none !important; }
body { color: var(--c-text); }

/* backdrop-filter가 안 되는 브라우저: 흰 92% 단색 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass-bg: rgba(255, 255, 255, .92); --glass-float-bg: rgba(255, 255, 255, .95); }
}

/* ② 유리 카드 — 각 화면의 큰 칸(구조·크기는 그대로, 표면만) */
.nh-left, .nh-steps,
.rq-main .m-form, .rq-prev, .rq-hero, .rq-main .rt-box,
.iq-card, .iq-my__list, .iq-my__view, .iq-adm__list, .iq-adm__view,
.my-side, .my-shell .m-panel > .m-list > .m-row, #pf-box .m-row,
.pf-f2, .pf-list, .pf-askband, .pf-side, .cs-band, .fsw-band,
.sg .m-steps, .sg #step-account, .sg #step-consent, .sg #step-mail, .sg #step-role,
.gl-on .gl-form, .gl-on .m-main > .m-form, .gl-on .m-main > form.m-form {
  background: var(--glass-sheen), var(--glass-bg) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important; backdrop-filter: var(--glass-blur) !important;
  box-shadow: var(--glass-edge), var(--glass-shadow) !important;
}

/* ③ 떠 있는 것: 머리 메뉴·펼침·대화상자·아래 막대·[문의하기] */
.ad-head > .ad-wrap, .m-top__in, .gl-on:not(.gl-home) .ad-head > .ad-wrap, .gl-on .m-top__in,
.hd-scrolled .ad-head > .ad-wrap, .hd-scrolled .m-top__in, .gl-scrolled .ad-head > .ad-wrap, .gl-scrolled .m-top__in {
  background: var(--glass-sheen), var(--glass-float-bg) !important;
  -webkit-backdrop-filter: var(--glass-float-blur) !important; backdrop-filter: var(--glass-float-blur) !important;
  box-shadow: var(--glass-edge), var(--glass-float) !important;
}
.dd-pn, .acct-pop, .bell-pop, .rq-dock, .iq-pn, .ud-pop, .us-list {
  background: var(--glass-sheen), var(--glass-float-bg) !important;
  -webkit-backdrop-filter: var(--glass-float-blur) !important; backdrop-filter: var(--glass-float-blur) !important;
  box-shadow: var(--glass-edge), var(--glass-float) !important;
}
.iq-fab { box-shadow: var(--btn-main-shadow), 0 10px 24px rgba(27, 58, 61, .2) !important; }

/* 버튼: 주 버튼 = 짙은 틸 채움 + 위쪽 안쪽 빛 + 연한 그림자, 누르면 1px 내려감 */
.m-btn--primary, .nh-cta, .acct > a.acct-join, .iq-btn--p, .iq-send {
  background: var(--c-main) !important; color: #fff !important; box-shadow: var(--btn-main-shadow) !important;
  transition: transform .15s, box-shadow .15s, background .15s !important;
}
.m-btn--primary:hover, .nh-cta:hover, .acct > a.acct-join:hover, .iq-btn--p:hover { background: #224a4e !important; }
.m-btn--primary:active, .nh-cta:active, .acct > a.acct-join:active, .iq-btn--p:active, .iq-send:active { transform: translateY(1px) !important; box-shadow: var(--btn-main-press) !important; }
@media (prefers-reduced-motion: reduce) { .m-btn--primary, .nh-cta, .iq-send { transition: none !important; } }
/* 화살표 동그라미는 포인트 틸 하나만 */
.nh-cta__go { background: var(--c-point) !important; color: #fff !important; }
/* 화면마다 깔려 있던 장식용 빛 덩어리 끄기(페이지 바탕은 위 html 하나로) */
body.adm-g::before, .dg-bg, body:has(.cs-grid)::before, .nh::before, .pf-main::before, body.rq-page::before, body.sg::before { background: none !important; }
/* 11/08 아이패드(761~1023px): 메뉴 5개 + 계정 단추가 한 줄에 다 들어가게 촘촘히(오른쪽 잘림 고침) */
@media (min-width: 761px) and (max-width: 1023px) {
  .ad-head > .ad-wrap, .m-top__in { padding-left: 16px !important; padding-right: 10px !important; gap: 8px !important; }
  .ad-head__nav.dd-nav, .m-nav.dd-nav { gap: 0 !important; }
  .dd-nav .dd-bt, .dd-nav > a.dd-solo { padding: 0 7px !important; font-size: 14.5px; letter-spacing: -.02em; }
  .dd-nav .dd-it--cre { margin-left: 2px; } .dd-nav .dd-it--cre > .dd-bt { padding: 0 8px 0 11px !important; }
  .dd-bt svg { width: 13px; height: 13px; }
  .dd-bt.has-first .nav-first { left: 7px; }
  .acct { gap: 6px !important; }
  .acct > a.acct-login, .acct > a.acct-join { padding: 0 12px !important; font-size: 14px; gap: 5px; }
  .acct > a.acct-login::before { display: none; }
  .acct-btn .acct-label { display: none; }
  .acct-btn { padding: 3px !important; }
}
/* 11/08 휴대폰 정렬: 떠 있는 머리 메뉴 위 틈으로 아래 글이 비치던 것 → 위쪽 틈은 바탕색으로 덮고 아래로 부드럽게 사라지게 */
.ad-head, .m-top { background: linear-gradient(180deg, rgba(248, 251, 251, .97), rgba(248, 251, 251, .9) 62%, rgba(248, 251, 251, 0)) !important; }
@media (max-width: 760px) {
  /* 의뢰서 예시: 유리 카드 속 작은 칸은 옅은 바탕만, 버튼은 두 줄 칸에 맞춰 반듯하게 */
  .rq-main .rq-ex { background: var(--c-inner) !important; box-shadow: none !important; padding: 14px !important; }
  .rq-ex__chips { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; }
  .rq-ex__chip { display: flex !important; align-items: center; gap: 6px; width: 100%; min-width: 0; justify-content: flex-start; padding: 0 12px !important; font-size: 14px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
  /* 아래 '의뢰 올리기' 막대가 있는 화면은 [문의하기] 단추를 숨김(겹침 방지), 막대 글자 칸 넓히기 */
  body.rq-page .iq-fab { display: none !important; }
  .rq-dock__dots { display: none !important; }
}
/* 11/08 대표: 알림·채팅·계정·펼침 메뉴처럼 글 위에 뜨는 판은 뒤가 비치면 읽기 힘듦 → 거의 불투명한 흰 판 + 강한 흐림 */
:root { --pop-bg: #FCFEFE; } /* 머리 메뉴(유리) 안에 들어 있어 겹친 흐림이 안 먹음 → 불투명 */
.bell-pop, .bell-pop.nf, .nf, .acct-pop, .dd-pn, .iq-pn, .ud-pop, .us-list, .chat-pop, dialog {
  background: var(--pop-bg) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(27, 58, 61, .08), var(--glass-float) !important;
}

/* ───── 11/09 가상 고객 1000명 시험 ───── */
/* (5) 손가락으로 누르기엔 작던 단추: 보이는 모양은 그대로, 터치 기기에서만 누르는 영역을 44px로 넓힘(투명 영역) */
@media (pointer: coarse) {
  .fav--small, .pf-hv__c, .d-link, .pf-nm, .nh-cre, .cmp__go, .g-more, .d-rv__why, .pf-askband__alt, .cr-link, .rq-like__more, .dd-solo, .g-cta__sub, .iq-faq__more, .iq-more { position: relative; }
  .fav--small::after, .pf-hv__c::after, .d-link::after, .pf-nm::after, .nh-cre::after, .cmp__go::after, .g-more::after, .d-rv__why::after, .pf-askband__alt::after, .cr-link::after, .rq-like__more::after, .g-cta__sub::after, .iq-faq__more::after, .iq-more::after, .dd-solo::before {
    content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
  /* 맥 방식 닫기 동그라미(18px): 안쪽 투명 <i>가 누르는 영역 — 18 + 13×2 = 44px. 동그라미 크기·위치는 그대로
     (첫 판은 투명 테두리였는데 동그라미 크기가 !important로 고정돼 있어 동그라미가 안 보이게 됨 → 바꿈) */
  .nf-x > i { inset: -13px !important; }
  .cr-x { border: 0 !important; left: 17px !important; top: 16px !important; }
  /* 거래 화면 위쪽 아이콘 단추(신고·차단·프로필·확인서) */
  .d-main .d-head__acts > .m-btn:not(#d-renew) { flex: none; width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
  .d-main .d-head__acts { flex-wrap: wrap; }
  /* 두 번째 시험 뒤 남은 것: 관리자 기간 단추·매출 단추, 작품 밀기 손잡이, 마이페이지 접기 단추 */
  .rev-seg button { min-height: 44px; }
  .pf-sl__k::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; }
  .my-fold { min-width: 44px; }
  .ms-calc__f input[type="range"] { min-height: 44px; }
  .pf-rng input { top: -20px; height: 44px; }
  .pf-rng input::-webkit-slider-thumb { width: 26px; height: 26px; }
  .pf-rng input::-moz-range-thumb { width: 26px; height: 26px; }
  /* 약관 동의 줄 */
  .m-check label { display: inline-block; padding-block: 8px; }
}
/* (6) 연한 글씨: 같은 색 계열에서 글자색만 조금 진하게(대비 4.5 이상) */
/*    (첫 판은 다른 규칙에 밀려 안 먹었음 → 두 번째 시험에서 발견, !important로 확정) */
.dd-tag { color: #156e6e !important; }
.cmp__star { color: #865800 !important; }
.cr-d.is-hot { color: #9a4021 !important; }
.cp-ttl, .cp-foot { color: #5b5b62 !important; }
.cp-st.is-y { color: #6e4600 !important; } .cp-st.is-n { color: #5b5b62 !important; }
.pf-fc__ws { color: #0d6670 !important; }
.rq-like__more, .cr-qf__more, .cr-link.cr-qf__more { color: #12605f !important; }
.rq-hero__free { background: #17706f !important; }
.fav__t { color: #12605f; }
/* (7) 아주 좁은 화면(340px 이하 = 작은 휴대폰 + 글자 크게): 머리 막대의 [회원가입]이 ☰ 메뉴를 화면 밖으로 밀어내던 것 → 회원가입은 ☰ 메뉴 안에서 */
@media (max-width: 340px) {
  .ad-head .acct > a.acct-join, .ad-head a.acct-join { display: none !important; }
  /* 로그인한 머리 막대(채팅·알림·내 정보 + ☰)가 화면 밖으로 밀리던 것 → 조금씩 줄여 한 줄에 */
  .ad-head > .ad-wrap { padding-left: 10px !important; padding-right: 6px !important; gap: 6px; }
  .ad-head .ad-head__brand { font-size: 17px; }
  .ad-head .acct { gap: 4px; }
  .ad-head .bell-btn, .ad-head .acct-btn { width: 40px !important; min-width: 40px; height: 40px; padding: 0 !important; }
  .ad-head .h-menu__btn { width: 40px; height: 40px; }
}
@media (max-width: 340px) {
  /* 작품 목록 두 줄이 너무 좁아 제목·'미리보기' 표시가 잘리던 것 → 한 줄 */
  .pf-grid:not(.is-list), .pf-grid.is-list { grid-template-columns: minmax(0, 1fr) !important; }
  /* 의뢰 자세히 보기의 예산·마감·자리 숫자가 '35,0…'로 잘리던 것 → 줄바꿈 허용·조금 작게 */
  .cr-kv dd { white-space: normal; overflow: visible; font-size: 15px; word-break: keep-all; }
}
/* 11/09 두 번째 시험 뒤 남은 연한 글씨 */
.rq-hero__doc b { color: #5b5b62 !important; }
.rq-repeat__toggle small { color: #9a4021 !important; }
#p-profile .pe-pack[data-tier="premium"] h4 { color: #9a4021; }
.biz-info { width: 100%; margin: 10px 0 0; font-size: 12px; line-height: 1.6; color: #5b5b62; word-break: keep-all; }

/* 11/10 세 번째 시험: 휴대폰+글자 크게에서 [원본 열기]가 아래 막대에 가려 누르기 힘든 경우(3명) → 화면 안으로 끌어올 때 아래 막대만큼 띄움 */
@media (max-width: 899px) { .d-main button, .d-main a, .rq-main button { scroll-margin-bottom: 110px; } }