@charset "utf-8"; /* ================================================================================================== 회원 스킨(member/basic) 고유 틀 — Version 2.0.0 · Last modified 2026-10-16 Modular Web Architecture · Powered by Orangecommunication · www.oranc.net ================================================================================================== 쓰는 화면 — 회원 화면 전부. 셸·진입이 asset_head('guava::css/member.css') 로 건다(화면마다 적지 않는다). ⛔ **글자를 작게 하지 않는다 — 기준은 1em(본문)이다.** (사용자 지시 2026-09-30) 작게 할 자리는 **사용자가 정한다** — 표 안의 설명(c-help) 정도다. 그 밖에는 `font-size` 를 **아예 적지 않는다**(상속). 크기를 적으면 화면마다 기준이 갈리고, 읽는 사람에게는 이유 없이 작아진 글자로만 보인다. 큰 쪽(제목·이름)은 --font-size-lg 로 명시해도 된다. ⛔ **크기를 적어야 한다면** 사이트가 준 네 단계만 읽는다 — `var(--font-size-base|sm|xs|lg)`(main variables.css "콘텐츠 뿌리"). 0.92em·1.05em 처럼 제멋대로인 배수를 적으면 사이트가 `--content-font` 한 값으로 콘텐츠 글자를 조절할 때 이 화면만 어긋난다 (사용자 지시 2026-09-30). 본문 크기면 **아예 적지 않는다**(상속). 반응형 축소도 사이트 몫이라 미디어쿼리에 크기를 두지 않는다 — 여기 남는 것은 치수(px)뿐이다. ⚠ `rem` 은 셸(헤더·푸터)의 축이다 — 콘텐츠인 이 파일에서 쓰면 콘텐츠 기준을 빠져나간다. ⚠ 부모가 이미 크기를 정한 자리에 **또 배수를 걸지 않는다**(0.95em 안의 1.15em 은 곱해진다). ★ **접두가 `sk-` 가 아니라 `c-` 인 것은 일부러다.** 회원 화면은 **기본 UI 를 공유**한다 — 게시판처럼 스킨마다 모양이 갈리는 자리가 아니라 사이트의 기본 모양 그대로 돈다. 그런데도 스킨 폴더에 있는 것은 **나중에 변형이 생길 때를 위해 미리 갈라 둔 것**이다. 자리는 스킨이되 이름은 사이트 축을 따른다. ⚠ 규칙 위반처럼 보여 `sk-` 로 바꾸고 싶어지는 자리다 — **바꾸지 않는다.** 게시판 네 스킨(sk-)과 일부러 다르다. 정본은 global-template "스킨이 제 CSS 를 갖는다" 의 ★ 예외 절(2026-09-30 사용자 결정). ⛔ **공통 컴포넌트를 여기 두지 않는다.** c-btn·c-input·c-select·c-check·c-table·c-help·c-notice· c-req·c-empty·l-actions·u-* 는 **사이트 소유**다(public_html//asset/css/ 여섯 장, global-template "공통 UI class"). 여기 다시 적으면 사이트가 색·치수를 바꿔도 이 화면만 안 따라간다. 여기 있는 것은 **이 스킨에만 있는 틀**뿐이다: c-steps 가입 진행 표시 (약관 → 유형 → … → 완료) c-agree 약관 동의 묶음 (본문 + 동의 체크) c-hero 마이페이지 머리 — 로그인한 내 계정 요약 ※ 이름이 내용과 다르다 — 큰 이미지·CTA 가 있는 웹의 'hero' 가 아니다. 바꿀 때 같이 손본다 c-cardnav 마이페이지 카드형 이동 버튼 c-extcard 회원유형 카드 — 가진 자격마다 하나 (shared/ext.cards) c-alert 화면 안 오류 한 줄 (아래 ※) c-cellform 표 칸 안의 작은 버튼 자리 (연결 해제 폼 · 연결하기 링크) ※ c-alert 를 왜 두나 — 오류 문장의 정본은 flash() 다(사이트 c-flash). 하지만 flash 는 **리다이렉트로 화면이 바뀔 때**의 자리다. 가입의 유형·기업 확인 화면은 POST 를 받고 **그 자리에서 다시 그리므로** flash 에 담으면 다음 화면에서야 뜬다. 그래서 화면 안에 서는 한 줄이 따로 필요하다. ★ **색·치수는 사이트 토큰을 읽는다**(var(--color-*)·var(--radius-*)) — 이 파일에 색값을 박지 않는다. 그래서 같은 스킨이 main 에서도 gwizard 에서도 그 사이트 색으로 뜬다. ※ 레거시(_skin/member/basic/skin.css 의 #register_stepbox01·member_check·mypage_wrap)를 참조해 구성을 옮겼다. 아이콘 그림도 그 스킨에서 가져왔다(asset/img/, 2026-09-24 사용자 지시) — **넷뿐이라 단계 전부에 주지 못한다**(아래 c-steps 아이콘 블록 ⚠). ================================================================================================== */ /* ══════════════════════════════════════════════════════════════════════════════════════════════ 가입 진행 표시 — c-steps ══════════════════════════════════════════════════════════════════════════════════════════════ */ /* 단계 수는 가입마다 다르다 — 본인인증은 설정·소셜 여부로, 기업 확인은 회원유형으로 늘고 준다 (app/guava/modules/member/user/join.php 의 $steps). 그래서 폭을 개수로 나눈다(flex:1) — 칸 수를 CSS 가 모른다. */ .c-steps {display:flex; max-width:800px; margin:0 auto 40px; padding:0; list-style:none;} .c-steps__item {position:relative; flex:1; text-align:center; line-height:1.3;} /* 단계 사이를 잇는 점선 — 마지막 칸 오른쪽엔 긋지 않는다. 원(56px)의 한가운데 높이에 맞춘다. z-index:-1 로 원 뒤에 깔아, 원이 선을 덮게 한다. */ .c-steps__item:not(:last-child)::before {content:''; position:absolute; top:28px; left:50%; width:100%; height:0; border-top:1px dashed var(--color-disabled); z-index:-1;} /* 번호 원 — 지난 단계·남은 단계는 회색, 지금 단계만 사이트 주색. 아이콘이 붙는 단계는 아래에서 숫자를 감추고 그림을 깐다(그림이 없는 단계는 숫자가 그대로 남는다). */ /* ⚠ 2026-09-30 **색을 중립으로 바꿨다**(사용자 지적) — 전엔 남은 단계도 지난 단계도 바탕이 `--color-notice-bg`(#fff8f2, 연한 주황)라 ① 색이 이 화면의 것이 아니었고 ② 아래 is-done 과 바탕이 같아 "어디까지 왔는지" 가 글자색으로만 갈렸다. 지금은 셋이 뚜렷이 갈린다: 남은 단계 중립 회색(KRDS gray-5) · 흐린 글자 지난 단계 옅은 주조색(KRDS light-secondary) · 주조색 글자 지금 단계 주조색 채움 · 흰 글자 */ .c-steps__no {position:relative; display:flex; align-items:center; justify-content:center; width:56px; height:56px; margin:0 auto 12px; border-radius:var(--radius-md); background:var(--bg-thead, #f4f5f6); color:var(--color-mute); font-size:var(--font-size-lg); font-weight:700;} .c-steps__tit {display:block; font-size:var(--font-size-sm); font-weight:700; color:var(--color-mute);} /* 지금 단계 — 원이 차고, 제목이 진해진다. */ .c-steps__item.is-on .c-steps__no {background:var(--color-primary); color:#fff; box-shadow:rgba(0, 0, 0, .22) 0 5px 18px;} .c-steps__item.is-on .c-steps__tit {color:var(--color-ink);} /* 이미 지난 단계 — 남은 단계와 구분한다(같은 회색이면 어디까지 왔는지 안 보인다). 바탕은 사이트 배지의 `c-badge--blue-light` 와 **같은 값**(KRDS light-secondary #eef2f7)이다 — 그쪽도 토큰 없이 이 값을 직접 쓴다(main ui.css "hover·pressed 색은 이 자리에서만 — 토큰 ✗"). */ .c-steps__item.is-done .c-steps__no {background:#eef2f7; color:var(--color-primary);} .c-steps__item.is-done .c-steps__tit {color:var(--color-ink);} /* 단계 아이콘 — 레거시 _skin/member/basic/img 에서 가져왔다(2026-09-24 사용자 지시). ⚠ **넷뿐이라 모든 단계에 주지 못한다** — 뜻이 맞는 자리에만 붙이고(레거시의 짝을 그대로 따른다), 회원유형·기업 확인은 원 안의 숫자가 그대로 남는다. 그림과 숫자가 같은 원 안에 서므로 섞여도 어긋나 보이지 않는다. terms ico_checkbox_checked 체크박스에 체크 — 동의 type ico_my 사람 — 어떤 회원인가 certify ico_login_certify_go 본인인증 — 본인 확인 enterprise ico_sch 돋보기 — 사업자번호로 **조회**하는 단계 form ico_file 서류 — 내 정보 입력 done ico_step_done 단계 완료 — 끝 ★ **여섯 단계 모두 그림이 있다**(2026-09-30) — 전엔 넷뿐이라 회원유형·기업 확인만 숫자가 남아 한 줄 안에서 그림과 숫자가 섞였다. 배치는 사용자 지시: 사람(ico_my)은 '회원유형' 쪽이 맞고, 정보 입력은 서류, 기업 확인은 조회를 뜻하는 것으로. 숫자는 지우지 않고 색만 투명하게 한다 — 화면에서만 감추고 읽어 주는 기계에는 남긴다. ★ 2026-09-30 **정부 표준 아이콘(KRDS)으로 바꿨다**(사용자 지시). 레거시 PNG 넉 장 (img/join_icon01~04.png — `_skin/member/basic/img` 에서 가져온 것)을 사이트가 이미 갖고 있는 KRDS 세트(`main/asset/img/icon`, krds-uiux 1.1.0)로 옮겼다. 이름이 뜻을 그대로 말하는 것을 골랐다. ★ 방식도 바뀌었다 — `background-image`(그림 그대로) → **`mask`(모양만 쓰고 색은 CSS 가 준다)**. 그래서 **밝기 반전 트릭이 필요 없다**: 지난 단계·지금 단계·남은 단계가 각자의 색을 그대로 받는다. PNG 였을 때는 회색 그림 하나를 `filter:brightness(0) invert(1)` 로 눌러 흰색을 만들었다. ⚠ mask 에는 **선(outline) 아이콘**만 쓴다 — `_fill` 계열(ico_complete_fill 등)은 색이 둘이라 mask 로 찍으면 단색 덩어리가 된다(c-notice 아이콘에서 실측, main form.css ⚠). */ .c-steps__item[data-step="terms"] .c-steps__no, .c-steps__item[data-step="type"] .c-steps__no, .c-steps__item[data-step="certify"] .c-steps__no, .c-steps__item[data-step="enterprise"] .c-steps__no, .c-steps__item[data-step="form"] .c-steps__no, .c-steps__item[data-step="done"] .c-steps__no {color:transparent;} .c-steps__item[data-step="terms"] .c-steps__no::after, .c-steps__item[data-step="type"] .c-steps__no::after, .c-steps__item[data-step="certify"] .c-steps__no::after, .c-steps__item[data-step="enterprise"] .c-steps__no::after, .c-steps__item[data-step="form"] .c-steps__no::after, .c-steps__item[data-step="done"] .c-steps__no::after {content:''; position:absolute; top:0; left:0; width:100%; height:100%; background-color:var(--color-mute); -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; -webkit-mask-size:44% auto; mask-repeat:no-repeat; mask-position:center; mask-size:44% auto;} .c-steps__item[data-step="terms"] .c-steps__no::after {-webkit-mask-image:url('/main/asset/img/icon/ico_checkbox_checked.svg'); mask-image:url('/main/asset/img/icon/ico_checkbox_checked.svg');} .c-steps__item[data-step="type"] .c-steps__no::after {-webkit-mask-image:url('/main/asset/img/icon/ico_my.svg'); mask-image:url('/main/asset/img/icon/ico_my.svg');} .c-steps__item[data-step="certify"] .c-steps__no::after {-webkit-mask-image:url('/main/asset/img/icon/ico_login_certify_go.svg'); mask-image:url('/main/asset/img/icon/ico_login_certify_go.svg');} .c-steps__item[data-step="enterprise"] .c-steps__no::after {-webkit-mask-image:url('/main/asset/img/icon/ico_sch.svg'); mask-image:url('/main/asset/img/icon/ico_sch.svg');} .c-steps__item[data-step="form"] .c-steps__no::after {-webkit-mask-image:url('/main/asset/img/icon/ico_file.svg'); mask-image:url('/main/asset/img/icon/ico_file.svg');} .c-steps__item[data-step="done"] .c-steps__no::after {-webkit-mask-image:url('/main/asset/img/icon/ico_step_done.svg'); mask-image:url('/main/asset/img/icon/ico_step_done.svg');} /* 상태마다 그림 색 — 원의 바탕과 짝이다(위 c-steps__no 세 상태). 지금 단계는 원이 주색으로 차므로 흰색, 지난 단계는 주색, 남은 단계는 위의 흐린 회색 그대로. */ .c-steps__item.is-on .c-steps__no::after {background-color:#fff;} .c-steps__item.is-done .c-steps__no::after {background-color:var(--color-primary);} @media screen and (max-width:768px) { .c-steps {margin-bottom:30px;} .c-steps__item:not(:last-child)::before {top:24px;} .c-steps__no {width:48px; height:48px; margin-bottom:8px;} } @media screen and (max-width:480px) { .c-steps__item:not(:last-child)::before {top:21px;} .c-steps__no {width:42px; height:42px;} .c-steps__tit {word-break:keep-all;} } /* ══════════════════════════════════════════════════════════════════════════════════════════════ 약관 동의 — c-agree ══════════════════════════════════════════════════════════════════════════════════════════════ */ /* 한 덩이 = 약관 하나(본문 + 동의 체크). 레거시는 본문을 새 창으로 띄웠지만(내용보기), 여기서는 본문을 그 자리에 두고 스크롤한다 — 화면을 떠나지 않는 편이 동의 흐름이 끊기지 않는다. */ .c-agree {margin:0 0 20px; padding:20px; border:1px solid var(--border-color-cell); border-radius:var(--radius-md); background:#fff;} /* ⚠ **약관 상자(.c-agree) 전용**이다 — 화면의 단락 제목으로 빌려 쓰지 않는다. 단락 제목은 `

` 이다(global-template "heading" — 셸이 h1, 화면의 단락이 h2). 2026-09-30 까지 가입·마이페이지 11곳이 이 class 를 h3 로 빌려 써서 문서 구조가 어긋나 있었다 (사용자 지적). 게다가 전역 h3(layout.css)의 padding-bottom:50px 까지 딸려와 제목 아래가 벌어졌다. */ /* ⚠ padding 을 **0 으로 못 박는다** — 이 제목은 사이트의 전역 heading 규칙 위에 선다. main 의 layout.css 는 `h3{padding-bottom:50px}`(페이지 대표 제목용)을 갖고 있어, 태그만 바꿔도 제목 아래가 50px 벌어졌다(2026-09-30 실측). 지금은 h2 로 내지만 다른 사이트의 h2 규칙에도 끌려 가지 않도록 여기서 여백을 다 정한다. */ .c-agree__tit {margin:0 0 10px; padding:0; font-size:var(--font-size-lg); font-weight:700; color:var(--color-ink);} .c-agree__tit .c-help {font-family:inherit; font-weight:400;} /* 시행일자 — 제목 글꼴을 따라가지 않게 */ /* 본문 — readonly textarea 가 아니라 div 다. textarea 는 글꼴·줄간격이 본문과 겉돌고 폰트 크기 조절도 안 따라온다. 높이는 고정하고 넘치면 스크롤. */ /* ⚠ 2026-09-30 **색을 중립으로 바꿨다**(사용자 지적 "노리끼리한 색") — 전엔 테두리·바탕이 `--color-notice-border`(#ffd7b5) · `--color-notice-bg`(#fff8f2) 였다. 그 둘은 **안내 상자용 주황** 이라 약관을 읽는 자리의 색이 아니었다. 지금은 흰 바탕 + KRDS 중립 회색선(gray-20)이다 — 긴 글을 읽는 영역이라 바탕이 물들지 않는 편이 낫고, 바깥 상자와는 테두리로 갈린다. */ .c-agree__doc {max-height:200px; overflow-y:auto; padding:14px; border:1px solid var(--border-color-cell); border-radius:var(--radius-sm); background:#fff; color:var(--color-ink); line-height:1.7; white-space:pre-wrap; word-break:break-all;} /* 키보드로 굴리는 자리라 **초점이 보여야 한다** — 화면이 tabindex=0 을 준다(KRDS 접근성: 숨은 내용을 키보드로 확인). 고리는 사이트 포커스 색으로, 상자 밖에 그린다. */ .c-agree__doc:focus-visible {outline:2px solid var(--border-color-focus); outline-offset:2px;} /* 동의 옵션 — 설명 한 줄 + 라디오 둘(동의안함 · 동의함). KRDS 동의 패턴(global_03)은 **동의하지 않음 옵션**을 반드시 내라고 한다: 고를 대안이 있어야 동의가 뜻을 갖는다. 그래서 체크박스 하나가 아니다. 설명은 왼쪽에 흐르고 라디오는 오른쪽에 붙는다 — 좁아지면 줄을 바꾼다. */ .c-agree__opt {display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin-top:12px;} .c-agree__txt {flex:1 1 auto; color:var(--color-help); font-size:var(--font-size-sm);} /* 일괄 동의 — 목록 **맨 위**. 항목 상자(c-agree)보다 한 단 들어간 바탕으로 "이 아래 전부" 임을 보인다. 체크 상자는 서버가 읽지 않는다(js/agree.js 가 항목 라디오를 대신 고른다) — 모양만 여기 있다. */ .c-agree__all {margin:0 0 16px; padding:16px 20px; border:1px solid var(--border-color-cell); border-radius:var(--radius-md); background:var(--bg-thead, #f4f5f6);} .c-agree__all .c-help {margin:6px 0 0;} /* 필수·선택 표시 — **글자**다(`[필수]`). 별표(c-req)는 입력칸의 표시라 여기 쓰지 않는다(KRDS). */ .c-agree__req {color:var(--color-primary); font-weight:700;} /* ⚠ 구 `.c-agree__check`(체크박스 한 칸, 오른쪽 정렬)는 2026-09-30 에 위 `__opt` 로 바뀌었다 — KRDS 가 요구하는 '동의하지 않음' 라디오가 들어가면서 한 칸으로는 담기지 않는다. */ /* ══════════════════════════════════════════════════════════════════════════════════════════════ 마이페이지 머리 — c-hero ══════════════════════════════════════════════════════════════════════════════════════════════ */ /* "누구로 들어와 있는가" 를 화면 맨 위에서 한 번에 — 레거시 mypage_wrap > topbox 자리. ★ 2026-09-30 **레거시 모양으로 되돌렸다**(사용자 지시) — 전엔 안내 상자 바탕(--color-notice-bg, 연한 주황빛 베이지)을 깔았는데 이 자리의 색이 아니었다("야리꾸리한 색"). 레거시는 **흰 바탕에 테두리 상자**이고, 이름·접속일시와 안내문을 **점선**으로 가른다. ★ 안쪽 여백은 레거시 40(모바일 25)에서 **24(모바일 20)로 줄였다** (사용자 지시 2026-09-30) — 진행 중인 신청 줄이 들어오며 상자가 길어졌었다(2026-10-25 신청 현황 상자는 없앴다). 8pt 체계의 한 단계다(KRDS 레이아웃). ★ 마크업은 그대로다 — 레거시 class(topbox·infobox·namebox·txtbox)를 되살리지 않는다. 이 플랫폼의 이름 체계는 c- · l- · u- 접두다(global-template "공통 UI class"). 모양만 옮긴다. ★ 값은 **이 사이트 토큰**으로 읽는다 — 레거시가 박아 둔 #427ee2(파랑)·#ccc 대신 주조색과 중립 회색선을 쓴다. 상자 테두리에 --border-color-cell 을 쓰는 것은 사이트의 c-attach 와 같은 관행이다(--border-color 는 입력칸·버튼용이라 이 크기의 상자엔 너무 진하다). */ .c-hero {margin:0 0 24px; padding:24px; border:1px solid var(--border-color-cell); border-radius:var(--radius-md); background:#fff;} .c-hero__name {margin:0; padding:7px 0; font-size:var(--font-size-lg); color:#000;} .c-hero__name b {font-weight:700;} /* 최종 접속일시 — 레거시는 글머리에 작은 회색 점을 찍는다(목록 불릿을 흉내 낸 자리). */ .c-hero__meta {position:relative; margin:0; padding:5px 0 5px 15px; color:var(--color-help);} .c-hero__meta:before {position:absolute; top:15px; left:4px; content:''; display:block; width:3px; height:3px; background:#aaa;} /* 안내문 — 위를 점선으로 가른다(레거시 txtbox). 선 위 30 · 아래 35 도 레거시 간격이다. */ .c-hero__txt {margin:30px 0 0; padding:35px 0 0; border-top:1px dashed var(--border-color-cell); color:var(--color-ink); line-height:1.7;} /* 회원구분 뱃지 — 이름 앞에 붙는다. c-badge 가 사이트에 있지만 그건 표 안의 작은 표시라 여기 크기와 맞지 않는다(밖에서 홀로 서는 자리). ⚠ 알약 모양(999px)은 토큰에 없다 — 반경 토큰 셋(xs 2 · sm 6 · md 10)은 각진 모서리용이고, 레거시의 이 뱃지만 알약이다. 이 스킨에만 있는 틀이라 여기 직접 적는다. */ .c-hero__cate {display:inline-block; margin-right:5px; padding:0 15px; line-height:32px; border-radius:999px; background:var(--color-primary); color:#fff; font-weight:600; vertical-align:middle;} @media screen and (max-width:768px) { .c-hero {padding:20px;} .c-hero__meta {padding:3px 0 5px;} /* 점 불릿을 빼므로 왼쪽 들여쓰기도 없앤다 */ .c-hero__meta:before {display:none;} .c-hero__txt {margin-top:20px; padding-top:25px;} } /* ══════════════════════════════════════════════════════════════════════════════════════════════ 카드형 이동 — c-cardnav ══════════════════════════════════════════════════════════════════════════════════════════════ */ /* 레거시 mypage_btn_wrap — 큰 칸 두엇이 나란히 서고 좁아지면 한 줄에 하나가 된다. 링크 전체가 누르는 자리라 가 카드 자신이다(안에 또 버튼을 두지 않는다). */ .c-cardnav {display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px; margin:24px 0 0;} .c-cardnav__item {display:block; padding:22px 100px 22px 22px; border:1px solid var(--color-notice-border); border-radius:var(--radius-md); background:#fff url('../img/member/mypage_icon02.png') no-repeat right 22px center; background-size:56px auto; color:var(--color-ink); text-decoration:none; transition:all .2s ease;} .c-cardnav__item:hover {border-color:var(--color-primary); box-shadow:rgba(0, 0, 0, .10) 0 4px 14px;} .c-cardnav__tit {display:block; margin-bottom:6px; font-size:var(--font-size-lg); font-weight:700;} .c-cardnav__txt {display:block; color:var(--color-help); font-size:var(--font-size-sm); line-height:1.6;} /* ══════════════════════════════════════════════════════════════════════════════════════════════ 화면 안 오류 한 줄 — c-alert ══════════════════════════════════════════════════════════════════════════════════════════════ */ /* 제자리에서 다시 그리는 화면의 오류 문장 (파일 머리 ※). 모양은 사이트 c-flash__item.is-error 와 같은 색 토큰을 읽어 두 자리가 같아 보이게 한다 — 사용자에겐 같은 종류의 말이다. */ .c-alert {margin:0 0 16px; padding:12px 16px; border:1px solid var(--color-danger); border-left-width:4px; border-radius:var(--radius-sm); background:var(--color-danger-bg); color:var(--color-danger-ink); font-weight:600;} /* 모달 안에서는 상자를 벗는다 — 2026-09-30 부터 이 줄은 `core/js/flash.js` 가 모달로 올린다. 상자 안에 또 상자가 들어가면 테두리가 겹친다. 사이트가 플래시 줄에 거는 규칙과 같은 꼴이다 (main ui.css `.c-modal .c-flash__item`) — 그쪽은 사이트 class 라 사이트가, 이쪽은 스킨 class 라 여기가 갖는다. */ .c-modal .c-alert {margin:0 0 8px; padding:0; border:0; background:none; color:var(--color-ink); font-weight:400;} .c-modal .c-alert:last-child {margin-bottom:0;} /* ══════════════════════════════════════════════════════════════════════════════════════════════ 표 칸 안의 작은 버튼 자리 — c-cellform (form · span 둘 다) ══════════════════════════════════════════════════════════════════════════════════════════════ */ /* 버튼 하나만 든 POST 폼이 값 옆에 나란히 서야 하는 자리(연결 해제).
은 블록이라 그냥 두면 줄이 바뀐다. 사이트 utilities.css 에 이런 유틸이 없고, 그쪽은 이 스킨이 고칠 자리가 아니다. */ .c-cellform {display:inline-block; margin-left:8px;} /* 연결된 서비스의 제공자 아이콘 — c-sns__ico 공용 자산(asset/core/img/social/<제공자>.svg)을 이름 앞에 둔다. 글자와 같은 줄에 서도록 가운데 정렬. */ .c-sns__ico {vertical-align:-4px; margin-right:6px;} /* ══════════════════════════════════════════════════════════════════════════════════════════════ 회원유형 카드 — c-extcard (shared/ext.cards — 마이페이지 회원정보) ══════════════════════════════════════════════════════════════════════════════════════════════ */ /* 가진 자격마다 카드 하나 — 아이콘 원 · 이름(+ '현재 이용 중') · 승인 배지 · 1:N 건수 줄 · 설명. ★ 아이콘은 유형 선언 `icon` 의 단색 svg 를 mask 로 칠한다 — 마크업이 `--ico:url(…)` 를 준다. ★ 색은 유형이 아니라 **순서**로 준다(5색 순환) — 회원 엔진은 유형 이름을 모른다. ⚠ 같은 이름이 gwizard ui.css 에도 있다 — 사이트 CSS 는 서로 독립이라 각자 갖는다(관리자 회원 상세). */ .c-extcard {display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:14px; margin:0; padding:0; list-style:none;} .c-extcard__item {--ext-ink:#256ef4; --ext-bg:#ecf2fe; display:flex; flex-direction:column; gap:12px; padding:20px; border:1px solid var(--border-color-cell); border-radius:var(--radius-md); background:#fff;} .c-extcard__item:nth-child(5n+2) {--ext-ink:#1f7a44; --ext-bg:#eaf6ee;} .c-extcard__item:nth-child(5n+3) {--ext-ink:#b45309; --ext-bg:#fdf1e3;} .c-extcard__item:nth-child(5n+4) {--ext-ink:#7c3aed; --ext-bg:#f2ecfd;} .c-extcard__item:nth-child(5n+5) {--ext-ink:#c2255c; --ext-bg:#fcebf1;} .c-extcard__item.is-current {border-color:var(--color-primary);} /* 아이콘 색은 **지금 로그인한 유형(is-current)만** — 나머지는 회색(2026-10-25 사용자 지시). 마이페이지는 세션 유형, 관리자는 가입 유형 */ .c-extcard__item:not(.is-current) .c-extcard__ico {--ext-ink:#8a949e; --ext-bg:#f4f5f6;} .c-extcard__head {display:flex; align-items:center; flex-wrap:wrap; gap:10px;} .c-extcard__ico {flex:none; width:48px; height:48px; border-radius:50%; background:var(--ext-bg); position:relative;} .c-extcard__ico::before {content:''; position:absolute; inset:12px; background:var(--ext-ink); -webkit-mask:var(--ico) center/contain no-repeat; mask:var(--ico) center/contain no-repeat;} .c-extcard__name {font-size:var(--font-size-lg); font-weight:700; color:#000;} .c-extcard__tag {padding:2px 8px; border-radius:var(--radius-xs); background:#ecf2fe; color:#1c4f9c; font-size:var(--font-size-sm);} .c-extcard__stts {margin:0;} .c-extcard__sum {display:flex; justify-content:space-between; gap:8px; word-break:keep-all; margin:0; padding:8px 12px; border-radius:var(--radius-sm); background:#f4f5f6; color:var(--color-ink); font-weight:600; text-decoration:none;} a.c-extcard__sum::after {content:'›';} a.c-extcard__sum:hover {background:#eef0f2;} .c-extcard__desc {margin:0; padding-top:12px; border-top:1px solid var(--border-color-cell); color:#555; line-height:1.6;} .c-extcard__stts .c-extcard__more {margin-left:8px; color:var(--color-primary); text-decoration:underline;} /* 반려 자격의 [다시 신청] — 배지 옆 글 링크 */ .c-extcard__foot {margin-top:auto;} /* [회원전환]·[재로그인] — 카드 바닥에 붙여 줄이 맞게(설명 길이가 달라도) */ .c-extcard__foot .c-btn {width:100%;}