@charset "utf-8"; /* ============================================================ 울산광역시 열린시장실 — satisfaction.css 콘텐츠 담당자 + 만족도조사 ({contentsId}.jsp include 영역) [적용] 1) 서브 페이지 에서 sub.css 보다 뒤에 로드 2) 마크업은 기존 JSP 그대로 사용 (class·id·name 변경 없음) 3) sub.css 의 구형 .stf_* (sub_ir.png 스프라이트) 규칙을 이 파일이 대체한다 [구성] 1. 카드 틀 2. 정보담당자 3. 만족도 조사 — 질문 / 점수(라디오) / 의견입력 / 평가하기 버튼 4. 반응형 : 1440 / 1280 / 1024 / 768 / 480 / 380 / 340 ============================================================ */ /* ============================================================ 1. 카드 틀 ============================================================ */ .stf_box{ --stf_ink:#12253d; /* 본문 강조 */ --stf_ink2:#5a6f88; /* 본문 기본 */ --stf_pt:#1a5fb4; /* 포인트(브랜드 블루) */ --stf_line:#e1e5ea; /* 선 */ position:relative; z-index:2; overflow:hidden; margin-top:6rem; border:1px solid var(--stf_line); border-radius:1.2rem; background:#fff; } /* ============================================================ 2. 정보담당자 ============================================================ */ .stf_box .stf_t_box{padding:0;} .stf_box .stf_t_box .stf_txt{ display:flex; align-items:center; flex-wrap:wrap; gap:0 1.2rem; margin:0; padding:1.9rem 2.4rem; font-size:1.5rem; letter-spacing:-.03rem; color:var(--stf_ink2); } .stf_box .stf_t_box .stf_txt::before{display:none;} /* 구형 스프라이트 아이콘 제거 */ .stf_box .stf_t_box .stf_txt strong{ /* '정보담당자' 라벨 칩 */ margin:0; padding:.35rem .9rem; border-radius:.4rem; background:#f0f4f9; font-size:1.35rem; font-weight:600; letter-spacing:-.02rem; color:#3d5876; } .stf_box .stf_t_box .stf_txt > span{ /* 담당부서 / 연락처 */ display:inline-flex; align-items:center; gap:.5rem; margin:0; position:relative; padding-left:1.3rem; } .stf_box .stf_t_box .stf_txt > span::before{ /* 항목 구분선 */ content:''; position:absolute; left:0; top:50%; width:1px; height:1.2rem; background:var(--stf_line); transform:translateY(-50%); } .stf_box .stf_t_box .stf_txt > span:first-of-type{padding-left:0;} .stf_box .stf_t_box .stf_txt > span:first-of-type::before{display:none;} .stf_box .stf_t_box .stf_txt .m_hidden{display:inline; margin:0; font-weight:400; color:#8b9cb0;} .stf_box .stf_t_box .stf_txt em{ font-style:normal; font-size:1.5rem; font-weight:600; letter-spacing:-.03rem; color:var(--stf_ink); } .stf_box .stf_t_box .stf_txt a{color:inherit; text-decoration:none;} .stf_box .stf_t_box .stf_txt a:hover, .stf_box .stf_t_box .stf_txt a:focus-visible{color:var(--stf_pt); text-decoration:underline;} .stf_box .stf_t_box .stf_txt a em{color:inherit;} /* 최종수정일 (JSP 에서 display:none — 노출 시 담당자 줄과 같은 서식) */ .stf_box .stf_line{position:static; display:inline-block; margin:0; padding:0;} .stf_box .stf_line::before{display:none;} /* ============================================================ 3. 만족도 조사 ============================================================ */ .stf_box .stf_srchbox{padding:2.2rem 2.4rem; background:#fafbfd; border-top:1px solid var(--stf_line);} .stf_box .stf_srchbox .stf_fix{position:relative; display:flex; align-items:flex-end; gap:1.2rem;} .stf_box .stf_srchbox .stf_fix .stf_srchinner{ display:block; position:static; width:auto; flex:1 1 auto; min-width:0; height:auto; padding:0; } .stf_box .stf_srchbox .stf_fix .stf_srchinner::before{display:none;} /* 구형 스프라이트 아이콘 제거 */ /* 1행 : 질문 + 점수 5개 / 2행 : 의견입력 (그리드로 좌우 정렬 고정) */ .stf_box .stf_srchbox .stf_fix .stf_srchinner dl{ display:grid; grid-template-columns:minmax(0,auto) repeat(5,auto) minmax(0,1fr); align-items:center; gap:1.4rem .8rem; } .stf_box .stf_srchbox .stf_fix .stf_srchinner dt{ grid-column:1; min-width:0; margin:0 1.6rem 0 0; white-space:nowrap; font-size:1.55rem; font-weight:600; letter-spacing:-.04rem; line-height:1.4; color:var(--stf_ink); word-break:keep-all; } /* 점수 : 라디오 필 */ .stf_box .stf_srchbox .stf_srchinner dd{display:inline-flex; margin:0;} .stf_box .stf_srchbox .stf_srchinner dd label{ display:inline-flex; align-items:center; gap:.6rem; height:3.8rem; padding:0 1.4rem; border:1px solid #dde3ea; border-radius:.6rem; background:#fff; font-size:1.45rem; font-weight:500; letter-spacing:-.03rem; color:var(--stf_ink2); cursor:pointer; white-space:nowrap; transition:border-color .18s, color .18s, background .18s; } .stf_box .stf_srchbox .stf_srchinner dd label:hover{border-color:#b9cbe0; color:var(--stf_pt);} .stf_box .stf_srchbox .stf_srchinner dd label:has(input:checked){ border-color:var(--stf_pt); background:#f2f7fd; color:var(--stf_pt); font-weight:600; } .stf_box .stf_srchbox .stf_srchinner dd label:has(input:focus-visible){outline:2px solid var(--stf_pt); outline-offset:2px;} .stf_box .stf_srchbox .stf_srchinner input[type="radio"]{ appearance:none; -webkit-appearance:none; flex:0 0 auto; width:1.4rem; height:1.4rem; margin:0; border:1px solid #c4cfdb; border-radius:50%; background:#fff; transition:border-color .18s, box-shadow .18s; } .stf_box .stf_srchbox .stf_srchinner dd label:has(input:checked) input[type="radio"]{ border-color:var(--stf_pt); box-shadow:inset 0 0 0 .3rem #fff, inset 0 0 0 1rem var(--stf_pt); } /* 의견 입력 */ .stf_box .stf_srchbox .stf_srchinner dd.user_comt{display:flex; grid-column:1/-1; width:100%; margin:0;} .stf_box .stf_srchbox .stf_srchinner dd.user_comt label{display:block; margin:0; padding:0;} .stf_box .stf_srchbox .stf_srchinner dd.user_comt input{ display:block; width:100%; height:4.6rem; padding:0 1.4rem; line-height:4.6rem; border:1px solid #dde3ea; border-radius:.6rem; background:#fff; font-family:inherit; font-size:1.45rem; letter-spacing:-.03rem; color:var(--stf_ink); transition:border-color .18s; } .stf_box .stf_srchbox .stf_srchinner dd.user_comt input::placeholder{color:#a3b1c2;} .stf_box .stf_srchbox .stf_srchinner dd.user_comt input:focus{outline:none; border-color:var(--stf_pt);} /* 평가하기 : 반투명 블루 그라데이션(글래스모피즘) */ .stf_box .stf_srchbox .stf_fix .srf_btn{ position:static; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:auto; min-width:13rem; height:4.6rem; margin:0; padding:0 2.4rem; border:1px solid rgba(255,255,255,.28); border-radius:.6rem; cursor:pointer; color:#fff; background:linear-gradient(160deg,rgba(47,127,209,.92),rgba(21,80,152,.96)); backdrop-filter:blur(10px) saturate(150%); -webkit-backdrop-filter:blur(10px) saturate(150%); box-shadow:0 .8rem 2rem -1rem rgba(15,77,147,.55); font-family:inherit; font-size:1.6rem; font-weight:700; letter-spacing:-.03rem; line-height:1; text-shadow:0 1px 1px rgba(10,40,80,.25); transition:background .2s, box-shadow .2s, transform .2s cubic-bezier(.16,1,.3,1); } .stf_box .stf_srchbox .stf_fix .srf_btn:hover, .stf_box .stf_srchbox .stf_fix .srf_btn:focus-visible{ background:linear-gradient(160deg,rgba(52,134,216,.96),rgba(18,72,140,.98)); transform:translateY(-.2rem); box-shadow:0 1.4rem 2.8rem -1.2rem rgba(15,77,147,.6); } .stf_box .blind{overflow:hidden; position:absolute; width:1px; height:1px; clip:rect(0,0,0,0);} /* ============================================================ 4. 반응형 — 1440 / 1280 / 1024 / 768 / 480 / 380 / 340 (mf_page 등 서브 페이지와 동일 기준점) ============================================================ */ /* ── 1440 : 상단 여백만 축소 ───────────────────────────── */ @media (max-width:1440px){ .stf_box{margin-top:5.4rem;} } /* ── 1280 : 질문을 윗줄로, 점수는 아랫줄 왼쪽부터 ───────── */ @media (max-width:1280px){ .stf_box .stf_srchbox .stf_fix .stf_srchinner dt{ grid-column:1/-1; margin-right:0; white-space:normal; word-break:keep-all; } } /* ── 1024 : 내부 여백 축소 ─────────────────────────────── */ @media (max-width:1024px){ .stf_box{margin-top:4.8rem;} .stf_box .stf_t_box .stf_txt{padding:1.7rem 2rem; gap:0 1rem;} .stf_box .stf_srchbox{padding:2rem;} .stf_box .stf_srchbox .stf_fix{gap:1.2rem 1.4rem;} .stf_box .stf_srchbox .stf_fix .stf_srchinner dl{gap:1.2rem .6rem;} } /* ── 768 : 담당자 항목당 한 줄 / 점수는 최소폭 그리드 / 의견입력·버튼 세로 스택 (터치 44px 이상) ───────── */ @media (max-width:768px){ .stf_box{margin-top:4.2rem; border-radius:1rem;} .stf_box .stf_t_box .stf_txt{ display:grid; grid-template-columns:minmax(0,1fr); gap:.5rem; padding:1.6rem 1.8rem; font-size:1.55rem; } .stf_box .stf_t_box .stf_txt strong{justify-self:start; margin-bottom:.3rem;} .stf_box .stf_t_box .stf_txt > span{padding-left:0; gap:.5rem; line-height:1.5;} .stf_box .stf_t_box .stf_txt > span::before{display:none;} .stf_box .stf_t_box .stf_txt em{font-size:1.55rem;} .stf_box .stf_srchbox{padding:1.8rem;} .stf_box .stf_srchbox .stf_fix{display:block;} .stf_box .stf_srchbox .stf_fix .stf_srchinner dl{ display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:1rem .8rem; } .stf_box .stf_srchbox .stf_fix .stf_srchinner dt{grid-column:1/-1; font-size:1.6rem; line-height:1.45;} .stf_box .stf_srchbox .stf_srchinner dd{display:block;} .stf_box .stf_srchbox .stf_srchinner dd label{ display:flex; justify-content:flex-start; width:100%; height:4.8rem; padding:0 1.2rem; gap:.6rem; font-size:1.6rem; white-space:nowrap; } .stf_box .stf_srchbox .stf_srchinner input[type="radio"]{width:1.8rem; height:1.8rem;} .stf_box .stf_srchbox .stf_srchinner dd.user_comt{grid-column:1/-1; margin-top:.2rem;} .stf_box .stf_srchbox .stf_srchinner dd.user_comt input{height:4.8rem; line-height:4.8rem; font-size:1.6rem;} .stf_box .stf_srchbox .stf_fix .srf_btn{ display:flex; width:100%; min-width:0; height:5.2rem; margin-top:1.2rem; font-size:1.7rem; } .stf_box .stf_srchbox .stf_fix .srf_btn:hover{transform:none;} } /* ── 480 : 점수 타일 박스 제거, 항목 폭에 맞춰 자연 줄바꿈 (빈 칸 없이 왼쪽 정렬 / 글자 16px·터치 44px 유지) ─ */ @media (max-width:480px){ .stf_box{margin-top:3.6rem;} .stf_box .stf_t_box .stf_txt{padding:1.5rem 1.6rem; gap:.4rem;} .stf_box .stf_t_box .stf_txt strong{margin-bottom:.2rem;} .stf_box .stf_srchbox{padding:1.6rem;} .stf_box .stf_srchbox .stf_fix .stf_srchinner dl{ display:flex; flex-wrap:wrap; column-gap:2rem; row-gap:.6rem; } .stf_box .stf_srchbox .stf_fix .stf_srchinner dt{width:100%; margin-bottom:.4rem; font-size:1.6rem;} .stf_box .stf_srchbox .stf_srchinner dd{width:auto;} .stf_box .stf_srchbox .stf_srchinner dd label{ width:auto; height:4.4rem; padding:0; gap:.8rem; font-size:1.6rem; border:0; border-radius:0; background:none; box-shadow:none; } .stf_box .stf_srchbox .stf_srchinner dd label:hover{border:0;} .stf_box .stf_srchbox .stf_srchinner dd label:has(input:checked){ border:0; background:none; color:var(--stf_pt); font-weight:700; } .stf_box .stf_srchbox .stf_srchinner dd.user_comt{width:100%; margin-top:1rem;} } /* ── 380 / 340 : 간격만 축소 (글자 크기 하한 15px) ───────── */ @media (max-width:380px){ .stf_box .stf_srchbox .stf_fix .stf_srchinner dl{column-gap:1.6rem;} .stf_box .stf_srchbox .stf_srchinner dd label{gap:.7rem; font-size:1.55rem;} } @media (max-width:340px){ .stf_box .stf_srchbox{padding:1.4rem;} .stf_box .stf_srchbox .stf_fix .stf_srchinner dl{column-gap:1.3rem;} .stf_box .stf_srchbox .stf_srchinner dd label{gap:.6rem; font-size:1.5rem;} } @media (prefers-reduced-motion:reduce){ .stf_box .stf_srchbox .stf_srchinner dd label, .stf_box .stf_srchbox .stf_fix .srf_btn{transition:none; transform:none;} }