/* ========================================================================== 릴 키트 — Elementor 무료판에 없는 것만 담는다. 색·글꼴·여백은 위젯 Style 탭에서. 톤: 시네마 다크 — 거의 검정 + 종이 흰색, 녹화 표시등 빨강은 점·선 같은 작은 강조에만. 장식 언어: 뷰파인더 모서리 · 고정폭 타임코드(JetBrains Mono) · 외곽선 영문 대형 글자(Anton). 밝은 구간(.rk-light 섹션) 안에서는 위젯 색이 종이 바탕용으로 바뀐다. ========================================================================== */ :root { --rk-black: #0B0B0C; --rk-ink: #131315; --rk-ink-2: #1B1B1E; --rk-ink-3: #26262A; --rk-paper: #F2F2F0; --rk-paper-2: #E6E6E3; --rk-red: #FF4433; /* 검정 바탕 5.6:1 — 점·선·작은 강조 */ --rk-red-dk: #C8281A; /* 종이 바탕 글자용 5.0:1 */ --rk-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; --rk-display: 'Anton', 'Noto Sans KR', sans-serif; --rk-ease: cubic-bezier(.22, 1, .36, 1); --rk-hh: 76px; /* 고정 헤더 높이 */ /* 위젯이 쓰는 문맥 색 — 기본 = 어두운 바탕 */ --rk-fg: #F2F2F0; --rk-fg-2: rgba(242, 242, 240, .72); /* 검정 바탕 8.9:1 */ --rk-fg-3: rgba(242, 242, 240, .56); /* 6.0:1 */ --rk-line: rgba(242, 242, 240, .14); --rk-line-2: rgba(242, 242, 240, .28); --rk-card: #141416; --rk-card-2: #1C1C1F; --rk-acc: var(--rk-red); } @media (max-width: 1024px) { :root { --rk-hh: 68px; } } .rk-light { --rk-fg: #111113; --rk-fg-2: #45454B; /* 종이 바탕 8.6:1 */ --rk-fg-3: #66666C; /* 5.3:1 */ --rk-line: rgba(17, 17, 19, .12); --rk-line-2: rgba(17, 17, 19, .26); --rk-card: #FFFFFF; --rk-card-2: #ECECE9; --rk-acc: var(--rk-red-dk); } /* ---- 한글 줄바꿈: 단어 중간에서 끊지 않는다 (Elementor 에 컨트롤이 없는 CJK 속성) ---- */ .elementor-widget-heading .elementor-heading-title, .elementor-widget-text-editor, .elementor-widget-image-box .elementor-image-box-title, .elementor-widget-image-box .elementor-image-box-description, .elementor-widget-icon-box .elementor-icon-box-title, .elementor-widget-icon-box .elementor-icon-box-description, .elementor-widget-icon-list .elementor-icon-list-text, .elementor-widget-button .elementor-button-text, .elementor-tab-title, .elementor-tab-content, .e-n-accordion-item-title-text, .e-n-tab-title-text, .elementor-widget-counter .elementor-counter-title, .elementor-widget-testimonial .elementor-testimonial-content, .rk-reel, .rk-works, .rk-est, .rk-plan, .rk-cal, .rk-lt, .rk-modal { word-break: keep-all; overflow-wrap: break-word; } .elementor-widget-heading .elementor-heading-title, .elementor-widget-text-editor, .elementor-widget-icon-box .elementor-icon-box-description, .elementor-widget-image-box .elementor-image-box-description, .elementor-widget-icon-list .elementor-icon-list-text, .elementor-widget-counter .elementor-counter-title, .rk-lt, .rk-work__title, .rk-plan__txt small { text-wrap: pretty; } .elementor-widget-button .elementor-button { white-space: nowrap; } .elementor-widget-image a { display: block; } .elementor-counter-number-wrapper, .rk-num, .rk-est__sum, .rk-plan__when, .rk-reel__tc, .rk-cal__day { font-variant-numeric: tabular-nums; } .elementor-counter-number-wrapper { white-space: nowrap; } .rk-sr, .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } html.rk-lock { overflow: hidden; } ::selection { background: var(--rk-red); color: #fff; } /* ========================================================================== 헤더 — 검정 막대. 홈 첫 화면에서는 투명(영상 위)이다가 스크롤하면 검정. 고정은 컨테이너 컨트롤(position:fixed), 여기서는 전환·폭 보정만. ========================================================================== */ .rk-bar { transition: background-color .4s var(--rk-ease), box-shadow .4s var(--rk-ease), backdrop-filter .4s; } body.home:not(.rk-scrolled) .rk-bar { background-color: transparent !important; background-image: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0)) !important; } body.rk-scrolled .rk-bar { background-color: rgba(11, 11, 12, .9) !important; backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); box-shadow: 0 1px 0 rgba(242,242,240,.08); } /* HFE 가로 메뉴: 창 크기가 바뀌면 HFE 가 메뉴 폭을 소수점 버림 값으로 고정해 마지막 항목이 둘째 줄로 내려간다(73696 독립 검증) */ @media (min-width: 1025px) { .rk-header nav.hfe-nav-menu__layout-horizontal { width: auto !important; left: 0 !important; } .rk-header nav.hfe-nav-menu__layout-horizontal > ul { flex-wrap: nowrap; } } @media (max-width: 1279px) { .rk-hwide { display: none !important; } } body.admin-bar .rk-header { top: 32px !important; } @media (max-width: 782px) { body.admin-bar .rk-header { top: 46px !important; } } .hfe-nav-menu .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -24px; height: 24px; } /* 현재 페이지 메뉴 앞 빨간 점 */ .rk-header .hfe-nav-menu > li.current-menu-item > a.hfe-menu-item::before, .rk-header .hfe-nav-menu > li.current-menu-ancestor > a.hfe-menu-item::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--rk-red); margin-right: 8px; flex: 0 0 auto; } /* 키보드 초점 */ a:focus-visible, button:focus-visible, .elementor-button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .hfe-nav-menu a.hfe-menu-item:focus-visible, .hfe-nav-menu a.hfe-sub-menu-item:focus-visible, .rk-cmp__bar:focus-visible { outline: 2px solid var(--rk-red); outline-offset: 3px; } /* ========================================================================== 공통 장식 ========================================================================== */ /* 라벨 — 빨간 녹화 점 + 고정폭 대문자 (제목 위젯에 rk-tag) */ .rk-tag .elementor-heading-title { display: inline-flex; align-items: center; gap: 10px; font-family: var(--rk-mono) !important; text-transform: uppercase; } .rk-tag .elementor-heading-title::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rk-red); flex: 0 0 auto; box-shadow: 0 0 0 4px rgba(255, 68, 51, .16); } .rk-tag.is-line .elementor-heading-title::after { content: ""; width: 48px; height: 1px; background: currentColor; opacity: .5; } /* 제목 안 = 빨간 마침표 대신 강조색 (제목 위젯에 rk-em) */ .rk-em .elementor-heading-title em, .rk-reel__title em { font-style: normal; color: var(--rk-acc); } .rk-em .elementor-heading-title em.is-fg { color: inherit; -webkit-text-stroke: 1px currentColor; -webkit-text-fill-color: transparent; } /* 외곽선 영문 대형 글자 (제목 위젯에 rk-outline) */ .rk-outline .elementor-heading-title { font-family: var(--rk-display) !important; -webkit-text-stroke: 1px var(--rk-line-2); -webkit-text-fill-color: transparent; text-transform: uppercase; letter-spacing: .01em; line-height: .9 !important; } /* 고정폭 숫자·메타 (텍스트·제목 위젯에 rk-mono) */ .rk-mono, .rk-mono .elementor-heading-title, .rk-mono .elementor-widget-container { font-family: var(--rk-mono) !important; } /* 뷰파인더 모서리 (이미지·컨테이너에 rk-vf) — 네 모서리 ㄱ자 */ .rk-vf { position: relative; } .rk-vf::after { content: ""; position: absolute; inset: 14px; pointer-events: none; z-index: 2; opacity: .85; --c: rgba(255, 255, 255, .9); --s: 22px; --w: 1.5px; background: linear-gradient(var(--c), var(--c)) top left / var(--s) var(--w), linear-gradient(var(--c), var(--c)) top left / var(--w) var(--s), linear-gradient(var(--c), var(--c)) top right / var(--s) var(--w), linear-gradient(var(--c), var(--c)) top right / var(--w) var(--s), linear-gradient(var(--c), var(--c)) bottom left / var(--s) var(--w), linear-gradient(var(--c), var(--c)) bottom left / var(--w) var(--s), linear-gradient(var(--c), var(--c)) bottom right / var(--s) var(--w), linear-gradient(var(--c), var(--c)) bottom right / var(--w) var(--s); background-repeat: no-repeat; } /* 서브 히어로: 고정 헤더 아래로 모서리를 내린다 */ .rk-vf.is-hero::after { top: calc(var(--rk-hh) + 22px); inset-inline: 32px; bottom: 22px; } @media (max-width: 767px) { .rk-vf.is-hero::after { inset-inline: 12px; bottom: 12px; top: calc(var(--rk-hh) + 12px); --s: 16px; } } .rk-maxw { max-width: 40em; } /* 필름 입자 (어두운 섹션에 rk-grain) — 아주 옅게 */ .rk-grain { position: relative; isolation: isolate; } .rk-grain::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .07; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .rk-grain > * { position: relative; z-index: 1; } /* 등장 효과 — JS 가 살아 있을 때만 숨긴 채로 시작. · 이미지 위젯(rk-reveal): 74223 협회 사이트와 같은 사진 리빌 — 가운데 작은 사각형이 돌지 않고 그대로 커지며 사진이 드러나고, 사진은 1.14배에서 제자리로 (easeInOutCubic 1.8초, 시작은 각진 사각형, 이 사이트 사진은 반경 0). · 이미지가 아닌 컨테이너(영상 캡션·비교 슬라이더 묶음)는 그대로 페이드업. · 이미지 위젯이 든 컨테이너(콘텐츠 페이지 포맷 카드)는 컨테이너가 페이드업하고 안쪽 이미지 위젯에 같은 사진 리빌. ★ 클립은 관찰 대상(.rk-reveal)이 아니라 안쪽 img 에 건다 — 루트를 잘라 버리면 IntersectionObserver 가 잘린 면적으로 비율을 재서 threshold(0.08)를 못 넘고 is-in 이 영영 안 붙는다(사진이 점으로 남음). 1.14배로 키운 사진이 가로로 넘치지 않게 이미지 위젯은 overflow hidden. */ .rk-js .rk-reveal:not(.elementor-widget-image):not(.is-in) { opacity: 0; transform: translateY(28px); } .rk-js .rk-reveal:not(.elementor-widget-image) { transition: opacity .9s var(--rk-ease), transform .9s var(--rk-ease); } .rk-js .rk-reveal.is-delay-1:not(.elementor-widget-image) { transition-delay: .08s; } .rk-js .rk-reveal.is-delay-2:not(.elementor-widget-image) { transition-delay: .16s; } .rk-js .rk-reveal.is-delay-3:not(.elementor-widget-image) { transition-delay: .24s; } .rk-js .rk-reveal.elementor-widget-image, .rk-js .rk-reveal.e-con .elementor-widget-image { overflow: hidden; } .rk-js .rk-reveal.elementor-widget-image:not(.is-in) img, .rk-js .rk-reveal.e-con:not(.is-in) .elementor-widget-image img { clip-path: inset(49.5% round 0); } .rk-js .rk-reveal.elementor-widget-image img, .rk-js .rk-reveal.e-con .elementor-widget-image img { transform: scale(1.14); transition: transform 2s var(--rk-ease); } .rk-js .rk-reveal.elementor-widget-image.is-in img, .rk-js .rk-reveal.e-con.is-in .elementor-widget-image img { clip-path: inset(0 round 0); transform: scale(1); transition: clip-path 1.8s cubic-bezier(.65, 0, .35, 1), transform 2s var(--rk-ease); } .rk-js .rk-reveal.elementor-widget-image.is-delay-1.is-in img { transition-delay: .08s; } .rk-js .rk-reveal.elementor-widget-image.is-delay-2.is-in img { transition-delay: .16s; } .rk-js .rk-reveal.elementor-widget-image.is-delay-3.is-in img { transition-delay: .24s; } .elementor-editor-active .rk-reveal { opacity: 1 !important; transform: none !important; } .elementor-editor-active .rk-reveal.elementor-widget-image img, .elementor-editor-active .rk-reveal .elementor-widget-image img { clip-path: none !important; transform: none !important; } /* 사진 위 호버 확대 (이미지 위젯에 rk-zoom) */ .rk-zoom .elementor-widget-container, .rk-zoom { overflow: hidden; } .rk-zoom img { transition: transform 1.2s var(--rk-ease); } .rk-zoom:hover img { transform: scale(1.04); } /* 사진 리빌과 겹칠 때 — 리빌이 끝난 뒤의 호버 확대가 리빌 규칙(img scale(1))에 눌리지 않게 */ .rk-js .rk-reveal.rk-zoom.is-in img { transition: clip-path 1.8s cubic-bezier(.65, 0, .35, 1), transform 1.2s var(--rk-ease); } .rk-js .rk-reveal.rk-zoom.is-in:hover img { transform: scale(1.04); } @media (prefers-reduced-motion: reduce) { .rk-js .rk-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .rk-js .rk-reveal.elementor-widget-image img, .rk-js .rk-reveal .elementor-widget-image img { clip-path: none !important; transform: none !important; transition: none !important; } .rk-zoom img { transition: none; } } /* ---- 공용 버튼 (위젯 안에서 쓰는 것. 페이지 버튼은 Elementor 버튼 위젯) ---- */ .rk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; font: 700 15px/1 'Noto Sans KR', sans-serif; letter-spacing: -.01em; text-decoration: none !important; white-space: nowrap; border: 1px solid transparent; border-radius: 0; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s, transform .25s var(--rk-ease); } .rk-btn::after { content: "→"; font-family: var(--rk-mono); font-weight: 500; transition: transform .25s var(--rk-ease); } .rk-btn:hover::after { transform: translateX(4px); } .rk-btn--light { background: #F2F2F0; color: #0B0B0C !important; } .rk-btn--light:hover { background: #fff; } .rk-btn--line { border-color: rgba(242, 242, 240, .5); color: #F2F2F0 !important; } .rk-btn--line:hover { border-color: #F2F2F0; background: rgba(242, 242, 240, .08); } .rk-light .rk-btn--line { border-color: var(--rk-line-2); color: var(--rk-fg) !important; } .rk-btn--accent { background: var(--rk-red); color: #0B0B0C !important; } /* 검정 글자 6.4:1 */ .rk-btn--accent:hover { background: #ff6152; } .rk-btn.is-off { opacity: .4; cursor: not-allowed; pointer-events: auto; } /* ========================================================================== Elementor 기본 위젯 다듬기 — 크레딧식 목록 · 밑줄 탭 · 아코디언 · 표 · 단계 · 고객 한마디 ========================================================================== */ /* 크레딧식 목록 (링크 컨테이너 rk-idx): 마우스를 올리면 제목이 빨갛게, 화살표가 밀린다 */ a.rk-idx { transition: background-color .35s var(--rk-ease); } a.rk-idx .rk-idx__t .elementor-heading-title { transition: color .3s, transform .45s var(--rk-ease); } a.rk-idx:hover .rk-idx__t .elementor-heading-title { color: var(--rk-red) !important; transform: translateX(10px); } a.rk-idx .rk-idx__a .elementor-icon { transition: transform .45s var(--rk-ease); } a.rk-idx:hover .rk-idx__a .elementor-icon { transform: translateX(8px) rotate(-45deg); } .rk-light a.rk-idx:hover .rk-idx__t .elementor-heading-title { color: var(--rk-red-dk) !important; } /* 밑줄 탭: 현재 탭 아래 빨간 2px */ .rk-utabs .e-n-tab-title { position: relative; } .rk-utabs .e-n-tab-title[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--rk-red); } .rk-utabs .e-n-tabs-heading { border-bottom: 1px solid var(--rk-line); gap: 0 34px; flex-wrap: wrap; } @media (max-width: 767px) { .rk-utabs .e-n-tabs-heading { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .rk-utabs .e-n-tab-title { flex: 0 0 auto; } } /* 아코디언: 열린 항목 제목 앞 빨간 점, 마지막 줄 아래 선. Elementor 기본 내용 패널 테두리(#D5D8DC)가 크레딧 줄 사이에 상자로 보이고 글자가 붙었다(독립 검증 10-28) → 없앤다 */ .rk-acc .e-n-accordion-item > .e-con, .rk-acc .e-n-accordion-item > [role="region"] { border: 0 !important; } .rk-acc .e-n-accordion-item:last-child { border-bottom: 1px solid var(--rk-line); } .rk-acc .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-text::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--rk-red); margin: 0 14px 4px 0; vertical-align: middle; } /* 표 (텍스트 편집기에 rk-table) */ .rk-table table { width: 100%; border-collapse: collapse; margin: 0; font-variant-numeric: tabular-nums; } .rk-table th, .rk-table td { padding: 16px 14px; text-align: left; border: 0; border-bottom: 1px solid var(--rk-line); background: transparent !important; vertical-align: top; } .rk-table thead th { font: 500 12px/1.4 var(--rk-mono); letter-spacing: .08em; color: var(--rk-fg-3); text-transform: uppercase; border-bottom-color: var(--rk-line-2); } .rk-table tbody th { color: var(--rk-fg); font-weight: 700; white-space: nowrap; } .rk-table td { color: var(--rk-fg-2); } .rk-table .is-num { text-align: right; white-space: nowrap; } @media (max-width: 767px) { .rk-table { overflow-x: auto; } .rk-table table { min-width: 560px; } .rk-table th, .rk-table td { padding: 13px 10px; } } /* 카운터 단위(+ % 편 주 …): 숫자는 Anton(한글 없음) → 단위는 Noto Sans KR 로 작게 */ .elementor-counter-number-suffix, .elementor-counter-number-prefix { font-family: 'Noto Sans KR', sans-serif !important; font-size: .42em; font-weight: 700; letter-spacing: 0; margin-left: 6px; vertical-align: .9em; } .elementor-counter-number-prefix { margin: 0 6px 0 0; } /* 엔드 크레딧 (텍스트 편집기에 rk-credits) — 영화 끝 자막처럼 가운데 정렬 두 칸 */ .rk-credits dl { margin: 0 auto; display: grid; gap: 14px; max-width: 640px; } .rk-credits dl div { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: baseline; } .rk-credits dt { text-align: right; font: 500 12px/1.6 var(--rk-mono); letter-spacing: .1em; color: var(--rk-fg-3); text-transform: uppercase; } .rk-credits dd { margin: 0; font-size: 17px; color: var(--rk-fg); } @media (max-width: 767px) { .rk-credits dl div { gap: 16px; } .rk-credits dd { font-size: 15px; } } /* 다음 사례 띠 */ a.rk-next { transition: background-size 1.2s var(--rk-ease); } /* 고객 한마디 (테스티모니얼에 rk-quote) */ .rk-quote .elementor-testimonial-content::before { content: "“"; display: block; font: 700 72px/0.5 Georgia, 'Times New Roman', serif; color: var(--rk-red); margin-bottom: 22px; } .rk-quote .elementor-testimonial-content { margin-bottom: 26px; } .rk-quote .elementor-testimonial-meta-inner { display: block; } /* ========================================================================== 쇼릴 히어로 ========================================================================== */ .rk-reel { position: relative; height: 100vh; min-height: 560px; overflow: hidden; background: #000; color: #F2F2F0; isolation: isolate; --rk-shade: .55; } .rk-reel__stage, .rk-reel__clip { position: absolute; inset: 0; margin: 0; } .rk-reel__clip { opacity: 0; transition: opacity 1s var(--rk-ease); } .rk-reel__clip.is-on { opacity: 1; z-index: 1; } .rk-reel__img, .rk-reel__vid { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; max-width: none; } .rk-reel__vid { opacity: 0; transition: opacity .6s; } .rk-reel__clip.has-vid .rk-reel__vid { opacity: 1; } .rk-reel__clip.is-on .rk-reel__img { animation: rk-kb 9s linear both; } @keyframes rk-kb { from { transform: scale(1.06); } to { transform: scale(1); } } .rk-reel__shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,calc(var(--rk-shade) + .2)) 0%, rgba(0,0,0,var(--rk-shade)) 38%, rgba(0,0,0,calc(var(--rk-shade) * .35)) 70%, rgba(0,0,0,calc(var(--rk-shade) * .2)) 100%), linear-gradient(0deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 34%); } .rk-reel__frame { position: absolute; inset: calc(var(--rk-hh) + 20px) 32px 32px; z-index: 3; pointer-events: none; } .rk-reel__frame i { position: absolute; width: 28px; height: 28px; border: 0 solid rgba(255,255,255,.75); } .rk-reel__frame i:nth-child(1) { top: 0; left: 0; border-width: 1.5px 0 0 1.5px; } .rk-reel__frame i:nth-child(2) { top: 0; right: 0; border-width: 1.5px 1.5px 0 0; } .rk-reel__frame i:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 1.5px 1.5px; } .rk-reel__frame i:nth-child(4) { bottom: 0; right: 0; border-width: 0 1.5px 1.5px 0; } .rk-reel__hud { position: absolute; z-index: 4; top: calc(var(--rk-hh) + 34px); left: 56px; right: 56px; display: flex; gap: 22px; align-items: center; font: 500 12px/1 var(--rk-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(242,242,240,.82); } .rk-reel__rec { display: inline-flex; align-items: center; gap: 8px; color: #fff; } .rk-reel__rec::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--rk-red); animation: rk-blink 1.2s steps(1) infinite; } .rk-reel.is-paused .rk-reel__rec::before { animation: none; background: rgba(242,242,240,.4); } @keyframes rk-blink { 50% { opacity: .15; } } .rk-reel__idx { margin-left: auto; } .rk-reel__idx b { color: #fff; font-weight: 700; } .rk-reel__body { position: absolute; z-index: 4; left: 0; right: 0; bottom: clamp(96px, 13vh, 150px); margin: 0 auto; width: min(1360px, 100% - 112px); } .rk-reel__eyebrow { margin: 0 0 22px; font: 500 13px/1.4 var(--rk-mono); letter-spacing: .16em; color: rgba(242,242,240,.82); text-transform: uppercase; } .rk-reel__title { margin: 0; max-width: 15em; font: 700 clamp(44px, 6.6vw, 112px)/1.02 'Noto Sans KR', sans-serif; letter-spacing: -.055em; color: #fff; text-wrap: balance; } .rk-reel__desc { margin: 26px 0 0; max-width: 34em; font: 400 clamp(15px, 1.15vw, 18px)/1.75 'Noto Sans KR', sans-serif; color: rgba(242,242,240,.84); } .rk-reel__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; } .rk-reel__ctrl { position: absolute; z-index: 5; right: 56px; bottom: 48px; display: flex; align-items: center; gap: 18px; } .rk-reel__pp { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(242,242,240,.45); background: rgba(0,0,0,.25); cursor: pointer; display: grid; place-items: center; padding: 0; } .rk-reel__pp span { width: 12px; height: 14px; border-left: 3px solid #fff; border-right: 3px solid #fff; } .rk-reel.is-paused .rk-reel__pp span { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent #fff; margin-left: 3px; } .rk-reel__dots { display: flex; gap: 8px; } .rk-reel__dot { position: relative; width: 56px; height: 24px; padding: 0; background: none; border: 0; cursor: pointer; } .rk-reel__dot::before, .rk-reel__dot i { content: ""; position: absolute; left: 0; top: 50%; height: 2px; margin-top: -1px; } .rk-reel__dot::before { right: 0; background: rgba(242,242,240,.3); } .rk-reel__dot i { width: 100%; background: #fff; transform-origin: left; transform: scaleX(var(--rk-prog, 0)); } @media (max-width: 1024px) { .rk-reel__hud { left: 32px; right: 32px; } .rk-reel__frame { inset: calc(var(--rk-hh) + 14px) 20px 20px; } .rk-reel__body { width: calc(100% - 64px); } .rk-reel__ctrl { right: 32px; bottom: 36px; } } @media (max-width: 767px) { /* 하단 고정 문의 바(62px)가 히어로 아래 단추(일시정지·장면)를 덮었다(10-28 390 실측) → 바 높이만큼 짧게 */ .rk-reel { min-height: 560px; height: calc(100svh - 62px) !important; } .rk-reel__hud { left: 20px; right: 20px; top: calc(var(--rk-hh) + 22px); gap: 14px; font-size: 11px; } .rk-reel__lab { display: none; } .rk-reel__frame { inset: calc(var(--rk-hh) + 10px) 12px 12px; } .rk-reel__frame i { width: 18px; height: 18px; } /* 고정 백링크(바 위 8px, 높이 약 38px)가 일시정지·장면 단추를 덮었다(10-28 Aside 390) → 단추·문구를 그 위로 */ .rk-reel__body { width: calc(100% - 40px); bottom: 128px; } .rk-reel__eyebrow { font-size: 11px; margin-bottom: 16px; } .rk-reel__title { font-size: clamp(36px, 10.4vw, 48px); line-height: 1.08; } .rk-reel__desc { margin-top: 18px; } .rk-reel__btns { margin-top: 26px; } .rk-reel__btns .rk-btn { min-height: 48px; padding: 0 20px; font-size: 14px; } .rk-reel__ctrl { left: 20px; right: auto; bottom: 62px; } .rk-reel__dot { width: 36px; } .rk-reel__shade { background: linear-gradient(0deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.5) 50%, rgba(0,0,0,.3) 100%); } } @media (prefers-reduced-motion: reduce) { .rk-reel__clip.is-on .rk-reel__img { animation: none; } .rk-reel__rec::before { animation: none; } } /* ========================================================================== 작업물 그리드 + 재생 창 ========================================================================== */ .rk-works { --rk-ratio: 16 / 9; color: var(--rk-fg); } .rk-works__filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; } .rk-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 18px; border: 1px solid var(--rk-line-2); background: transparent; color: var(--rk-fg-2); font: 500 14px/1 'Noto Sans KR', sans-serif; cursor: pointer; border-radius: 999px; transition: all .25s; } .rk-chip small { font: 500 11px/1 var(--rk-mono); color: var(--rk-fg-3); } .rk-chip:hover { color: var(--rk-fg); border-color: var(--rk-fg-2); } .rk-chip.is-on { background: var(--rk-fg); color: var(--rk-card) !important; border-color: var(--rk-fg); } .rk-light .rk-chip.is-on { color: #fff !important; } .rk-chip.is-on small { color: inherit; opacity: .7; } .rk-works__grid { --rk-cols: 3; display: grid; grid-template-columns: repeat(var(--rk-cols), minmax(0, 1fr)); gap: 44px 28px; } .rk-work.is-wide { grid-column: span min(2, var(--rk-cols)); } .rk-work[hidden] { display: none; } .rk-work.is-in { animation: rk-in .6s var(--rk-ease) both; } @keyframes rk-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .rk-work__open { display: block; width: 100%; padding: 0; margin: 0; background: none; border: 0; text-align: left; color: inherit; cursor: pointer; font: inherit; } .rk-work__media { position: relative; display: block; aspect-ratio: var(--rk-ratio); overflow: hidden; background: var(--rk-card-2); } .rk-work.is-wide .rk-work__media { aspect-ratio: 32 / 9.3; } /* 두 칸 + 칸 간격 → 옆 카드 사진 높이와 거의 같게 */ .rk-work__img, .rk-work__vid { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; max-width: none; transition: transform 1.1s var(--rk-ease), opacity .5s; } .rk-work__vid { opacity: 0; } .rk-work.is-vid .rk-work__vid { opacity: 1; } .rk-work__open:hover .rk-work__img, .rk-work__open:hover .rk-work__vid { transform: scale(1.035); } .rk-work__play { position: absolute; left: 20px; bottom: 20px; width: 52px; height: 52px; border-radius: 50%; background: rgba(11,11,12,.55); border: 1px solid rgba(255,255,255,.4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background-color .3s, transform .3s var(--rk-ease); } .rk-work__play::after { content: ""; position: absolute; left: 50%; top: 50%; margin: -7px 0 0 -4px; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent #fff; } .rk-work__open:hover .rk-work__play { background: var(--rk-red); border-color: var(--rk-red); transform: scale(1.06); } .rk-work__rt { position: absolute; right: 16px; top: 16px; padding: 6px 9px; background: rgba(11,11,12,.66); color: #fff; font: 500 11px/1 var(--rk-mono); letter-spacing: .06em; } .rk-work__meta { display: grid; gap: 6px; padding-top: 18px; } .rk-work__cat { font: 500 12px/1.3 var(--rk-mono); letter-spacing: .08em; color: var(--rk-acc); text-transform: uppercase; } .rk-work__title { font: 700 clamp(18px, 1.5vw, 22px)/1.4 'Noto Sans KR', sans-serif; letter-spacing: -.03em; color: var(--rk-fg); } .rk-work__sub { font: 400 14px/1.5 'Noto Sans KR', sans-serif; color: var(--rk-fg-3); } .rk-works__empty { padding: 48px 0; text-align: center; color: var(--rk-fg-3); } @media (max-width: 1024px) { .rk-works__grid { --rk-cols: 2; gap: 36px 20px; } } @media (max-width: 767px) { .rk-works__grid { --rk-cols: 1; gap: 32px; } .rk-work.is-wide .rk-work__media { aspect-ratio: var(--rk-ratio); } .rk-works__filter { flex-wrap: nowrap; overflow-x: auto; margin: 0 -20px 26px; padding: 0 20px; scrollbar-width: none; } .rk-works__filter::-webkit-scrollbar { display: none; } .rk-chip { flex: 0 0 auto; } } .rk-modal { width: min(1180px, calc(100% - 32px)); max-width: none; max-height: calc(100% - 32px); padding: 0; border: 0; background: #0B0B0C; color: #F2F2F0; overflow: auto; } .rk-modal::backdrop { background: rgba(0, 0, 0, .86); } .rk-modal[open] { animation: rk-in .45s var(--rk-ease) both; } .rk-modal__box { position: relative; } .rk-modal__x { position: absolute; right: 12px; top: 12px; z-index: 2; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.55); color: #fff; font: 300 28px/1 sans-serif; cursor: pointer; } .rk-modal__player { background: #000; aspect-ratio: 16 / 9; } .rk-modal__player video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; } .rk-modal__info { display: grid; grid-template-columns: 1.1fr 1fr; gap: 8px 48px; padding: 32px 36px 40px; } .rk-modal__cat { grid-column: 1 / -1; margin: 0; font: 500 12px/1.4 var(--rk-mono); letter-spacing: .08em; color: var(--rk-red); } .rk-modal__title { margin: 0; font: 700 clamp(22px, 2.2vw, 30px)/1.3 'Noto Sans KR', sans-serif; letter-spacing: -.035em; color: #fff; } .rk-modal__sub { margin: 4px 0 0; color: rgba(242,242,240,.6); font-size: 15px; } .rk-modal__desc { grid-column: 1; margin: 14px 0 0; color: rgba(242,242,240,.8); font-size: 15px; line-height: 1.8; } .rk-modal__credits { grid-column: 2; grid-row: 2 / span 3; margin: 0; display: grid; gap: 0; align-content: start; border-top: 1px solid rgba(242,242,240,.14); } .rk-modal__credits div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(242,242,240,.1); font-size: 14px; } .rk-modal__credits dt { color: rgba(242,242,240,.56); font-family: var(--rk-mono); font-size: 12px; letter-spacing: .04em; padding-top: 2px; } .rk-modal__credits dd { margin: 0; color: #F2F2F0; } .rk-modal__link { grid-column: 1; justify-self: start; margin-top: 18px; } @media (max-width: 767px) { .rk-modal { width: 100%; max-height: 100%; height: 100%; } .rk-modal__info { grid-template-columns: 1fr; padding: 24px 20px 40px; } .rk-modal__credits { grid-column: 1; grid-row: auto; margin-top: 18px; } .rk-modal__link { grid-column: 1; } } /* ========================================================================== 제작비 계산기 ========================================================================== */ .rk-est { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 40px; align-items: start; color: var(--rk-fg); margin: 0; } .rk-est__q { display: grid; gap: 30px; } .rk-est__set { margin: 0; padding: 0; border: 0; min-width: 0; } .rk-est__set legend, .rk-cal__spaces legend { padding: 0; margin-bottom: 14px; font: 700 16px/1.4 'Noto Sans KR', sans-serif; color: var(--rk-fg); } .rk-est__set legend small { font-weight: 400; color: var(--rk-fg-3); font-size: 13px; } .rk-est__opts { display: flex; flex-wrap: wrap; gap: 8px; } .rk-est__opts.is-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .rk-pick { position: relative; display: block; cursor: pointer; } .rk-pick input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .rk-pick span { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 58px; padding: 12px 18px; border: 1px solid var(--rk-line-2); color: var(--rk-fg-2); font: 500 15px/1.35 'Noto Sans KR', sans-serif; transition: all .2s; background: var(--rk-card); } .rk-pick.is-sm span { min-height: 46px; padding: 10px 16px; font-size: 14px; } .rk-pick span small { font-size: 13px; color: var(--rk-fg-3); font-weight: 400; } .rk-pick:hover span { border-color: var(--rk-fg-2); color: var(--rk-fg); } .rk-pick input:checked + span { border-color: var(--rk-fg); color: var(--rk-fg); box-shadow: inset 0 0 0 1px var(--rk-fg); } .rk-pick input:checked + span::before { content: ""; position: absolute; right: 10px; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--rk-red); } .rk-pick input:focus-visible + span { outline: 2px solid var(--rk-red); outline-offset: 2px; } .rk-est__out { position: sticky; top: calc(var(--rk-hh) + 24px); padding: 34px 32px 32px; background: #0B0B0C; color: #F2F2F0; border-top: 3px solid var(--rk-red); } .rk-est__out.is-flash .rk-est__sum { animation: rk-flash .5s var(--rk-ease); } @keyframes rk-flash { from { opacity: .35; transform: translateY(4px); } to { opacity: 1; transform: none; } } .rk-est__k { margin: 0; font: 500 12px/1 var(--rk-mono); letter-spacing: .12em; color: rgba(242,242,240,.6); text-transform: uppercase; } .rk-est__sum { margin: 16px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; font: 700 clamp(30px, 2.6vw, 40px)/1.15 'Noto Sans KR', sans-serif; letter-spacing: -.04em; color: #fff; } .rk-est__sum span { color: rgba(242,242,240,.5); font-weight: 400; } .rk-est__sum small { font-size: 16px; font-weight: 500; margin-left: 4px; color: rgba(242,242,240,.75); letter-spacing: 0; } .rk-est__vat { margin: 10px 0 0; font-size: 13px; line-height: 1.6; color: rgba(242,242,240,.6); } .rk-est__facts { margin: 26px 0 28px; display: grid; gap: 0; border-top: 1px solid rgba(242,242,240,.14); } .rk-est__facts div { padding: 14px 0; border-bottom: 1px solid rgba(242,242,240,.14); } .rk-est__facts dt { font-size: 13px; color: rgba(242,242,240,.6); margin-bottom: 6px; } .rk-est__facts dd { margin: 0; font-size: 15px; line-height: 1.6; color: #F2F2F0; } .rk-est__go { width: 100%; } @media (max-width: 1024px) { .rk-est { grid-template-columns: 1fr; } .rk-est__out { position: static; } } @media (max-width: 767px) { .rk-est__opts.is-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rk-est__out { padding: 28px 22px 24px; } } /* ========================================================================== 납기 역산 플래너 ========================================================================== */ .rk-plan { color: var(--rk-fg); } .rk-plan__in { display: grid; grid-template-columns: 240px 280px 1fr; gap: 16px; align-items: end; padding-bottom: 28px; border-bottom: 1px solid var(--rk-line); } .rk-field { display: grid; gap: 8px; } .rk-field span { font: 700 14px/1.4 'Noto Sans KR', sans-serif; color: var(--rk-fg-2); } .rk-field input, .rk-field select { height: 52px; padding: 0 14px; border: 1px solid var(--rk-line-2); background: var(--rk-card); color: var(--rk-fg); font: 500 16px/1 'Noto Sans KR', sans-serif; border-radius: 0; color-scheme: dark; } .rk-light .rk-field input, .rk-light .rk-field select { color-scheme: light; } .rk-plan__kick { margin: 0; justify-self: end; font-size: 15px; color: var(--rk-fg-2); text-align: right; } .rk-plan__kick b { color: var(--rk-fg); font-size: 20px; letter-spacing: -.02em; margin: 0 2px; } .rk-plan.is-late .rk-plan__kick b { color: var(--rk-acc); text-decoration: line-through; text-decoration-thickness: 1px; } .rk-plan__list { list-style: none; margin: 0; padding: 0; counter-reset: s; } .rk-plan__list li { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) 330px; gap: 8px 20px; align-items: center; padding: 22px 0 30px; border-bottom: 1px solid var(--rk-line); } .rk-plan__no { font: 500 13px/1 var(--rk-mono); color: var(--rk-acc); letter-spacing: .06em; } .rk-plan__txt { display: grid; gap: 4px; } .rk-plan__txt b { font: 700 18px/1.4 'Noto Sans KR', sans-serif; color: var(--rk-fg); letter-spacing: -.02em; } .rk-plan__txt small { font-size: 14px; line-height: 1.6; color: var(--rk-fg-3); } .rk-plan__when { margin: 0; display: grid; justify-items: end; gap: 4px; } .rk-plan__when time { font: 500 14px/1.3 var(--rk-mono); color: var(--rk-fg); white-space: nowrap; letter-spacing: -.01em; } .rk-plan__when em { font-style: normal; font-size: 13px; color: var(--rk-fg-3); } .rk-plan__bar { position: absolute; left: 76px; right: 0; bottom: 12px; height: 4px; background: var(--rk-line); } .rk-plan__bar i { position: absolute; top: 0; bottom: 0; left: var(--l); width: var(--w); background: var(--rk-fg); } .rk-plan__list li:last-child .rk-plan__bar i { background: var(--rk-red); } .rk-plan__warn { margin: 20px 0 0; padding: 14px 18px; border-left: 3px solid var(--rk-red); background: rgba(255, 68, 51, .1); color: var(--rk-fg); font-size: 15px; line-height: 1.6; } .rk-plan__note { margin: 18px 0 24px; font-size: 13px; color: var(--rk-fg-3); } @media (max-width: 1024px) { .rk-plan__in { grid-template-columns: 1fr 1fr; } .rk-plan__kick { grid-column: 1 / -1; justify-self: start; text-align: left; } .rk-plan__list li { grid-template-columns: 44px minmax(0, 1fr); } .rk-plan__when { grid-column: 2; justify-items: start; } .rk-plan__bar { left: 64px; } } @media (max-width: 767px) { .rk-plan__in { grid-template-columns: 1fr; } .rk-plan__list li { grid-template-columns: 34px minmax(0, 1fr); gap: 6px 10px; } .rk-plan__bar { left: 44px; } .rk-plan__when time { white-space: normal; } } /* ========================================================================== 전후 비교 ========================================================================== */ .rk-cmp { --rk-ratio: 16 / 9; position: relative; aspect-ratio: var(--rk-ratio); overflow: hidden; user-select: none; touch-action: pan-y; cursor: ew-resize; background: #000; } .rk-cmp img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; max-width: none; pointer-events: none; } .rk-cmp__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--p)) 0 0); } .rk-cmp__bar { position: absolute; top: 0; bottom: 0; left: var(--p); width: 2px; margin-left: -1px; background: #fff; z-index: 3; } .rk-cmp__knob { position: absolute; top: 50%; left: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: #fff; box-shadow: 0 8px 30px rgba(0,0,0,.35); } .rk-cmp__knob::before, .rk-cmp__knob::after { content: ""; position: absolute; top: 50%; margin-top: -6px; border-style: solid; border-color: transparent; } .rk-cmp__knob::before { left: 13px; border-width: 6px 9px 6px 0; border-right-color: #0B0B0C; } .rk-cmp__knob::after { right: 13px; border-width: 6px 0 6px 9px; border-left-color: #0B0B0C; } .rk-cmp.is-drag .rk-cmp__knob { transform: scale(.92); } .rk-cmp__lab { position: absolute; top: 18px; z-index: 2; padding: 8px 12px; background: rgba(11,11,12,.7); color: #fff; font: 500 12px/1 var(--rk-mono); letter-spacing: .06em; } .rk-cmp__lab.is-l { left: 18px; } .rk-cmp__lab.is-r { right: 18px; } @media (max-width: 767px) { .rk-cmp__knob { width: 46px; height: 46px; margin: -23px 0 0 -23px; } } /* ========================================================================== 스튜디오 대관 달력 ========================================================================== */ .rk-cal { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 20px 40px; color: var(--rk-fg); } .rk-cal__spaces { margin: 0; padding: 0; border: 0; display: grid; gap: 10px; align-content: start; grid-row: span 2; min-width: 0; } .rk-cal__spaces .rk-pick span { min-height: 74px; } .rk-cal__spaces .rk-pick b { font-weight: 700; color: var(--rk-fg); } .rk-cal__box { border: 1px solid var(--rk-line); padding: 24px; background: var(--rk-card); } .rk-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .rk-cal__month { margin: 0; font: 700 20px/1 'Noto Sans KR', sans-serif; letter-spacing: -.02em; } .rk-cal__nav { width: 44px; height: 44px; border: 1px solid var(--rk-line-2); background: transparent; color: var(--rk-fg); font: 400 22px/1 sans-serif; cursor: pointer; } .rk-cal__nav:disabled { opacity: .3; cursor: default; } .rk-cal__week, .rk-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; } .rk-cal__week span { padding: 8px 0; text-align: center; font: 500 12px/1 var(--rk-mono); color: var(--rk-fg-3); } .rk-cal__week span:first-child { color: var(--rk-acc); } .rk-cal__day { aspect-ratio: 1 / .78; min-height: 40px; border: 1px solid var(--rk-line); background: transparent; color: var(--rk-fg); font: 500 15px/1 var(--rk-mono); cursor: pointer; position: relative; padding: 0; } .rk-cal__day.is-free:hover { border-color: var(--rk-fg); } .rk-cal__day.is-booked { color: var(--rk-fg-3); background: repeating-linear-gradient(135deg, transparent 0 6px, var(--rk-line) 6px 7px); cursor: not-allowed; } .rk-cal__day.is-past, .rk-cal__day.is-closed { color: var(--rk-fg-3); opacity: .45; border-color: transparent; cursor: default; } .rk-cal__day.is-today::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--rk-red); } .rk-cal__day.is-sel { background: var(--rk-fg); color: var(--rk-card); border-color: var(--rk-fg); } .rk-cal__legend { display: flex; flex-wrap: wrap; gap: 18px; list-style: none; margin: 16px 0 0; padding: 0; font-size: 13px; color: var(--rk-fg-3); } .rk-cal__legend li { display: inline-flex; align-items: center; gap: 8px; } .rk-cal__legend li::before { content: ""; width: 14px; height: 14px; border: 1px solid var(--rk-line-2); } .rk-cal__legend .is-booked::before { background: repeating-linear-gradient(135deg, transparent 0 3px, var(--rk-line-2) 3px 4px); } .rk-cal__legend .is-sel::before { background: var(--rk-fg); border-color: var(--rk-fg); } .rk-cal__foot { grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .rk-cal__picked { margin: 0; font-size: 16px; color: var(--rk-fg-2); } @media (max-width: 1024px) { .rk-cal { grid-template-columns: 1fr; } .rk-cal__spaces { grid-row: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); } .rk-cal__foot { grid-column: 1; } } @media (max-width: 767px) { .rk-cal__spaces { grid-template-columns: 1fr; } .rk-cal__box { padding: 16px 12px; } .rk-cal__week, .rk-cal__grid { gap: 4px; } .rk-cal__day { font-size: 14px; min-height: 38px; } .rk-cal__go { width: 100%; } } /* ========================================================================== 흐르는 글자 띠 ========================================================================== */ .rk-mq { --rk-mq-c: var(--rk-fg); overflow: hidden; color: var(--rk-mq-c); } .rk-mq__track { display: flex; width: max-content; animation: rk-mq var(--rk-mq-t, 40s) linear infinite; } .rk-mq.is-rev .rk-mq__track { animation-direction: reverse; } .rk-mq:hover .rk-mq__track { animation-play-state: paused; } .rk-mq__row { display: flex; align-items: center; flex: 0 0 auto; } .rk-mq__item { padding: 0 .55em; white-space: nowrap; font: 400 clamp(40px, 6vw, 96px)/1.1 var(--rk-display); text-transform: uppercase; letter-spacing: .01em; } .rk-mq.is-outline .rk-mq__item { -webkit-text-stroke: 1px var(--rk-mq-c); -webkit-text-fill-color: transparent; } .rk-mq__sep { color: var(--rk-red); font-size: .5em; } @keyframes rk-mq { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .rk-mq__track { animation: none; width: auto; flex-wrap: wrap; } .rk-mq__row + .rk-mq__row { display: none; } .rk-mq__row { flex-wrap: wrap; } } /* ========================================================================== 게시판 최신글 ========================================================================== */ .rk-lt { list-style: none; margin: 0; padding: 0; color: var(--rk-fg); } .rk-lt.is-list .rk-lt__item { border-bottom: 1px solid var(--rk-line); } .rk-lt.is-list .rk-lt__item:first-child { border-top: 1px solid var(--rk-line); } .rk-lt__row { display: flex; align-items: center; gap: 16px; padding: 18px 4px; text-decoration: none !important; color: inherit !important; transition: padding .3s var(--rk-ease); } .rk-lt.is-list a.rk-lt__row:hover { padding-left: 12px; } .rk-lt__date { flex: 0 0 auto; font: 500 13px/1 var(--rk-mono); color: var(--rk-fg-3); } .rk-lt__badge { flex: 0 0 auto; padding: 4px 8px; background: var(--rk-red); color: #0B0B0C; font-size: 12px; font-weight: 700; } .rk-lt__title { flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--rk-fg); } .rk-lt.is-list .rk-lt__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 모바일에서는 한 줄 말줄임이 핵심어를 잘랐다(독립 검증: '…홈페이지 달…') → 두 줄까지 */ @media (max-width: 767px) { .rk-lt.is-list .rk-lt__title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .rk-lt.is-list .rk-lt__row { align-items: flex-start; } } .rk-lt__file { flex: 0 0 auto; font-size: 12px; color: var(--rk-fg-3); border: 1px solid var(--rk-line-2); padding: 3px 7px; } .rk-lt.is-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } .rk-lt.is-cards .rk-lt__row { display: grid; gap: 16px; padding: 0; } .rk-lt__thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--rk-card-2); } .rk-lt__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--rk-ease); } .rk-lt.is-cards a.rk-lt__row:hover .rk-lt__thumb img { transform: scale(1.04); } .rk-lt__body { display: grid; gap: 8px; } .rk-lt.is-cards .rk-lt__title { font-size: 18px; font-weight: 700; letter-spacing: -.02em; } .rk-lt__ex { font-size: 14px; line-height: 1.7; color: var(--rk-fg-3); } .rk-lt__empty { color: var(--rk-fg-3); } @media (max-width: 1024px) { .rk-lt.is-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .rk-lt.is-cards { grid-template-columns: 1fr; } .rk-lt__row { gap: 10px; } .rk-lt__date { font-size: 12px; } .rk-lt__title { font-size: 15px; } } /* ========================================================================== 문의 폼 (CF7 — 폼을 담은 컨테이너에 rk-form) ========================================================================== */ .rk-form .wpcf7-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; } .rk-form .wpcf7-form > p, .rk-form .rk-f { margin: 0; display: grid; gap: 8px; min-width: 0; } .rk-form .rk-f.is-full, .rk-form .wpcf7-response-output, .rk-form .rk-f.is-sec { grid-column: 1 / -1; } .rk-form .rk-f.is-sec { margin-top: 18px; padding-top: 22px; border-top: 1px solid var(--rk-line); font: 500 12px/1 var(--rk-mono); letter-spacing: .12em; color: var(--rk-acc); text-transform: uppercase; } .rk-form label, .rk-form .rk-f > span.rk-l { font: 700 14px/1.4 'Noto Sans KR', sans-serif; color: var(--rk-fg); } .rk-form label em, .rk-form .rk-l em { font-style: normal; color: var(--rk-acc); margin-left: 3px; } .rk-form .wpcf7-form-control-wrap { display: block; } .rk-form input[type=text], .rk-form input[type=email], .rk-form input[type=tel], .rk-form input[type=url], .rk-form input[type=date], .rk-form input[type=number], .rk-form select, .rk-form textarea { width: 100%; height: 54px; padding: 0 16px; border: 1px solid var(--rk-line-2); border-radius: 0; background: var(--rk-card); color: var(--rk-fg); font: 400 16px/1.4 'Noto Sans KR', sans-serif; transition: border-color .2s; box-shadow: none; color-scheme: dark; } .rk-light .rk-form input, .rk-light .rk-form select, .rk-light .rk-form textarea { color-scheme: light; } .rk-form textarea { height: 168px; padding: 14px 16px; resize: vertical; } .rk-form input:focus, .rk-form select:focus, .rk-form textarea:focus { border-color: var(--rk-fg); outline: none; } .rk-form ::placeholder { color: var(--rk-fg-3); opacity: 1; } .rk-form .wpcf7-checkbox, .rk-form .wpcf7-radio { display: flex; flex-wrap: wrap; gap: 8px; } .rk-form .wpcf7-list-item { margin: 0; } .rk-form .wpcf7-list-item label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--rk-line-2); font-weight: 500; cursor: pointer; } .rk-form .wpcf7-list-item input { accent-color: var(--rk-red); width: 16px; height: 16px; } .rk-form .wpcf7-acceptance .wpcf7-list-item label { border: 0; padding: 0; min-height: 0; font-weight: 400; color: var(--rk-fg-2); } .rk-form input[type=file] { font-size: 14px; color: var(--rk-fg-2); } .rk-form input[type=file]::file-selector-button { margin-right: 14px; height: 40px; padding: 0 16px; border: 1px solid var(--rk-line-2); border-radius: 0; background: transparent; color: var(--rk-fg); font: 500 14px/1 'Noto Sans KR', sans-serif; cursor: pointer; } .rk-form input[type=file]::file-selector-button:hover { border-color: var(--rk-fg); } .rk-form .rk-hint { font-size: 13px; line-height: 1.6; color: var(--rk-fg-3); font-weight: 400; } /* 전역 킷 input[type=submit] 규칙(0,2,1)을 이기도록 (0,3,1) */ .rk-form .wpcf7-form input.wpcf7-submit { height: 58px; padding: 0 40px; border: 0; border-radius: 0; background: var(--rk-red); color: #0B0B0C; font: 700 16px/1 'Noto Sans KR', sans-serif; cursor: pointer; transition: background-color .2s; } .rk-form .wpcf7-form input.wpcf7-submit:hover { background: #ff6152; color: #0B0B0C; } /* 실시간 검증 문구가 칸 아래에 끼어들면 아래 내용이 밀려 클릭이 빗나간다(10-28: 동의 체크가 70px 밀림) → 칸 간격 안에 띄운다 */ .rk-form .rk-f { position: relative; } .rk-form .wpcf7-form-control-wrap { position: relative; } .rk-form .wpcf7-not-valid-tip { position: absolute; left: 0; top: 100%; margin-top: 3px; font-size: 12px; line-height: 1.4; color: var(--rk-acc); white-space: nowrap; } .rk-form .wpcf7-response-output { margin: 8px 0 0 !important; padding: 14px 16px !important; border: 1px solid var(--rk-line-2) !important; font-size: 15px; } .rk-form .wpcf7-spinner { margin: 0 0 0 14px; } @media (max-width: 767px) { .rk-form .wpcf7-form { grid-template-columns: 1fr; } .rk-form .wpcf7-form input.wpcf7-submit { width: 100%; } } /* ========================================================================== 모바일 하단 고정 문의 바 (푸터 템플릿의 rk-mbar 컨테이너 — 위치·색·버튼은 Elementor 컨트롤, 여기서는 여백·겹침만) ========================================================================== */ @media (max-width: 767px) { body:has(.rk-mbar) { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); } body:has(.rk-mbar) .hfe-scroll-to-top-button { bottom: 78px !important; } body:has(.rk-mbar) #mn-backlink { bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important; } .rk-mbar { padding-bottom: env(safe-area-inset-bottom, 0px) !important; } .rk-mbar a.e-con:focus-visible { outline: 2px solid var(--rk-red); outline-offset: -4px; } } /* ========================================================================== Elementor 킷 버튼 규칙(.elementor-kit-N button — 종이색 바탕·여백)이 위젯 안