/* project_view.css — Our Project 상세. 디자인 유지를 위해 기존 두 스타일시트를 그대로 이어 붙였다. ① newsletter_view.css — 상세 레이아웃(insight_view_*)·히어로·View List 버튼 ② our_project.css — 목록과 동일한 프로젝트 카드(all_project_card_*·project_icon) ②가 뒤에 오므로 all_project_* 가 겹치는 부분은 목록 쪽 규칙이 이긴다(카드 모양을 목록과 일치시킴). */ /* ───────────────────────── ① newsletter_view.css ───────────────────────── */ /* insight_view.css — Insight_view.html(뉴스/뉴스레터 상세) 전용 스타일. 공통 히어로(.sub_hero 등)는 sub_common.css에 있다 */ /* insight view section */ .insight_view_section{width:100%;padding:100px 0 160px;} .insight_view_inner{display:flex;max-width:1560px;margin:0 auto;padding:0 30px;flex-direction:column;gap:45px;} /* insight view head — 카테고리·날짜 메타 + 타이틀/공유버튼 */ .insight_view_head{display:flex;width:100%;flex-direction:column;gap:25px;align-items: flex-start;} .insight_view_meta{display:flex;align-items:center;gap:12px;} .insight_view_category{font-family:'Inter',sans-serif;font-weight:700;font-size:16px;line-height:1.5;letter-spacing:-0.04em;color:var(--color-text-dark);} .insight_view_dot{display:block;width:5px;height:5px;border-radius:50%;background:#D9D9D9;} .insight_view_date{font-family:'Inter',sans-serif;font-weight:700;font-size:16px;line-height:1.5;letter-spacing:-0.04em;color:var(--color-text-dark);} .insight_view_title_row{display:flex;width:100%;justify-content:space-between;gap:100px;} .insight_view_tit{flex:1;font-family:'Pretendard',sans-serif;font-weight:700;font-size:54px;line-height:1.07;letter-spacing:-0.05em;color:var(--color-text-dark);word-break:keep-all;} .insight_view_actions{display:flex;flex-shrink:0;align-items:center;gap:20px;} .insight_view_action_btn{display:flex;width:36px;height:36px;border:0;background:none;transition:opacity var(--transition-base);cursor:pointer;} .insight_view_action_btn:hover{opacity:0.6;} .insight_view_action_btn img{display:block;width:100%;height:100%;} /* insight view divider */ .insight_view_divider{width:100%;height:2px;background:#333333;} /* insight view attach — careers.css .apply_attach_row와 동일한 반투명 tan 오버레이 패턴(rgba(188,182,170,0.15))을 재사용한다 */ .insight_view_attach{display:flex;width:100%;padding:20px 30px;border-radius:2px;background:rgba(188,182,170,0.15);align-items:center;gap:40px;} .insight_view_attach_label{font-family:'Pretendard',sans-serif;font-weight:700;font-size:18px;letter-spacing:-0.03em;color:var(--color-text-dark);} .insight_view_attach_link{display:flex;font-family:'Pretendard',sans-serif;font-weight:600;font-size:16px;letter-spacing:-0.03em;color:var(--color-text-dark);text-decoration:underline;transition:opacity var(--transition-base);align-items:center;gap:2px;} .insight_view_attach_link:hover{opacity:0.7;} .insight_view_attach_link img{display:block;width:16px;height:16px;} /* insight view body */ .insight_view_body{display:flex;width:100%;flex-direction:column;gap:50px;} .insight_view_body p{font-family:'Pretendard',sans-serif;font-weight:500;font-size:18px;line-height:1.5;letter-spacing:-0.54px;word-break:keep-all;color:var(--color-service-desc);} .project_head p{color:#333;} /* project img — 상세 이미지. 여러 장이 들어올 수 있어 project_img_group 으로 감싸 세로로 나열한다 */ .project_img_group{display:flex;width:100%;flex-direction:column;gap:20px;} .project_img{display:block;overflow:hidden;width:100%;aspect-ratio:730/430;border-radius:2px;background:#EFEFEA;} .project_img img{display:block;width:100%;height:100%;object-fit:contain;} /* project video — 유튜브 임베드. project_img 와 같은 비율·라운드를 쓴다 */ .project_video{display:block;overflow:hidden;width:100%;aspect-ratio:730/430;border-radius:2px;background:#000000;} .project_video iframe{display:block;width:100%;height:100%;border:0;} .project_head{display:flex;width:100%;flex-direction:column;} .project_category{font-family:'Inter',sans-serif;font-weight:800;font-size:20px;line-height:1.2;letter-spacing:-0.04em;color:var(--color-text-dark);} .project_body_tit{font-family:'Pretendard',sans-serif;font-weight:700;font-size:32px;line-height:1.3;letter-spacing:-0.03em;color:var(--color-text-dark);word-break:keep-all;} .project_meta{display:flex;width:100%;padding:20px 0;border-top:1px solid #D9D9D9;border-bottom:1px solid #D9D9D9;flex-wrap:wrap;gap:15px 60px;} .project_meta_item{display:flex;align-items:center;gap:10px;} .project_meta_item span.project_label{color:#666;font-family:Pretendard;font-size:18px;font-style:normal;font-weight:700;line-height:145%;letter-spacing:-0.48px;} .project_value{font-family:'Pretendard',sans-serif;font-weight:600;font-size:18px;letter-spacing:-0.02em;color:var(--color-text-dark);} .project_section{display:flex;width:100%;flex-direction:column;gap:15px;} .insight_view_body p.project_tit{font-family:'Pretendard',sans-serif;font-weight:700;font-size:24px;letter-spacing:-0.03em;color:var(--color-text-dark);} .project_desc{font-family:'Pretendard',sans-serif;font-weight:500;font-size:16px;line-height:1.7;letter-spacing:-0.03em;color:#333333;word-break:keep-all;} .project_features{display:flex;width:100%;flex-wrap:wrap;gap:10px 10px;} .project_feature{font-family:'Pretendard',sans-serif;font-weight:500;font-size:18px;line-height:1.6;letter-spacing:-0.03em;color:#333333;border-radius: 30px;padding: 10px 26px;background-color: #ffffff;} .project_feature strong{font-weight:700;color:var(--color-text-dark);} .project_feature strong span{text-decoration:underline;} .insight_view_body p.project_category {font-size: 24px; font-weight: 600;text-decoration: underline;text-underline-offset: 7px;margin-bottom: 15px;} .insight_view_body p.project_body_tit { font-size: 40px; font-weight: 700;} /* insight view photo */ .insight_view_photo{width:100%;} .insight_view_photo img{display:block;width:100%;height:auto;} /* insight view latest — 카드는 project.css의 .insight_card/.all_project_grid를 그대로 재사용한다 */ .insight_view_latest{display:flex;max-width:1560px;margin:100px auto 0;padding:0 30px;flex-direction:column;gap:20px;} .insight_view_latest_tit{font-family:'Inter',sans-serif;font-weight:800;font-size:24px;line-height:1.2;text-transform:uppercase;color:var(--color-text-dark);} .insight_view_latest_grid{margin-bottom:0;} .project_hero_tit_line{display:inline-flex;align-items:center;gap:25px;} .project_hero_badge{display:inline-flex;flex-shrink:0;width:70px;height:50px;border-radius:234px;background:var(--color-accent-red);font-family:'Inter',sans-serif;font-weight:800;font-size:30px;letter-spacing:-0.02em;color:var(--color-white);justify-content:center;align-items:center;} /* major project */ .major_project_section{overflow:hidden;width:100%;padding:100px 0 70px;} .major_project_inner{max-width:1920px;margin:0 auto;padding:0 30px;} /* major project head */ .major_project_head{display:flex;width:100%;margin-bottom:40px;align-items:center;gap:20px;} .major_project_head_tit{flex-shrink:0;font-family:'Inter',sans-serif;font-weight:800;font-size:24px;line-height:90%;letter-spacing:-0.04em;color:var(--color-text-dark);} /* major project head line — 슬라이드 진행률 게이지. fill의 width를 JS가 스와이퍼 progress(0~1)에 맞춰 갱신한다 (service.css의 .solution_head_line과 동일한 패턴) */ .major_project_head_line{overflow:hidden;position:relative;width:215px;height:1px;background:var(--color-border);flex-shrink:0;} .major_project_head_line_fill{position:absolute;top:0;left:0;width:0%;height:100%;background:var(--color-accent-red);transition:width var(--transition-base);} /* major project swiper */ .major_project_swiper_wrap{position:relative;width:100%;} .major_project_swiper.swiper{overflow:visible;width:100%;} .major_project_swiper .swiper-wrapper{align-items:stretch;} .major_project_card.swiper-slide{width:min(880px,84vw);height:auto;flex-shrink:0;} .major_project_card{display:flex;width:100%;flex-direction:column;} /* major project card media */ .major_project_card_media{display:flex;overflow:hidden;position:relative;width:100%;height:460px;border-radius:2px;background:var(--color-surface);justify-content:center;align-items:center;} .major_project_card_media img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow);} .major_project_card_media::after{content:'';display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(17,17,17,0.1);pointer-events:none;} .major_project_card_arrow{display:flex;overflow:hidden;position:absolute;right:0;bottom:0;z-index:1;width:95px;height:95px;transition:transform var(--transition-base),background-color var(--transition-base);justify-content:center;align-items:center;} .major_project_card_arrow img{width:100%;height:100%;object-fit:cover;} .major_project_card:hover .major_project_card_arrow{background:rgba(0,0,0,0.3);transform:scale(1.1) rotate(10deg);} .major_project_card:hover .major_project_card_media img{transform:scale(1.05);} /* major project card body — 관리자가 등록하는 콘텐츠라 길이가 들쭉날쭉해도 카드 높이가 흔들리지 않도록 고정 높이(195px = padding 30+30 + 텍스트 영역 135px)를 준다 */ .major_project_card_body{display:flex;width:100%;height:195px;padding:30px;border-radius:2px;background:var(--color-white);align-items:flex-start;gap:35px;} .major_project_card_text{display:flex;flex:1;min-width:0;flex-direction:column;gap:20px;} /* 타이틀 1줄, 태그 1행은 nowrap으로, 설명은 항상 2줄만큼 공간을 차지하도록 고정 높이로 잡아 실제 줄 수와 무관하게 텍스트 영역 높이가 일정하게 유지되도록 한다 */ .major_project_card_tit{overflow:hidden;font-family:'Pretendard',sans-serif;font-weight:700;font-size:24px;line-height:1.2;letter-spacing:-0.04em;color:var(--color-text-dark);white-space:nowrap;text-overflow:ellipsis;} .major_project_card_desc{display:-webkit-box;overflow:hidden;height:48px;font-family:'Pretendard',sans-serif;font-weight:600;font-size:16px;line-height:1.5;letter-spacing:-0.03em;color:var(--color-axis-line);word-break:keep-all;overflow-wrap:break-word;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;} .major_project_card_tags{display:flex;overflow:hidden;flex-wrap:nowrap;gap:5px 10px;} .major_project_card_tags li{overflow:hidden;font-family:'Pretendard',sans-serif;font-weight:600;font-size:13px;line-height:1.4;letter-spacing:-0.01em;color:#AFABA2;white-space:nowrap;text-overflow:ellipsis;flex-shrink:0;} .major_project_card_badge{display:flex;flex-shrink:0;width:fit-content;padding:6px 10px;border-radius:4px;background:var(--color-bg-alt);font-family:'Inter',sans-serif;font-weight:700;font-size:12px;letter-spacing:-0.02em;color:var(--color-white);white-space:nowrap;justify-content:center;align-items:center;} /* all project */ .all_project_section{width:100%;padding:100px 0 160px;} .all_project_inner{max-width:1920px;margin:0 auto;padding:0 30px;} /* all project head */ .all_project_head{display:flex;width:100%;margin-bottom:20px;padding-bottom:30px;border-bottom:2px solid #333;justify-content:space-between;align-items:flex-end;} .all_project_head_tit{font-family:'Inter',sans-serif;font-weight:800;font-size:24px;line-height:90%;letter-spacing:-0.04em;color:var(--color-text-dark);} .all_project_head_count{margin-left:5px;} /* all project filter — 버튼/카운트 배지 베이스는 sub_common.css의 .pill_filter_btn, .pill_filter_count 공통 스타일을 따른다 */ .all_project_filter{display:flex;flex-direction:column;align-items:flex-end;gap:8px;} /* all project grid */ .all_project_grid{display:grid;width:100%;margin-bottom:60px;grid-template-columns:repeat(4,1fr);gap:20px;} .all_project_card{cursor:pointer;} .all_project_card_thumb{display:flex;overflow:hidden;position:relative;width:100%;aspect-ratio:5/4;border-radius:2px;background:var(--color-surface);justify-content:center;align-items:center;} .all_project_card_thumb img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow);} .all_project_card:hover .all_project_card_thumb img{transform:scale(1.05);} /* all project card text — 타이틀+서브태그를 한 묶음으로 묶어 고정 높이를 준다. 관리자가 등록하는 콘텐츠라 길이가 제각각이어도 그리드 행 높이가 흔들리지 않도록 타이틀 2줄, 서브 1줄로 고정하고 넘치는 부분은 말줄임 처리한다 */ .all_project_card_text{display:flex;height:135px;padding:20px 90px 30px 10px;flex-direction:column;justify-content:space-between;} .all_project_card_tit{display:-webkit-box;overflow:hidden;font-family:'Pretendard',sans-serif;font-weight:700;font-size:20px;line-height:1.2;letter-spacing:-0.02em;color:var(--color-text-dark);word-break:keep-all;overflow-wrap:break-word;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;} .all_project_card_sub{display:flex;overflow:hidden;flex-wrap:wrap;align-items:center;gap:5px;} .all_project_card_sub li{overflow:hidden;font-family:'Pretendard',sans-serif;font-weight:600;font-size:13px;line-height:1.2;letter-spacing:-0.03em;color:#AFABA2;white-space:nowrap;text-overflow:ellipsis;} .all_project_card_sub li:not(:last-child)::after{content:'';display:inline-block;width:3px;height:3px;margin-left:5px;border-radius:50%;background:#D9D9D9;vertical-align:middle;} /* insight card — Insight.html 게시판 카드. 그리드/스크롤 리빌 애니메이션은 all_project_grid, all_project_card 셀렉터를 그대로 공유하고, 카드 내부만 뉴스 리스트 형태(썸네일+타이틀+카테고리·날짜)로 구성한다. data-category 속성은 all_project_filter_btn의 data-filter 값과 매칭되도록 두어 추후 필터링 개발 시 그대로 연동할 수 있게 한다 */ .insight_grid.all_project_grid{grid-template-columns:repeat(3,1fr);} .insight_card_link{display:flex;width:100%;flex-direction:column;} .insight_card_thumb{display:flex;overflow:hidden;position:relative;width:100%;aspect-ratio:3/2;border-radius:2px;background:var(--color-surface);justify-content:center;align-items:center;} .insight_card_thumb img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow);} .insight_card:hover .insight_card_thumb img{transform:scale(1.05);} .insight_card_text{display:flex;width:100%;padding:20px 50px 30px 10px;flex-direction:column;gap:10px;} .insight_card_tit{display:-webkit-box;overflow:hidden;font-family:Pretendard;font-weight:700;font-size:22px;font-style:normal;line-height:135%;letter-spacing:-0.88px;color:#222;word-break:keep-all;overflow-wrap:break-word;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;} .insight_card_meta{display:flex;align-items:center;gap:15px;} .insight_card_category{font-family:Inter;font-weight:600;font-size:14px;font-style:normal;line-height:135%;letter-spacing:-0.7px;color:#67635F;} .insight_card_date{font-family:Pretendard;font-weight:600;font-size:14px;font-style:normal;line-height:140%;letter-spacing:-0.02em;color:var(--color-text-muted);} /* all project pagination */ .all_project_pagination{display:flex;width:100%;justify-content:center;align-items:center;gap:15px;} .all_project_page_btn{display:flex;width:52px;height:50px;border:1px solid #CCCCCC;border-radius:4px;font-family:'Inter',sans-serif;font-weight:500;font-size:16px;letter-spacing:-0.01em;color:#444444;transition:background-color var(--transition-base),color var(--transition-base),border-color var(--transition-base);justify-content:center;align-items:center;cursor:pointer;} .all_project_page_btn:hover{background:var(--color-border);} .all_project_page_btn.is_active{border-color:transparent;background:var(--color-accent-red);color:var(--color-white);} .all_project_page_btn.is_active:hover{background:var(--color-accent-red);} .all_project_page_ellipsis{display:flex;width:30px;height:50px;font-family:'Inter',sans-serif;font-weight:600;font-size:18px;letter-spacing:-0.01em;color:#444444;justify-content:center;align-items:center;} .all_project_page_arrow{display:flex;width:52px;height:50px;border-radius:4px;background:#E8E7E2;transition:opacity var(--transition-base);justify-content:center;align-items:center;cursor:pointer;} .all_project_page_arrow:hover{opacity:0.85;} .all_project_page_arrow[disabled]{cursor:default;pointer-events:none;} .all_project_page_arrow[disabled] img{opacity:0.4;} .all_project_page_prev img{transform:rotate(180deg);} /* ── Insights 상세 히어로(뉴스레터 구독 폼 포함) — 목록 페이지와 동일 컴포넌트 ── */ .newsletter_wrap.sub_hero {padding-bottom: 190px;} /*GIF SIZE*/ .sub_hero_mascot{position: absolute;top: 260px; right: 0; width: 330px;height: 210px;} /* newsletter subscribe — newsletter.html 히어로 우측 이메일 구독 폼. sub_hero_mascot·project_hero_figure와 같은 absolute 우측 배치 패턴을 따르되, 히어로 타이틀이 clamp()로 가변적이라 top 고정값 대신 수직 중앙 정렬로 높이 변화에 대응한다 */ .sub_mail_group .newsletter_subscribe_desc{font-family:'Pretendard',sans-serif;font-weight:600;font-size:18px;line-height:1.1;letter-spacing:-0.03em;color:var(--color-text-muted);} .sub_mail_group .newsletter_subscribe_row{display:flex;width:100%;align-items:stretch;gap: 18px;} .sub_mail_group .newsletter_subscribe_field{display:flex;width:490px;height:70px;border-bottom:2px solid var(--color-text-dark);align-items:center;gap:10px;flex-shrink:0;} .sub_mail_group .newsletter_subscribe_field img{flex-shrink:0;} .sub_mail_group .newsletter_subscribe_input{width:100%;font-family:'Pretendard',sans-serif;font-weight:700;font-size:28px;letter-spacing:-0.02em;color:var(--color-border-strong);} .sub_mail_group .newsletter_subscribe_input::placeholder{color:var(--color-border-strong);} .sub_mail_group .newsletter_subscribe_btn{display:flex;padding:0 20px; background: var(--color-accent-red);font-family: 'Pretendard', sans-serif; font-weight: 700;font-size: 22px;letter-spacing: -0.02em;color: var(--color-white);white-space: nowrap; transition: opacity var(--transition-base);justify-content: center; align-items: center; flex-shrink: 0;cursor: pointer; line-height: 110%;} .sub_mail_group .newsletter_subscribe_btn:hover{opacity:0.85;} .sub_mail_group .newsletter_subscribe_agree{display:flex;width:100%;margin-top:20px;align-items:center;gap:10px;} .sub_mail_group .newsletter_subscribe_agree_label{display:flex;align-items:center;gap:5px;cursor:pointer;} .sub_mail_group .newsletter_subscribe_check_input{display:block;width:27px;height:27px;border:2px solid #cacaca;border-radius:3px;background:var(--color-white);flex-shrink:0;cursor:pointer;transition:background-color var(--transition-base),border-color var(--transition-base);} .sub_mail_group .newsletter_subscribe_check_input:checked{border-color:var(--color-accent-red);background:var(--color-accent-red) url('/main/images/common/check_ic.svg') no-repeat center/10px 7px;} .sub_mail_group .newsletter_subscribe_agree_text{font-family:'Pretendard',sans-serif;font-weight:700;font-size:15px;letter-spacing:-0.02em;color:var(--color-text-dark);} .sub_mail_group .newsletter_subscribe_agree_text em{font-style:normal;color:var(--color-accent-red);} .sub_mail_group .newsletter_subscribe_agree_more{font-family:'Pretendard',sans-serif;font-weight:700;font-size:12px;letter-spacing:-0.02em;color:var(--color-text-muted);text-decoration:underline;} .sub_mail_group {display: flex; justify-content: space-between;align-items: center;} /* 상세 헤더 중앙 정렬 — 기존에는 insight_view.board.js 가