/* Theme Name: 켜켜이 (Kkyeokkyeoi) Theme URI: https://2026smvd.mobilen.kr/ Description: 2026 선문대학교 제16회 디자인학부 졸업전시회 「켜켜이 - 쌓아온 시간의 흔적」 전시 사이트 테마. 시안(메인페이지 디자인적용외주 요청.ai) 기반. Author: mobilen.kr Version: 1.2.3 Requires at least: 6.0 Tested up to: 7.1 License: GNU General Public License v2 or later Text Domain: kkyeokkyeoi */ /* ============================================================ 1. 디자인 토큰 (시안 실측값) ============================================================ */ :root{ /* ---- 브랜드 (유지) ---- */ --teal: #35858E; /* 브랜드 주색 · 악센트/호버 전용으로 용도 축소 */ --teal-deep: #00858F; --teal-dark: #1F646C; --teal-light: #7FC2CA; /* ---- 지면 / 잉크 (v2: 민트 지면 → 웜 뉴트럴) ---- 근거: 작품 이미지가 주인공인데 채도 있는 지면이 이미지를 먹는다. 대비는 색이 아니라 여백·스케일·헤어라인으로 만든다. */ --paper: #F4F3F0; --paper-2: #EBE9E4; --paper-3: #DFDCD5; --white: #FFFFFF; --ink: #14171A; /* was #2B2B2B — 본문 대비 강화 */ --ink-soft: #6B7074; /* was #5A5A5A */ --line: rgba(20,23,26,.12); /* was #DCE7E9 (틸 기운) */ --line-strong: rgba(20,23,26,.24); --ph: #E3E1DC; /* was #B7B7B7 — 지면과 이어지는 플레이스홀더 */ /* 구버전 규칙이 참조하는 별칭 */ --tint: #F4F3F0; --tint-2: #FAF9F7; /* ---- 레이아웃 ---- */ --container: 1200px; /* 2026-09-12 클라이언트 요청②: 1514 → 1200 (좌우 여백 확대·중앙 집중) */ --container-wide: 1640px; --container-read: 880px; /* 텍스트 전용 읽기 폭 */ --header-h: 114px; --header-h-sm: 72px; /* 스크롤 축소 상태 */ /* ---- 타입 ---- */ --f-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Malgun Gothic", "맑은 고딕", sans-serif; --f-disp: "S-CoreDream", "Pretendard Variable", Pretendard, var(--f-sans); --fs-d1: clamp(56px, 9vw, 160px); --fs-d2: clamp(40px, 5vw, 88px); --fs-h1: clamp(32px, 3.4vw, 56px); --fs-h2: 32px; --fs-h3: 24px; --fs-body: 17px; --fs-cap: 13px; --lh-tight: .92; --lh-head: 1.2; --lh-body: 1.75; --ls-tight: -.02em; --ls-head: -.015em; --ls-caps: .08em; /* ---- 여백 스케일 (4px 기반) ---- */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px; --s-11:192px; --s-section: clamp(96px, 12vh, 192px); /* ---- 모션 ---- */ --dur-1:.24s; --dur-2:.40s; --dur-3:.80s; --dur-4:1.2s; --ease-out: cubic-bezier(.16,1,.3,1); /* expo.out */ --ease-io: cubic-bezier(.65,0,.35,1); /* power2.inOut */ } /* 픽셀(사각형) 모티프 타일 — 시안의 배경 패턴을 SVG 로 재현 */ :root{ /* 2026-09-29 3차 수정: 네모 픽셀 축소(간격 34→18, 사각 15→8) → 같은 날 클라이언트 메일로 **전 페이지 격자 삭제** 요청 ("이 뒤쪽에 불투명한 정렬된 네모를 삭제, 다른 페이지도 확인"). 변수 한 곳을 none 으로 두어 5개 사용처(히어로·서브히어로· .kk-el-px·.kk-hero·.kk-people·인트로 ::before)를 한 번에 끈다. 되살리려면 아래 원본 값으로 되돌리면 된다. 원본: width/height 18, rect 8 fill #35858E(0.09) / #FFFFFF(0.30) */ --px-tile: none; --px-tile-strong: none; /* 히어로 teal 그라데이션 — PDF 시안 히어로 밴드 픽셀샘플(상단 rgb(202,230,233)→하단 rgb(126,194,200)). 전 페이지(홈·서브) 히어로 공통. 흰 타이틀(soft)이 이 위에 얹히도록 설계됨. 2026-09-10 */ --kk-hero-grad: linear-gradient(180deg, rgb(214,236,238) 0%, rgb(165,212,217) 50%, rgb(126,194,200) 100%); } /* ============================================================ 2. 웹폰트 (S-CoreDream / 에스코어드림) — 자체호스팅 KS X 1001 서브셋 (P5, 2026-09-09) ★ 이전: jsDelivr 에서 .woff 4종 풀버전 = 1,416KB/페이지(외부 CDN 의존). → KS X 1001 2350자 + ASCII/Latin-1/문장부호로 서브셋 후 woff2 자체호스팅 = 394KB(27%). (원본에 없던 –/— 대시는 서브셋에도 없으나 폰트스택의 Pretendard 로 폴백 — 이전과 동일) 서브셋에 없는 희귀 한글도 Pretendard(전 한글 커버)로 폴백되어 토푸 없음. Pretendard 는 functions.php 에서 자체호스팅 동적 서브셋 CSS 로 로드. ============================================================ */ @font-face{font-family:"S-CoreDream";font-weight:500;font-display:swap; src:url("/wp-content/uploads/fonts/score/score-500.woff2") format("woff2");} @font-face{font-family:"S-CoreDream";font-weight:700;font-display:swap; src:url("/wp-content/uploads/fonts/score/score-700.woff2") format("woff2");} @font-face{font-family:"S-CoreDream";font-weight:800;font-display:swap; src:url("/wp-content/uploads/fonts/score/score-800.woff2") format("woff2");} @font-face{font-family:"S-CoreDream";font-weight:900;font-display:swap; src:url("/wp-content/uploads/fonts/score/score-900.woff2") format("woff2");} /* ============================================================ 3. 리셋 / 기본 ============================================================ */ *,*::before,*::after{box-sizing:border-box} /* ★ 작성자 스타일(.kk-card{display:block})이 UA 의 [hidden]{display:none} 을 이기므로 필터로 숨긴 카드가 그대로 보인다. 반드시 !important 로 되살릴 것. */ [hidden]{display:none!important} html{-webkit-text-size-adjust:100%} body{ /* 본문 콘텐츠 지면 = 완전 흰색(2026-09-10 사용자 지시). 이전 웜뉴트럴 --paper(#F4F3F0). 히어로/서브히어로 그라디언트 밴드(.kk-pagehero 등)는 콘텐츠 영역이 아니라 유지. */ margin:0; background:var(--white); color:var(--ink); font-family:var(--f-sans); font-size:16px; line-height:1.7; font-weight:400; word-break:keep-all; overflow-wrap:break-word; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } img{max-width:100%; height:auto; display:block} a{color:inherit; text-decoration:none} button{font:inherit; color:inherit; background:none; border:0; cursor:pointer} input,select,textarea{font:inherit} h1,h2,h3,h4,h5,h6{margin:0; font-weight:800; line-height:1.25; font-family:var(--f-disp)} p{margin:0} ul,ol{margin:0; padding:0; list-style:none} .kk-container{width:100%; max-width:var(--container); margin:0 auto; padding:0 20px} .kk-container--wide{max-width:var(--container-wide)} .sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ============================================================ 4. 헤더 (고정) — 시안 주석 "[헤더 버튼 고정입니다]" ============================================================ */ .kk-header{ position:fixed; inset:0 0 auto 0; z-index:1000; height:var(--header-h); background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(10px); -webkit-backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid rgba(53,133,142,.14); transition:background .25s ease, box-shadow .25s ease; } .kk-header.is-scrolled{background:rgba(255,255,255,.97); box-shadow:0 4px 22px rgba(31,100,108,.10)} .kk-header__inner{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; } /* 로고: 픽셀 블록 + 워드마크 */ .kk-logo{display:flex; align-items:center; gap:14px} .kk-logo__mark{width:56px; height:40px; flex:0 0 auto} .kk-logo__text{ font-family:var(--f-disp); font-weight:900; font-size:34px; letter-spacing:-.02em; color:var(--teal); line-height:1; } /* 2026-09-18 2차 수정: 클라이언트 로고 이미지(124×39). 스크롤·모바일에서 축소 */ .kk-logo__img{display:block; height:40px; width:auto; transition:height var(--dur-2) var(--ease-out)} .kk-header.is-scrolled .kk-logo__img{height:32px} html.kk-reduced .kk-logo__img{transition:none} .kk-nav{display:flex; align-items:center; gap:60px} .kk-nav a{ font-family:var(--f-disp); font-weight:800; font-size:19px; letter-spacing:.04em; color:var(--teal); position:relative; padding:6px 2px; transition:color .2s ease; } .kk-nav a::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .28s ease; } .kk-nav a:hover::after, .kk-nav a[aria-current="page"]::after{transform:scaleX(1)} .kk-nav a[aria-current="page"]{color:var(--teal-light)} .kk-nav__toggle{display:none} /* 고정 헤더만큼 본문 밀기 */ .kk-main{padding-top:var(--header-h)} .kk-main--flush{padding-top:0} /* ============================================================ 5. 서브페이지 히어로 배너 (PROJECT / DESIGNER / GUESTBOOK) ============================================================ */ .kk-pagehero{ position:relative; height:var(--kk-hero-h,430px); display:flex; align-items:center; justify-content:center; background:var(--kk-hero-grad); /* 2026-09-10 PDF 시안 teal 밴드로 교체(기존 white→paper 회색). ABOUT/SMVD/SMBD */ overflow:hidden; text-align:center; } .kk-pagehero::after{ content:""; position:absolute; inset:0; background-image:var(--px-tile); opacity:.65; pointer-events:none; /* 2026-09-29 3차 수정: 픽셀 불투명도 65% */ } .kk-pagehero__inner{position:relative; z-index:2} .kk-pagehero__title{ font-family:var(--f-disp); font-weight:900; font-size:64px; letter-spacing:.06em; color:var(--white); text-shadow:0 2px 18px rgba(31,100,108,.25); } .kk-pagehero__deco{display:block; margin:0 auto 14px; width:34px; height:34px; opacity:.9} /* 배경 모션영상 자리 — 시안 주석 "[배경에 모션 영상이 들어갑니다!]" */ .kk-video-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0} .kk-video-note{ position:absolute; z-index:3; left:50%; top:28px; transform:translateX(-50%); font-size:14px; font-weight:700; color:var(--teal-dark); background:rgba(255,255,255,.72); border:1px dashed var(--teal); padding:6px 14px; border-radius:999px; white-space:nowrap; } /* ============================================================ 6. 탭바 (카테고리 / 초성 / ABOUT 서브탭) ============================================================ */ .kk-tabbar{background:var(--teal-deep); color:var(--white)} .kk-tabbar__inner{ /* sub-nav 높이 통일 66px (2026-09-10) — kk-tabbar / kk-tabbar--sub / kk-filterbar 공통 */ position:relative; height:66px; display:flex; align-items:center; justify-content:center; gap:56px; } .kk-tab{ /* sub-nav 텍스트 폰트 통일 20px (2026-09-10) */ font-family:var(--f-disp); font-weight:800; font-size:20px; letter-spacing:.04em; color:rgba(255,255,255,.62); white-space:nowrap; transition:color .2s ease; padding:0 2px; } .kk-tab:hover{color:rgba(255,255,255,.85)} .kk-tab.is-active{color:var(--white)} /* 활성 버튼을 따라가는 밑줄 — 시안 주석 "<-누르는 버튼을 따라가는 형식" */ .kk-tabbar__ink{ position:absolute; bottom:10px; height:3px; background:var(--white); border-radius:2px; transition:left .32s cubic-bezier(.4,0,.2,1), width .32s cubic-bezier(.4,0,.2,1); left:0; width:0; } .kk-tabbar--sub{background:var(--teal)} .kk-tabbar--sub .kk-tabbar__inner{height:66px; gap:110px} .kk-tabbar--sub .kk-tab{font-size:20px} /* 초성 필터 (DESIGNER) — 배경 teal 통일(시안·타 서브내비와 동일), 흰-온-teal (2026-09-10) */ .kk-filterbar{background:var(--teal)} .kk-filterbar__inner{ position:relative; height:66px; display:flex; align-items:center; justify-content:center; gap:120px; } .kk-chosung{ font-family:var(--f-disp); font-weight:800; font-size:20px; letter-spacing:.14em; color:rgba(255,255,255,.62); transition:opacity .2s ease, color .2s ease; } .kk-chosung:hover{color:rgba(255,255,255,.85)} .kk-chosung.is-active{color:var(--white)} .kk-search{ position:absolute; right:0; top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:8px; border:1px solid rgba(255,255,255,.55); border-radius:999px; padding:8px 16px; width:230px; } .kk-search input{border:0; outline:0; width:100%; background:transparent; font-size:15px; color:#fff} .kk-search input::placeholder{color:rgba(255,255,255,.7)} .kk-search svg{flex:0 0 auto; opacity:.85; color:#fff} /* ============================================================ 7. 카드 그리드 ============================================================ */ .kk-section{padding:96px 0} .kk-section--tight{padding:64px 0} .kk-grid{display:grid; gap:50px} .kk-grid--project{grid-template-columns:repeat(3,1fr)} /* 시안: 458px x3, gap 50 */ .kk-grid--designer{grid-template-columns:repeat(4,1fr); gap:39px} /* 시안: 341px x4, gap 39 */ .kk-card{display:block; opacity:0; transform:translateY(28px); transition:opacity .6s ease, transform .6s ease} .kk-card.is-in{opacity:1; transform:none} /* a > span 구조라 인라인 기본값을 반드시 블록으로 (안 하면 aspect-ratio·배경이 박스를 못 만듦) */ .kk-card__thumb,.kk-card__body,.kk-card__title,.kk-card__meta{display:block} .kk-card__thumb{ position:relative; width:100%; background:var(--ph); overflow:hidden; } .kk-grid--project .kk-card__thumb{aspect-ratio:458/343} .kk-grid--designer .kk-card__thumb{aspect-ratio:341/444} .kk-card .kk-card__thumb img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease} .kk-card:hover .kk-card__thumb img{transform:scale(1.045)} .kk-card__body{padding:22px 2px 0} .kk-card__title{font-family:var(--f-disp); font-weight:800; font-size:22px; letter-spacing:.02em; color:var(--ink)} .kk-card__meta{margin-top:6px; font-size:15px; color:var(--ink-soft)} .kk-card__meta--en{font-size:13px; letter-spacing:.08em; color:#8A8A8A; text-transform:uppercase} .kk-empty{padding:80px 0; text-align:center; color:var(--ink-soft)} /* ============================================================ 8. HOME ============================================================ */ .kk-hero{ position:relative; min-height:760px; display:flex; align-items:flex-end; background:linear-gradient(180deg,var(--white) 0%,var(--tint-2) 28%,var(--paper) 62%,var(--paper-2) 100%); overflow:hidden; padding:0 0 92px; } .kk-hero::after{content:""; position:absolute; inset:0; background-image:var(--px-tile); opacity:.65; pointer-events:none} .kk-hero__inner{position:relative; z-index:2; display:flex; align-items:flex-end; justify-content:space-between; gap:40px; width:100%} .kk-hero__title{ font-family:var(--f-disp); font-weight:900; font-size:186px; line-height:.92; letter-spacing:-.03em; color:var(--teal); } .kk-hero__sub{margin-top:6px; display:flex; align-items:baseline; gap:16px} .kk-hero__sub b{font-family:var(--f-disp); font-weight:700; font-size:34px; color:var(--teal)} .kk-hero__place{margin-top:18px; font-size:15px; color:var(--teal-dark); letter-spacing:.01em} .kk-hero__meta{text-align:right; padding-bottom:14px} .kk-hero__meta h2{font-family:var(--f-disp); font-weight:800; font-size:27px; color:var(--teal-dark); line-height:1.45} .kk-hero__meta p{margin-top:10px; font-size:15px; color:var(--teal); line-height:1.6} .kk-hero__date{ margin-top:20px; font-family:var(--f-disp); font-weight:700; font-size:30px; color:var(--teal-dark); letter-spacing:.01em; line-height:1.35; } /* ABOUT 인트로 (포스터 + 텍스트) */ .kk-intro{padding:120px 0 90px} .kk-intro__inner{display:grid; grid-template-columns:420px 1fr; gap:96px; align-items:start} .kk-intro__poster{box-shadow:0 18px 50px rgba(31,100,108,.16)} .kk-intro__poster img{width:100%} .kk-intro__title{font-family:var(--f-disp); font-weight:900; font-size:52px; color:var(--teal); letter-spacing:-.01em} .kk-intro__lead{margin-top:20px; font-family:var(--f-disp); font-weight:700; font-size:24px; color:var(--teal-dark); line-height:1.55} .kk-intro__body{margin-top:38px; font-size:15px; color:var(--ink-soft); line-height:2} .kk-intro__body p + p{margin-top:18px} /* MAP 버튼 — 시안 주석 "[누르면 구글맵으로 연동되는 버튼]" */ .kk-mapbtn{ display:inline-flex; align-items:center; gap:18px; margin-top:44px; font-family:var(--f-disp); font-weight:700; font-size:22px; color:var(--teal); } .kk-mapbtn__bar{ display:block; width:150px; height:22px; background:linear-gradient(90deg, rgba(53,133,142,0) 0%, var(--teal) 100%); transition:width .3s ease; } .kk-mapbtn:hover .kk-mapbtn__bar{width:190px} /* 섹션 타이틀 (양옆 픽셀 장식) */ .kk-sectitle{display:flex; align-items:center; justify-content:center; gap:26px; margin-bottom:52px} .kk-sectitle h2{ font-family:var(--f-disp); font-weight:900; font-size:38px; letter-spacing:.1em; color:var(--teal); } .kk-sectitle__deco{width:30px; height:30px; opacity:.85; flex:0 0 auto} .kk-sectitle__note{ margin-left:14px; font-size:14px; font-weight:700; color:var(--teal-dark); background:rgba(53,133,142,.08); border:1px dashed var(--teal); border-radius:999px; padding:5px 13px; } /* CONCEPT */ .kk-concept{background:var(--white); padding:40px 0 110px; text-align:center} .kk-concept__block + .kk-concept__block{margin-top:64px} .kk-concept__tag{font-family:var(--f-disp); font-weight:900; font-size:36px; color:var(--teal); letter-spacing:-.01em} .kk-concept__desc{margin-top:20px; font-size:15px; color:var(--ink-soft); line-height:2} .kk-hr{height:1px; background:var(--line); border:0; margin:0} /* PROJECT 슬라이더 (마퀴) */ .kk-marquee{overflow:hidden; padding:6px 0 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)} .kk-marquee__track{display:flex; gap:16px; width:max-content; animation:kk-scroll 46s linear infinite} .kk-marquee:hover .kk-marquee__track{animation-play-state:paused} .kk-marquee__item{width:214px; aspect-ratio:1/1; flex:0 0 auto; background:var(--ph); overflow:hidden} /* ★ Elementor 프론트 CSS 의 `.elementor img{height:auto}` 는 특이도 (0,1,1) 로 `.클래스 img` 규칙과 동률이라, Elementor 콘텐츠 안에서는 뒤에 로드된 Elementor 가 이긴다. → 이미지를 컨테이너에 꽉 채우는 규칙은 클래스를 하나 더 붙여 (0,2,1) 로 올린다. */ .kk-marquee .kk-marquee__item img{width:100%; height:100%; object-fit:cover} .kk-marquee + .kk-marquee{margin-top:16px} .kk-marquee--rev .kk-marquee__track{animation-direction:reverse} @keyframes kk-scroll{from{transform:translateX(0)} to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.kk-marquee__track{animation:none}} /* 지도교수 / 위원회 */ .kk-people{background:linear-gradient(180deg,var(--white) 0%,var(--tint-2) 52%,var(--paper-2) 100%); padding:100px 0 120px; position:relative} .kk-people::after{content:""; position:absolute; inset:0; background-image:var(--px-tile); opacity:.65; pointer-events:none} .kk-people__inner{position:relative; z-index:2} .kk-profgrid{display:grid; grid-template-columns:repeat(2,minmax(0,220px)); gap:18px 90px; justify-content:center; text-align:center} .kk-profgrid li{font-size:17px; color:var(--ink)} .kk-orggrid{display:grid; grid-template-columns:repeat(4,1fr); gap:56px 30px; text-align:center; max-width:1100px; margin:0 auto} .kk-org__role{font-family:var(--f-disp); font-weight:800; font-size:20px; color:var(--teal); margin-bottom:20px} .kk-org__label{font-size:12px; color:#8A8A8A; letter-spacing:.02em} .kk-org__name{font-family:var(--f-disp); font-weight:800; font-size:19px; color:var(--ink); margin-bottom:14px} /* ============================================================ 9. 작품 상세 (좌 고정 + 우 스크롤) ============================================================ */ .kk-detail{display:grid; grid-template-columns:466px 1fr; align-items:start} .kk-detail__side{position:sticky; top:var(--header-h); padding:74px 54px 74px 0; align-self:start} .kk-detail__title{font-family:var(--f-disp); font-weight:900; font-size:36px; color:var(--ink); line-height:1.3} .kk-detail__sub{margin-top:10px; font-family:var(--f-disp); font-weight:700; font-size:21px; color:var(--teal)} .kk-detail__desc{margin-top:26px; font-size:14px; color:var(--ink-soft); line-height:1.95} .kk-detail__profile{margin-top:44px; width:150px; aspect-ratio:150/175; background:var(--ph); overflow:hidden} .kk-detail .kk-detail__profile img{width:100%;height:100%;object-fit:cover} .kk-detail__pname{margin-top:14px; font-size:14px; font-weight:700; color:var(--ink)} .kk-detail__pen{font-size:11px; letter-spacing:.06em; color:#8A8A8A} .kk-detail__pmeta{margin-top:8px; font-size:11px; color:#8A8A8A; line-height:1.8} .kk-detail__works{background:var(--white)} .kk-detail__works img,.kk-detail__ph{display:block; width:100%} .kk-detail__ph{aspect-ratio:1150/700; background:var(--ph)} .kk-detail__ph:nth-child(even){background:#8E8E8E} .kk-detail__note{ padding:60px 20px; text-align:center; background:#C9C9C9; color:#2B2B2B; } .kk-detail__note b{display:block; font-family:var(--f-disp); font-weight:800; font-size:26px; margin-bottom:12px} /* ============================================================ 10. ABOUT (인사말 / 학과소개) ============================================================ */ .kk-greet{padding:96px 0} .kk-greet + .kk-greet{padding-top:0} .kk-greet__head{margin-bottom:44px} .kk-greet__en{font-family:var(--f-disp); font-weight:900; font-size:34px; color:var(--teal); letter-spacing:.02em} .kk-greet__ko{margin-top:6px; font-size:16px; color:var(--ink-soft)} .kk-greet__body{display:grid; grid-template-columns:340px 1fr; gap:70px; align-items:start} .kk-greet__photo{width:100%; aspect-ratio:340/420; background:var(--ph); overflow:hidden} .kk-greet .kk-greet__photo img{width:100%;height:100%;object-fit:cover} .kk-greet__who{display:flex; align-items:baseline; gap:14px; margin-bottom:22px} .kk-greet__who b{font-family:var(--f-disp); font-weight:800; font-size:26px; color:var(--ink)} .kk-greet__who span{font-size:14px; color:var(--ink-soft)} .kk-greet__text{font-size:14px; color:var(--ink-soft); line-height:2.05} .kk-greet__text p + p{margin-top:16px} .kk-greet__sign{margin-top:6px; height:52px; opacity:.85} /* 학과소개 + 수상실적 타임라인 */ .kk-dept{padding:96px 0 40px} .kk-dept__inner{display:grid; grid-template-columns:400px 1fr; gap:80px; align-items:start} .kk-dept__en{font-family:var(--f-disp); font-weight:900; font-size:26px; color:var(--teal); line-height:1.4} .kk-dept__ko{margin-top:8px; font-size:15px; color:var(--teal-dark); font-weight:700} .kk-dept__text{font-size:14px; color:var(--ink-soft); line-height:2.05} .kk-dept__text p + p{margin-top:16px} .kk-award{padding:70px 0} .kk-award__head{margin-bottom:44px} .kk-award__en{font-family:var(--f-disp); font-weight:900; font-size:30px; color:var(--teal); letter-spacing:.02em} .kk-award__ko{margin-top:4px; font-size:15px; color:var(--ink-soft)} .kk-timeline{position:relative; max-width:1080px; margin:0 auto; padding-left:210px} .kk-timeline::before{content:""; position:absolute; left:158px; top:6px; bottom:6px; width:1px; background:var(--line)} .kk-tl{position:relative; padding-bottom:44px} .kk-tl__year{ position:absolute; left:-210px; top:-4px; width:150px; text-align:right; font-family:var(--f-disp); font-weight:800; font-size:22px; color:var(--ink); } .kk-tl__dot{position:absolute; left:-60px; top:-4px; width:30px; height:30px; opacity:.9} .kk-tl__list li{font-size:13px; color:var(--ink-soft); line-height:1.95} /* ============================================================ 11. GUESTBOOK ============================================================ */ .kk-gb{padding:80px 0 110px; background:var(--white)} .kk-gb__card{border:1px solid var(--line); background:var(--white); padding:44px 46px} .kk-gb__title{font-family:var(--f-disp); font-weight:800; font-size:19px; color:var(--ink)} .kk-gb__meta{margin-top:10px; font-size:12px; color:#9A9A9A; line-height:1.9} .kk-gb__lead{margin-top:26px; padding-top:26px; border-top:1px solid var(--line); font-size:14px; color:var(--ink-soft)} .kk-gb__stats{display:flex; gap:22px; margin-top:22px; font-size:13px; color:var(--ink-soft)} .kk-gb__stats span{display:inline-flex; align-items:center; gap:7px} .kk-cmt{border-top:1px solid var(--line); padding:20px 0} .kk-cmt__head{font-size:12px; color:#9A9A9A} .kk-cmt__head b{color:var(--ink); font-size:13px; margin-right:8px} .kk-cmt__text{margin-top:8px; font-size:14px; color:var(--ink)} .kk-cmt__acts{margin-top:6px; font-size:11px; color:#B0B0B0} .kk-gb__form{margin-top:26px; border-top:1px solid var(--line); padding-top:24px} .kk-gb__row{display:flex; gap:10px; margin-bottom:10px} .kk-gb__row input{border:1px solid var(--line); padding:9px 14px; width:190px; font-size:14px} .kk-gb__form textarea{width:100%; min-height:104px; border:1px solid var(--line); padding:14px; font-size:14px; resize:vertical} .kk-gb__submit{display:flex; justify-content:flex-end; margin-top:12px} /* GUESTBOOK 등록버튼 — teal 그라데이션 pill + 깊이감/호버 리프트. 2026-09-10 재디자인 */ .kk-btn{ background:linear-gradient(135deg, #3d97a1 0%, var(--teal) 48%, var(--teal-dark) 100%); color:#fff; font-family:var(--f-disp); font-weight:800; font-size:15px; letter-spacing:.1em; padding:14px 48px; line-height:1.1; border:0; border-radius:999px; cursor:pointer; -webkit-appearance:none; appearance:none; box-shadow:0 6px 18px -6px rgba(53,133,142,.55), inset 0 1px 0 rgba(255,255,255,.18); transition:transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s ease, filter .22s ease; } .kk-btn:hover{ transform:translateY(-2px); filter:brightness(1.06); box-shadow:0 12px 28px -8px rgba(53,133,142,.6), inset 0 1px 0 rgba(255,255,255,.26); } .kk-btn:active{ transform:translateY(0); box-shadow:0 4px 12px -6px rgba(53,133,142,.5); } .kk-btn:focus-visible{ outline:3px solid rgba(53,133,142,.4); outline-offset:2px; } .kk-btn--ghost{background:var(--ink)} .kk-gb__foot{display:flex; justify-content:space-between; margin-top:26px} /* ============================================================ 12. 푸터 ============================================================ */ .kk-footer{background:var(--teal); color:#fff; position:relative; overflow:hidden} /* PDF 시안 푸터는 단일 솔리드 teal(#35858E) — 도트 오버레이 없음(2026-09-10 사용자 지적). ::after 도트 제거. */ .kk-footer::after{display:none} .kk-footer__inner{ /* 2026-09-29 3차 수정: 푸터 높이 축소(210→130, 패딩 44→24) */ position:relative; z-index:2; min-height:130px; display:flex; align-items:center; justify-content:space-between; gap:40px; padding:24px 20px; } .kk-footer__logos{display:flex; align-items:center; gap:34px} .kk-footer__logo{font-family:var(--f-disp); font-weight:900; letter-spacing:.04em; line-height:1.1} .kk-footer__logo small{display:block; font-size:8px; font-weight:500; letter-spacing:.06em; opacity:.85} .kk-footer__logo--smd{font-size:26px} .kk-footer__logo--smu{font-size:26px} .kk-footer__logo--kk{display:flex; align-items:center; gap:9px; font-size:24px} .kk-footer__img{display:block; width:auto; height:auto; max-width:100%} /* 2026-09-18 클라이언트 푸터용 로고 이미지 */ .kk-footer__copy{text-align:right; font-size:13px; line-height:1.9; opacity:.95} /* ============================================================ 12-B. 자유 편집 영역 (블록 편집기 / Elementor 로 편집) ============================================================ */ .kk-free{padding:74px 0} /* full 모드: Elementor 섹션이 전체폭을 쓰도록 컨테이너/패딩 제거 */ .kk-free--full{padding:0} .kk-free__full{width:100%} .kk-free__inner{max-width:var(--container); margin:0 auto; padding:0 20px} .kk-free--empty{padding:30px 0} .kk-free__hint{ font-size:13.5px; line-height:1.8; color:var(--teal-dark); background:rgba(53,133,142,.06); border:1px dashed var(--teal); border-radius:10px; padding:16px 20px; } /* 자유영역 기본 타이포 (블록 편집기로 쓸 때) */ .kk-free__inner > p{margin:0 0 16px; font-size:15px; line-height:1.95; color:var(--ink-soft)} .kk-free__inner > h2{font-size:34px; color:var(--teal); margin:0 0 16px} .kk-free__inner > h3{font-size:24px; color:var(--teal-dark); margin:0 0 12px} .kk-free__inner > ul{list-style:disc; padding-left:20px; margin:0 0 16px; color:var(--ink-soft)} .kk-free__inner > ol{list-style:decimal; padding-left:22px; margin:0 0 16px; color:var(--ink-soft)} .kk-free__inner img{margin:0 auto} /* Elementor 로 만든 섹션은 자체 여백을 쓰므로 컨테이너 패딩만 유지 */ .kk-free__inner > .elementor{width:100%} /* ============================================================ 12-C. Elementor 로 전환된 섹션의 타이포/레이아웃 매핑 Elementor 는 커스텀 클래스를 위젯 래퍼(.elementor-widget)에 붙이므로 실제 텍스트 요소(.elementor-heading-title 등)를 자식으로 지정해야 한다. ============================================================ */ .kk-el .elementor-widget-container{margin:0} /* HOME 히어로 */ .kk-el-hero-title .elementor-heading-title{ font-family:var(--f-disp); font-weight:900; font-size:186px; line-height:.92; letter-spacing:-.03em; color:var(--teal); } .kk-el-hero-sub .elementor-heading-title{ font-family:var(--f-disp); font-weight:700; font-size:34px; color:var(--teal); line-height:1.25; } .kk-el-hero-place{font-size:15px; color:var(--teal-dark)} .kk-el-hero-meta .elementor-heading-title{ font-family:var(--f-disp); font-weight:800; font-size:27px; color:var(--teal-dark); line-height:1.45; } .kk-el-hero-en{font-size:15px; color:var(--teal); line-height:1.6} .kk-el-hero-date .elementor-heading-title{ font-family:var(--f-disp); font-weight:700; font-size:30px; color:var(--teal-dark); line-height:1.35; } /* 인트로 */ .kk-el-intro-title .elementor-heading-title{ font-family:var(--f-disp); font-weight:900; font-size:52px; color:var(--teal); letter-spacing:-.01em; } .kk-el-intro-lead .elementor-heading-title{ font-family:var(--f-disp); font-weight:800; font-size:24px; color:var(--teal-dark); line-height:1.55; /* 2026-09-18 2차: 에스코어드림 7 ExtraBold */ } .kk-el-body p{font-size:15px; color:var(--ink-soft); line-height:2; margin:0 0 18px} .kk-el-body p:last-child{margin-bottom:0} /* 섹션 타이틀 (CONCEPT / PROJECT / 지도교수 …) */ .kk-el-sectitle .elementor-heading-title{ font-family:var(--f-disp); font-weight:900; font-size:38px; letter-spacing:.1em; color:var(--teal); } .kk-el-tag .elementor-heading-title{ font-family:var(--f-disp); font-weight:900; font-size:36px; color:var(--teal); letter-spacing:-.01em; } .kk-el-desc{font-size:18px; font-weight:600; color:var(--ink-soft); line-height:2} /* 2026-09-10 인트로 본문과 동일 18/600 */ .kk-el-desc p{margin:0} /* ABOUT 인사말 */ .kk-el-greet-en .elementor-heading-title{ font-family:var(--f-disp); font-weight:900; font-size:34px; color:var(--teal); letter-spacing:.02em; } .kk-el-greet-ko{font-size:16px; color:var(--ink-soft)} .kk-el-greet-name .elementor-heading-title{ font-family:var(--f-disp); font-weight:800; font-size:26px; color:var(--ink); } .kk-el-greet-role{font-size:14px; color:var(--ink-soft)} .kk-el-greet-text p{font-size:14px; color:var(--ink-soft); line-height:2.05; margin:0 0 16px} .kk-el-greet-text p:last-child{margin-bottom:0} .kk-el-sign img{max-height:52px; width:auto; opacity:.85; margin:0} /* 명단(지도교수·위원회) */ .kk-el-people-list p{font-size:22px; font-weight:700; color:var(--ink); margin:0 0 10px; text-align:center} /* 2026-09-10 지도교수 더 크고 굵게 22/700 */ .kk-el-org p{margin:0; text-align:center} .kk-el-org .role{font-family:var(--f-disp); font-weight:800; font-size:20px; color:var(--teal); margin-bottom:16px} .kk-el-org .label{font-size:12px; color:#8A8A8A} .kk-el-org .name{font-family:var(--f-disp); font-weight:800; font-size:19px; color:var(--ink); margin-bottom:14px} /* --- 전환 후 디테일 복원 --- */ /* 섹션 타이틀 양옆 픽셀 장식 — 2026-09-18 2차 수정: 클라이언트 요소 파일(요소-07 → assets/img/el/el07.png)로 교체 */ .kk-el-sectitle .elementor-heading-title{display:inline-flex; align-items:center; gap:26px} .kk-el-sectitle .elementor-heading-title::before, .kk-el-sectitle .elementor-heading-title::after{ content:""; width:30px; height:30px; flex:0 0 auto; background:no-repeat center/contain url("assets/img/el/el07.png"); } /* MAP 버튼: 시안의 그라디언트 바 형태로 */ .kk-el-mapbtn .elementor-button{ background:transparent; padding:0; border-radius:0; font-family:var(--f-disp); font-weight:700; font-size:22px; color:var(--teal); display:inline-flex; align-items:center; gap:18px; } .kk-el-mapbtn .elementor-button:hover{background:transparent; color:var(--teal-dark)} .kk-el-mapbtn .elementor-button-text::after{ content:""; display:inline-block; vertical-align:middle; margin-left:18px; width:150px; height:22px; transition:width .3s ease; background:linear-gradient(90deg, rgba(53,133,142,0) 0%, var(--teal) 100%); } .kk-el-mapbtn .elementor-button:hover .elementor-button-text::after{width:190px} /* 일반 버튼(전체 작품 보기) */ .kk-el-btn .elementor-button{ background:var(--teal); color:#fff; border-radius:0; font-family:var(--f-disp); font-weight:700; font-size:14px; padding:12px 32px; } .kk-el-btn .elementor-button:hover{background:var(--teal-dark)} /* 지도교수 2열 */ .kk-el-people-list{display:grid; grid-template-columns:repeat(2,minmax(0,220px)); gap:10px 90px; justify-content:center} .kk-el-people-list p{margin:0} /* 인사말: 서명 좌측 정렬 + 사진 비율 */ .kk-el-sign .elementor-widget-container{text-align:left} .kk-el-sign img{margin:0 0 6px} .kk-el-greet-photo img{width:100%; aspect-ratio:340/420; object-fit:cover} /* 위원회 4열 그리드 (텍스트 위젯 안) */ .kk-el-orgwrap .kk-orggrid{display:grid; grid-template-columns:repeat(4,1fr); gap:56px 30px; max-width:1100px; margin:0 auto} @media (max-width:900px){ .kk-el-people-list{grid-template-columns:1fr; gap:8px} .kk-el-orgwrap .kk-orggrid{grid-template-columns:repeat(2,1fr); gap:38px 20px} .kk-el-sectitle .elementor-heading-title{gap:12px} .kk-el-sectitle .elementor-heading-title::before, .kk-el-sectitle .elementor-heading-title::after{width:20px;height:20px} .kk-el-mapbtn .elementor-button-text::after{width:90px} } /* 전환된 서브 히어로 (PROJECT / DESIGNER / GUESTBOOK) */ .kk-el-pagehero-title .elementor-heading-title{ font-family:var(--f-disp); font-weight:900; font-size:64px; letter-spacing:.06em; color:var(--white); text-shadow:0 2px 18px rgba(31,100,108,.25); } .kk-el-pagehero-title .elementor-heading-title::before{ content:""; display:block; width:34px; height:34px; margin:0 auto 14px; opacity:.9; background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='%23FFFFFF'%3E%3Crect x='13' y='0' width='4' height='4'/%3E%3Crect x='13' y='7' width='4' height='4'/%3E%3Crect x='0' y='13' width='4' height='4'/%3E%3Crect x='7' y='13' width='4' height='4'/%3E%3Crect x='13' y='13' width='4' height='4'/%3E%3Crect x='19' y='13' width='4' height='4'/%3E%3Crect x='26' y='13' width='4' height='4'/%3E%3Crect x='13' y='19' width='4' height='4'/%3E%3Crect x='13' y='26' width='4' height='4'/%3E%3C/svg%3E"); } /* 학과 소개(SMVD/SMBD) */ .kk-el-dept-en .elementor-heading-title{ font-family:var(--f-disp); font-weight:900; font-size:26px; color:var(--teal); line-height:1.4; } .kk-el-dept-ko{font-size:15px; color:var(--teal-dark); font-weight:700} .kk-el-dept-text p{font-size:14px; color:var(--ink-soft); line-height:2.05; margin:0 0 16px} .kk-el-dept-text p:last-child{margin-bottom:0} /* 수상실적 헤드 */ .kk-el-award-en .elementor-heading-title{ font-family:var(--f-disp); font-weight:900; font-size:30px; color:var(--teal); letter-spacing:.02em; } .kk-el-award-ko{font-size:15px; color:var(--ink-soft)} /* 연도 타임라인 (SMBD) */ .kk-el-year .elementor-heading-title{font-family:var(--f-disp); font-weight:800; font-size:22px; color:var(--ink)} .kk-el-year-list li,.kk-el-year-list p{font-size:13px; color:var(--ink-soft); line-height:1.95; margin:0} .kk-el-year-list ul{list-style:none; padding:0; margin:0} .kk-el-timeline-row{--kk-el-c:#68B1B8; border-left:1px solid var(--kk-el-c); position:relative} /* 2026-09-29 3차: 선 색 통일 */ /* 연도 노드 픽셀 마커 (시안) */ .kk-el-timeline-row::before{ content:""; position:absolute; left:-15px; top:0; width:30px; height:30px; background:no-repeat center/contain url("assets/img/el/el07.png"); /* 2026-09-29 3차: 클라이언트 요소-07 */ } .kk-el-timeline-row > .elementor-container{padding-left:30px} /* 탭바/필터바는 Elementor 섹션의 content_width:full_width 로 전체폭 처리한다. (100vw / calc(50% - 50vw) 는 스크롤바 폭을 포함해 가로 오버플로를 만든다) */ .kk-el .kk-tabbar__inner,.kk-el .kk-filterbar__inner{max-width:var(--container)} /* 2026-09-12 요청②: 본문 폭(1200)과 동일하게. 정의는 여기 한 곳만. */ @media (max-width:900px){ .kk-el-pagehero-title .elementor-heading-title{font-size:36px} .kk-el-dept-en .elementor-heading-title{font-size:21px} .kk-el-award-en .elementor-heading-title{font-size:24px} } /* 풀폭 섹션(마퀴·탭바·필터바)은 위젯 기본 여백까지 없애 화면 끝까지 붙인다. Elementor 는 .elementor-widget-wrap 에 10px 패딩을 기본으로 준다. */ .elementor-section-full_width > .elementor-container > .elementor-column > .elementor-widget-wrap{padding-left:0; padding-right:0} /* 단, 풀폭 섹션 안의 제목·버튼은 좌우 여백을 유지 */ .elementor-section-full_width .kk-el-sectitle .elementor-widget-container, .elementor-section-full_width .kk-el-btn .elementor-widget-container{padding-left:20px; padding-right:20px} /* 전환된 섹션 공통 배경(픽셀 패턴) */ .kk-el-px{position:relative} .kk-el-px > .elementor-container, .kk-el-px > .e-con-inner{position:relative; z-index:2} .kk-el-px::after{content:""; position:absolute; inset:0; background-image:var(--px-tile); opacity:.65; pointer-events:none; z-index:1} @media (max-width:1280px){ .kk-el-hero-title .elementor-heading-title{font-size:118px} .kk-el-intro-title .elementor-heading-title{font-size:42px} } @media (max-width:900px){ .kk-el-hero-title .elementor-heading-title{font-size:80px} .kk-el-hero-sub .elementor-heading-title{font-size:22px} .kk-el-hero-date .elementor-heading-title{font-size:21px} .kk-el-intro-title .elementor-heading-title{font-size:34px} .kk-el-sectitle .elementor-heading-title{font-size:28px} .kk-el-tag .elementor-heading-title{font-size:28px} .kk-el-greet-en .elementor-heading-title{font-size:24px} } @media (max-width:560px){ .kk-el-hero-title .elementor-heading-title{font-size:58px} } /* ============================================================ 13. 스크롤 등장 / 접근성 ============================================================ */ @media (prefers-reduced-motion:reduce){ .kk-card{opacity:1; transform:none; transition:none} *{scroll-behavior:auto!important} } :focus-visible{outline:3px solid var(--teal); outline-offset:3px} /* ============================================================ 14. 반응형 ============================================================ */ @media (max-width:1560px){ .kk-nav{gap:40px} .kk-hero__title{font-size:150px} } @media (max-width:1280px){ :root{--header-h:96px} .kk-hero{min-height:600px} .kk-hero__title{font-size:118px} .kk-hero__meta h2{font-size:22px} .kk-hero__date{font-size:24px} .kk-intro__inner{grid-template-columns:330px 1fr; gap:56px} .kk-intro__title{font-size:42px} .kk-grid--designer{grid-template-columns:repeat(3,1fr)} .kk-detail{grid-template-columns:380px 1fr} .kk-dept__inner,.kk-greet__body{grid-template-columns:280px 1fr; gap:44px} .kk-timeline{padding-left:150px} .kk-timeline::before{left:108px} .kk-tl__year{left:-150px; width:100px} .kk-tl__dot{left:-56px} .kk-tabbar__inner{gap:34px} .kk-tab{font-size:20px} .kk-filterbar__inner{gap:70px} } @media (max-width:900px){ :root{--header-h:80px} .kk-logo__text{font-size:26px} .kk-logo__mark{width:44px;height:32px} .kk-logo__img{height:32px} .kk-nav{ position:fixed; inset:var(--header-h) 0 auto 0; background:rgba(255,255,255,.98); flex-direction:column; gap:0; padding:10px 0 22px; display:none; box-shadow:0 16px 30px rgba(31,100,108,.14); } .kk-nav.is-open{display:flex} .kk-nav a{width:100%; text-align:center; padding:16px 0; font-size:18px} .kk-nav a::after{display:none} .kk-nav__toggle{ display:flex; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; } .kk-nav__toggle span{display:block; height:2px; background:var(--teal); transition:transform .25s ease, opacity .2s ease} .kk-nav__toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .kk-nav__toggle.is-open span:nth-child(2){opacity:0} .kk-nav__toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .kk-hero{min-height:auto; padding:60px 0 56px} .kk-hero__inner{flex-direction:column; align-items:flex-start; gap:30px} .kk-hero__title{font-size:80px} .kk-hero__sub b{font-size:22px} .kk-hero__meta{text-align:left} .kk-hero__date{font-size:21px} .kk-pagehero{height:var(--kk-hero-h-m,310px)} .kk-pagehero__title{font-size:40px} .kk-section{padding:60px 0} .kk-intro{padding:64px 0 50px} .kk-intro__inner{grid-template-columns:1fr; gap:36px} .kk-intro__poster{max-width:340px} .kk-intro__title{font-size:34px} .kk-intro__lead{font-size:19px} .kk-sectitle h2{font-size:28px} .kk-sectitle{flex-wrap:wrap; gap:14px} .kk-grid--project,.kk-grid--designer{grid-template-columns:repeat(2,1fr); gap:24px} .kk-card__title{font-size:18px} .kk-detail{grid-template-columns:1fr} .kk-detail__side{position:static; padding:44px 0} .kk-greet__body,.kk-dept__inner{grid-template-columns:1fr; gap:28px} .kk-greet__photo{max-width:280px} .kk-orggrid{grid-template-columns:repeat(2,1fr); gap:38px 20px} .kk-profgrid{grid-template-columns:1fr; gap:10px} .kk-timeline{padding-left:0} .kk-timeline::before{left:8px} .kk-tl{padding-left:38px} .kk-tl__year{position:static; width:auto; text-align:left; margin-bottom:10px; margin-left:-38px} .kk-tl__dot{left:-6px; width:22px; height:22px} /* PROJECT 카테고리 6개: 한 줄 가로스크롤은 뒤 항목(GAME/NEW MEDIA/VIDEO)이 잘려 보인다 (짤림 신고 2026-09-09) → 2줄 줄바꿈 중앙정렬로 6개를 다 보이게. 이 탭바는 static(비sticky) 이라 2줄 높이를 상시 점유하지 않는다(하위탭 kk-tabbar--sub 는 아래 규칙이 한 줄 유지). */ .kk-tabbar__inner{ height:auto; min-height:52px; padding:12px 16px; flex-wrap:wrap; justify-content:center; gap:10px 20px; } .kk-tabbar__ink{display:none} .kk-tab{font-size:15px; flex:0 0 auto} /* ★ 괄호 부제(시각디자인/방송콘텐츠디자인)를 숨겨 THANKS TO / SMVD / SMBD 로 줄인다. 그러면 3개가 한 줄에 다 들어와 짤림 없이 가운데 정렬된다(짤림 신고 2026-09-09). */ .kk-tab__paren{display:none} .kk-tabbar--sub .kk-tabbar__inner{ gap:22px; height:52px; flex-wrap:nowrap; overflow-x:auto; justify-content:center; padding-left:16px; padding-right:16px; scrollbar-width:none; } .kk-tabbar--sub .kk-tabbar__inner::-webkit-scrollbar{display:none} .kk-tabbar--sub .kk-tab{font-size:14px; white-space:nowrap; flex:0 0 auto} .kk-filterbar__inner{height:auto; padding:16px 0 68px; gap:26px; flex-wrap:wrap} .kk-search{position:static; transform:none; width:100%; margin-top:6px} .kk-footer__inner{flex-direction:column; align-items:flex-start; gap:22px; min-height:0} .kk-footer__copy{text-align:left} .kk-gb__card{padding:26px 20px} .kk-gb__row{flex-wrap:wrap} .kk-gb__row input{width:100%} } @media (max-width:560px){ .kk-hero__title{font-size:58px} .kk-grid--project,.kk-grid--designer{grid-template-columns:1fr} .kk-pagehero__title{font-size:32px} } /* ============================================================ 99. v2 모션 셸 (P1) — 2026-09-09 ============================================================ */ /* Lenis: 스무스 스크롤이 붙은 동안만 적용. 실패하면 네이티브 스크롤 그대로. */ html.kk-smooth{scroll-behavior:auto} html.kk-smooth body{overscroll-behavior-y:none} /* 스크롤 리빌 — 기본은 "보이는" 상태. JS 가 시작 상태를 만들기 전까지 절대 숨기지 않는다(스크립트 실패 시 콘텐츠 소실 방지). */ [data-kk-reveal]{will-change:opacity,transform} html.kk-reduced [data-kk-reveal]{opacity:1!important;transform:none!important;visibility:visible!important} /* 헤더 축소 — main.js 가 스크롤 시 .is-scrolled 를 붙인다 */ .kk-header{transition:height var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out)} .kk-header.is-scrolled{ height:var(--header-h-sm); background:rgba(244,243,240,.86); box-shadow:0 1px 0 var(--line); } .kk-header__inner{transition:transform var(--dur-2) var(--ease-out)} .kk-header.is-scrolled .kk-logo__text{font-size:22px} .kk-logo__text{transition:font-size var(--dur-2) var(--ease-out)} html.kk-reduced .kk-header, html.kk-reduced .kk-header__inner, html.kk-reduced .kk-logo__text{transition:none} /* 모션 줄이기 토글 (푸터) */ .kk-motionmount{margin-top:var(--s-5); text-align:center} .kk-motiontoggle{ font-family:var(--f-sans); font-size:var(--fs-cap); letter-spacing:var(--ls-caps); color:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.28); border-radius:999px; padding:7px 16px; line-height:1; transition:color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out); } .kk-motiontoggle:hover, .kk-motiontoggle:focus-visible{color:#fff; border-color:rgba(255,255,255,.6)} /* 포커스 링 — 키보드 사용자에게만, 지면 대비로 보이게 */ :focus-visible{outline:2px solid var(--teal); outline-offset:3px; border-radius:2px} /* OS 설정이 모션 감소면 전역 정지 (사용자 토글과 별개로 항상 존중) */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; } } /* ============================================================ 98. v2 DESIGNER 인덱스 (P2) — 2026-09-09 리스트 기본 ⇄ 그리드 토글 + 호버 프리뷰 ============================================================ */ /* 필터바에 뷰 토글을 우측 정렬로 붙인다 */ .kk-filterbar__inner{position:relative} /* 2026-09-14 사용자 지시 "아이콘숨겨": 토글 숨김 → 그리드 고정(리스트 뷰 진입 불가). 되살리려면 display:inline-flex */ .kk-viewtoggle{position:absolute; right:250px; top:50%; transform:translateY(-50%); display:none; gap:2px; align-items:center} .kk-viewbtn{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:34px; border-radius:8px; color:rgba(255,255,255,.62); transition:background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); } .kk-viewbtn:hover{color:#fff; background:rgba(255,255,255,.15)} .kk-viewbtn.is-active{color:var(--teal); background:var(--white)} /* ---- 카드 공통: 뷰별로 내부 요소 표시를 나눈다 ---- */ .kk-card__no,.kk-card__en,.kk-card__cat,.kk-card__work,.kk-card__go{display:none} /* =================== 리스트 뷰 (기본) =================== */ .kk-grid--designer.is-view-list{display:block; gap:0} .kk-grid--designer.is-view-list .kk-card{ display:grid; grid-template-columns:64px minmax(140px,1.5fr) minmax(150px,1.6fr) 132px minmax(150px,2fr) 28px; align-items:center; column-gap:28px; padding:26px 10px; border-bottom:1px solid var(--line); opacity:1; transform:none; /* 리스트에선 등장용 초기 숨김 무효화 */ position:relative; isolation:isolate; } .kk-grid--designer.is-view-list .kk-card::before{ content:""; position:absolute; inset:0; background:var(--paper-2); opacity:0; transition:opacity var(--dur-1) var(--ease-out); z-index:-1; } .kk-grid--designer.is-view-list .kk-card:hover::before{opacity:.6} .kk-grid--designer.is-view-list .kk-card__thumb{display:none} .kk-grid--designer.is-view-list .kk-card__no{ display:block; font-family:var(--f-disp); font-weight:700; font-size:14px; color:var(--ink-soft); letter-spacing:.06em; font-variant-numeric:tabular-nums; } .kk-grid--designer.is-view-list .kk-card__body{display:contents} /* body 를 걷어내 grid 셀로 직접 배치 */ .kk-grid--designer.is-view-list .kk-card__title{ font-family:var(--f-disp); font-weight:800; font-size:clamp(20px,1.9vw,30px); letter-spacing:-.01em; color:var(--ink); line-height:1.1; transition:color var(--dur-1) var(--ease-out); } .kk-grid--designer.is-view-list .kk-card:hover .kk-card__title{color:var(--teal-dark)} .kk-grid--designer.is-view-list .kk-card__en{ display:block; font-size:13px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft); } .kk-grid--designer.is-view-list .kk-card__cat{ display:inline-flex; align-self:center; justify-self:start; align-items:center; height:26px; padding:0 12px; border:1px solid var(--line-strong); border-radius:999px; font-size:11px; letter-spacing:.1em; color:var(--ink-soft); white-space:nowrap; } .kk-grid--designer.is-view-list .kk-card__work{ display:block; font-size:15px; color:var(--ink); letter-spacing:.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .kk-grid--designer.is-view-list .kk-card__go{ display:block; justify-self:end; color:var(--ink-soft); opacity:0; transition:opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); transform:translateX(-6px); } .kk-grid--designer.is-view-list .kk-card__go::before{content:"\2192"} /* → */ .kk-grid--designer.is-view-list .kk-card:hover .kk-card__go{opacity:1; transform:none} /* 첫 행 위 라인 */ .kk-grid--designer.is-view-list{border-top:1px solid var(--line)} /* =================== 그리드 뷰 =================== */ .kk-grid--designer.is-view-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:39px; } .kk-grid--designer.is-view-grid .kk-card{ display:block; border:0; padding:0; } .kk-grid--designer.is-view-grid .kk-card__no{display:none} .kk-grid--designer.is-view-grid .kk-card__thumb{display:block} .kk-grid--designer.is-view-grid .kk-card__body{display:block; padding:18px 2px 0} .kk-grid--designer.is-view-grid .kk-card__title{ font-family:var(--f-disp); font-weight:500; font-size:21px; letter-spacing:.01em; color:var(--ink); /* 2026-09-18 2차: 에스코어드림 5 Medium (이전 800) */ } .kk-grid--designer.is-view-grid .kk-card__en{ display:block; margin-top:5px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); } .kk-grid--designer.is-view-grid .kk-card__cat{ display:block; margin-top:9px; font-size:11px; letter-spacing:.1em; color:var(--teal-dark); } .kk-grid--designer.is-view-grid .kk-card__work{display:none} .kk-grid--designer.is-view-grid .kk-card__go{display:none} /* =================== 호버 프리뷰 (리스트, 포인터 기기) =================== */ .kk-preview{ position:fixed; top:0; left:0; z-index:200; pointer-events:none; width:240px; margin:-150px 0 0 30px; /* 커서 우상단 */ opacity:0; transform-origin:0 100%; transition:opacity var(--dur-1) var(--ease-out); will-change:transform,opacity; } .kk-preview.is-on{opacity:1} .kk-preview__img{ display:block; width:100%; aspect-ratio:3/4; border-radius:10px; background-color:var(--ph); background-size:cover; background-position:center; box-shadow:0 18px 50px -12px rgba(20,23,26,.35); } .kk-preview.is-empty .kk-preview__img{ display:flex; align-items:center; justify-content:center; } .kk-preview.is-empty .kk-preview__img::after{ content:"IMAGE"; font-size:11px; letter-spacing:.18em; color:var(--ink-soft); } /* 모션 줄이기: 프리뷰는 표시하되 페이드/추종 애니메이션만 제거(즉시 표시). 2026-09-10 */ html.kk-reduced .kk-preview{transition:none} html.kk-reduced .kk-viewbtn, html.kk-reduced .kk-grid--designer.is-view-list .kk-card__title, html.kk-reduced .kk-grid--designer.is-view-list .kk-card__go{transition:none} /* =================== 반응형 =================== */ @media (max-width:1100px){ .kk-grid--designer.is-view-grid{grid-template-columns:repeat(3,1fr)} .kk-grid--designer.is-view-list .kk-card{ grid-template-columns:48px minmax(120px,1.4fr) minmax(130px,1.4fr) minmax(130px,1.8fr); column-gap:20px; } .kk-grid--designer.is-view-list .kk-card__cat{display:none} /* 좁은 화면: 카테고리 칩 생략 */ .kk-grid--designer.is-view-list .kk-card__go{display:none} } @media (max-width:680px){ .kk-grid--designer.is-view-grid{grid-template-columns:repeat(2,1fr); gap:20px} .kk-grid--designer.is-view-list .kk-card{ grid-template-columns:34px 1fr; grid-auto-rows:min-content; row-gap:2px; column-gap:14px; padding:18px 6px; } .kk-grid--designer.is-view-list .kk-card__no{grid-row:1 / span 3; align-self:start; padding-top:4px} .kk-grid--designer.is-view-list .kk-card__title{font-size:19px} .kk-grid--designer.is-view-list .kk-card__en{font-size:12px} .kk-grid--designer.is-view-list .kk-card__work{font-size:13px; color:var(--ink-soft)} } /* ---- 홈 히어로 글자 분해 (P2-b) ---- */ .kk-char{display:inline-block; backface-visibility:hidden} html.kk-reduced .kk-char{opacity:1!important; transform:none!important} /* ============================================================ 97. v2 작품 상세 (P3) — 2026-09-09 ============================================================ */ .kk-detail2{background:var(--white)} /* ---- 풀블리드 히어로 ---- */ .kk-dhero{ position:relative; min-height:clamp(420px,72vh,760px); display:flex; align-items:flex-end; overflow:hidden; background:var(--paper-2); } .kk-dhero__media{position:absolute; inset:0} .kk-dhero__media .kk-dhero__img{width:100%; height:100%; object-fit:cover; display:block} .kk-dhero--ph .kk-dhero__media{ background: linear-gradient(135deg, var(--paper-2), var(--paper-3)); } .kk-dhero--ph .kk-dhero__media::after{ content:"IMAGE"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:13px; letter-spacing:.24em; color:var(--ink-soft); opacity:.5; } /* 텍스트 가독용 스크림 — 이미지 있을 때만 의미, 플레이스홀더에도 은은히 */ .kk-dhero__scrim{ position:absolute; inset:0; pointer-events:none; background:linear-gradient(0deg, rgba(20,23,26,.62) 0%, rgba(20,23,26,.12) 42%, transparent 68%); } .kk-dhero--ph .kk-dhero__scrim{background:linear-gradient(0deg, rgba(20,23,26,.28) 0%, transparent 55%)} .kk-dhero__cap{position:relative; z-index:2; width:100%; padding-bottom:clamp(32px,5vh,64px)} .kk-dhero__cat{ display:inline-block; margin-bottom:16px; padding:6px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.5); color:#fff; font-size:11px; letter-spacing:.16em; } .kk-dhero--ph .kk-dhero__cat{border-color:var(--line-strong); color:var(--ink)} .kk-dhero__title{ font-family:var(--f-disp); font-weight:900; color:#fff; font-size:clamp(34px,5.2vw,80px); line-height:1.02; letter-spacing:-.02em; } .kk-dhero--ph .kk-dhero__title{color:var(--ink)} .kk-dhero__by{ margin-top:14px; color:rgba(255,255,255,.9); font-size:18px; letter-spacing:.01em; display:flex; align-items:baseline; gap:12px; } .kk-dhero__by span{font-size:13px; letter-spacing:.1em; text-transform:uppercase; opacity:.8} .kk-dhero--ph .kk-dhero__by{color:var(--ink-soft)} /* ---- 본문: 좌 스티키 + 우 작업물 ---- */ .kk-dbody{display:grid; grid-template-columns:340px 1fr; gap:64px; align-items:start; padding:clamp(48px,7vh,96px) 20px} .kk-dbody__side{position:sticky; top:calc(var(--header-h-sm) + 32px); align-self:start} .kk-dmeta{margin:0 0 32px; border-top:1px solid var(--ink); padding-top:22px} .kk-dmeta > div{display:grid; grid-template-columns:96px 1fr; gap:14px; padding:14px 0; border-bottom:1px solid var(--line)} .kk-dmeta dt{margin:0; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft)} .kk-dmeta dd{margin:0; font-size:15px; color:var(--ink); line-height:1.5} .kk-dmeta dd span{display:block; font-size:12px; letter-spacing:.06em; color:var(--ink-soft); text-transform:uppercase; margin-top:2px} .kk-dbody__desc{font-size:15px; line-height:1.9; color:var(--ink-soft)} .kk-dbody__desc p{margin:0 0 14px} /* 2026-09-12 클라이언트 요청: 작업물은 3분할이 아니라 "시작과 끝이 이어진 하나의 사각형". 여러 장으로 나눠 올려도 한 덩어리로 보이도록 gap 0 + 이미지 사이 빈틈 제거. */ .kk-dbody__works{min-width:0; display:flex; flex-direction:column; gap:0; background:var(--white); font-size:0; line-height:0} .kk-dbody__works .kk-dwork{display:block; width:100%; height:auto; margin:0} .kk-dwork--ph{aspect-ratio:2000/3000; background:var(--ph)} /* 작업물 영상 (2026-09-18): 첨부 MP4 = 이미지와 같은 폭으로 이어 붙임, 링크 영상 = 16:9 플레이어 */ .kk-dbody__works .kk-dwork--video{background:var(--ph); object-fit:cover} .kk-dbody__works .kk-dembed{position:relative; aspect-ratio:16/9; background:#000} .kk-dembed iframe{position:absolute; inset:0; width:100%; height:100%; border:0} .kk-dwork--ph:nth-child(even){background:var(--paper-3)} .kk-dbody__note{ padding:28px; margin:0 0 20px; background:var(--paper-2); border:1px dashed var(--line-strong); border-radius:8px; font-size:14px; color:var(--ink-soft); line-height:1.7; } .kk-dbody__note b{display:block; font-family:var(--f-disp); font-weight:800; font-size:20px; color:var(--ink); margin-bottom:8px} /* ---- 이전/다음 ---- */ .kk-dnav{border-top:1px solid var(--line); background:var(--white)} .kk-dnav__inner{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:32px 20px; min-height:96px} .kk-dnav__link{display:flex; flex-direction:column; gap:4px; min-width:120px} .kk-dnav__link--empty{visibility:hidden} .kk-dnav__next{align-items:flex-end; text-align:right} .kk-dnav__lab{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)} .kk-dnav__name{font-family:var(--f-disp); font-weight:800; font-size:22px; color:var(--ink); transition:color var(--dur-1) var(--ease-out)} .kk-dnav__link:hover .kk-dnav__name{color:var(--teal-dark)} .kk-dnav__all{ font-size:12px; letter-spacing:.1em; color:var(--ink-soft); padding:10px 18px; border:1px solid var(--line-strong); border-radius:999px; white-space:nowrap; transition:color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out); } .kk-dnav__all:hover{color:var(--teal); border-color:var(--teal)} /* ---- 같은 분야 추천 ---- */ .kk-drel{padding:clamp(40px,6vh,72px) 20px; background:var(--white)} /* 2026-09-18 2차: 메인이 아니므로 작게 + 흰 배경(이전 paper-2 회색) */ .kk-drel__title{font-family:var(--f-disp); font-weight:800; font-size:20px; color:var(--ink); margin:0 0 20px; letter-spacing:-.01em} .kk-drel__grid{display:grid; grid-template-columns:repeat(3,minmax(0,220px)); gap:24px; justify-content:start} .kk-drel__grid .kk-card__thumb{aspect-ratio:341/444; background:var(--ph)} .kk-drel__grid .kk-card__thumb img{width:100%; height:100%; object-fit:cover} .kk-drel__grid .kk-card__body{padding:10px 2px 0} .kk-drel__grid .kk-card__title{font-family:var(--f-disp); font-weight:800; font-size:15px; color:var(--ink)} .kk-drel__grid .kk-card__meta{margin-top:4px; font-size:12px; color:var(--ink-soft)} /* ---- 진입 전환용: JS 가 히어로 미디어를 Flip 시킬 때 ---- */ [data-kk-dhero] .kk-dhero__media{will-change:transform} html.kk-reduced [data-kk-detail] [data-kk-dhero] .kk-dhero__media{will-change:auto} /* ---- 반응형 ---- */ @media (max-width:900px){ .kk-dbody{grid-template-columns:1fr; gap:36px} .kk-dbody__side{position:static} } @media (max-width:680px){ .kk-dhero{min-height:56vh} .kk-drel__grid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px} .kk-dnav__inner{gap:12px; padding:22px 4px} .kk-dnav__name{font-size:17px} .kk-dnav__all{padding:8px 12px; font-size:11px} } /* ★ 접근성(P3): 사용자 '모션 줄이기' 토글(html.kk-reduced) 시 .kk-card 기본 숨김(opacity:0) 해제. P1 CSS 는 OS prefers-reduced-motion 미디어쿼리만 커버해, 사용자 토글 모드에선 추천/그리드 카드가 opacity:0 으로 고착돼 콘텐츠가 사라지는 문제가 있었다(2026-09-09 실측). */ html.kk-reduced .kk-card{opacity:1!important; transform:none!important; transition:none!important} /* ============================================================ 96. v2 PROJECT 갤러리 (P4) — 2026-09-09 작품 갤러리: 호버 오버레이 + 스크롤 리빌 ============================================================ */ .kk-card--proj{position:relative; overflow:hidden; display:block} .kk-card--proj .kk-card__thumb{position:relative; overflow:hidden} .kk-card--proj .kk-card__thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease-out); } .kk-card--proj:hover .kk-card__thumb img{transform:scale(1.06)} /* 스크림 — 이미지 위 어둡게 (호버 시 진해짐) */ .kk-card--proj .kk-card__scrim{ position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg, transparent 40%, rgba(20,23,26,.55) 100%); opacity:0; transition:opacity .4s var(--ease-out); } .kk-card--proj:hover .kk-card__scrim{opacity:1} /* 호버 오버레이 — 카테고리(좌상) + 화살표(우하) */ .kk-card--proj .kk-card__over{ position:absolute; inset:0; z-index:2; pointer-events:none; display:flex; align-items:flex-start; justify-content:space-between; padding:16px 18px; } .kk-card--proj .kk-card__overcat{ font-size:11px; letter-spacing:.14em; color:#fff; padding:5px 11px; border:1px solid rgba(255,255,255,.55); border-radius:999px; opacity:0; transform:translateY(-8px); transition:opacity .4s var(--ease-out), transform .4s var(--ease-out); } .kk-card--proj .kk-card__overgo{ margin-top:auto; align-self:flex-end; width:40px; height:40px; border-radius:50%; background:var(--teal); color:#fff; display:flex; align-items:center; justify-content:center; font-size:17px; opacity:0; transform:scale(.6); transition:opacity .4s var(--ease-out), transform .4s var(--ease-out); } .kk-card--proj .kk-card__overgo::before{content:"\2192"} .kk-card--proj:hover .kk-card__overcat{opacity:1; transform:none} .kk-card--proj:hover .kk-card__overgo{opacity:1; transform:none} /* 본문(작품명·작가) — 호버 시 살짝 상승 */ .kk-card--proj .kk-card__body{transition:transform .4s var(--ease-out)} .kk-card--proj:hover .kk-card__body{transform:translateY(-2px)} .kk-card--proj:hover .kk-card__title{color:var(--teal-dark)} /* 모션 줄이기: 호버 애니메이션 정지, 오버레이는 그냥 노출 안 함(정적) */ html.kk-reduced .kk-card--proj .kk-card__thumb img, html.kk-reduced .kk-card--proj .kk-card__scrim, html.kk-reduced .kk-card--proj .kk-card__overcat, html.kk-reduced .kk-card--proj .kk-card__overgo, html.kk-reduced .kk-card--proj .kk-card__body{transition:none} @media (hover:none){ /* 터치: 오버레이 상시 은은히(호버 없음) */ .kk-card--proj .kk-card__overcat{opacity:.9; transform:none} } /* ============================================================ 97. v2 P4 — 서브 히어로 부제 · ABOUT 인사말 편집 레이아웃 — 2026-09-09 ============================================================ */ /* ---- 서브 히어로 부제 (ABOUT / SMVD / SMBD) ---- ABOUT 계열 3화면은 히어로 제목을 'ABOUT' 으로 통일하고, 현재 위치는 부제 + 하위 탭이 알려준다(정보 구조 일치). */ .kk-pagehero__sub{ margin-top:16px; font-family:var(--f-disp); font-weight:700; font-size:15px; letter-spacing:.18em; color:var(--teal-dark); } /* ★ 제목의 흰색은 시안 의도(밝은 지면 위 실루엣)라 그대로 두되, 부제까지 흰색이면 대비 1.4:1 로 사실상 읽히지 않는다(실측). 부제는 정보라 브랜드 잉크색으로 내려 위계를 만든다. */ /* ---- ABOUT 인사말 (P4) -------------------------------------- Elementor 구조: SEC.kk-el > COL > [greet-en][greet-ko][SEC.kk-el-greet-row] greet-row > COL(사진 374) + COL(sign,name,role,text 1121) ★ 함정 1 — Elementor 4.x 는 `.elementor-widget-container` 래퍼 div 를 더 이상 만들지 않는다(실측: hasWidgetContainer=false). 그 셀렉터로 쓴 규칙은 매칭 대상이 없어 조용히 죽는다 → 위젯 요소나 그 자식에 직접 건다. ★ 함정 2 — 테마 style.css 는 Elementor CSS 보다 **먼저** 로드된다(실측: link index 2 vs 3~17). 그래서 `.kk-el-sign{order:4}` (0,1,0) 는 뒤에 오는 `.elementor-element` (0,1,0) 와 동률이라 Elementor 가 이긴다. 같은 블록의 margin-top 은 남고 order/position 만 덮이는 형태로 나타난다. → 부모(.kk-el-greet-row)를 붙여 (0,2,0) 으로 올린다. ★ 원본 위젯 순서는 '서명' 이 맨 위였다 → order 로 본문 뒤로 보낸다 (Elementor 데이터는 건드리지 않는다). ★ 본문이 1121px 폭으로 흘러 한 줄 90자가 넘었다 → 읽기 폭 40em(한 줄 40자)으로 제한. ------------------------------------------------------------ */ /* 섹션 헤드: 상단 헤어라인 + 순번 */ body{counter-reset:kkgreet} .kk-el .kk-el-greet-en{ counter-increment:kkgreet; position:relative; padding-top:var(--s-6); border-top:1px solid var(--line-strong); } .kk-el .kk-el-greet-en::before{ content:"0" counter(kkgreet); position:absolute; top:var(--s-6); right:0; font-family:var(--f-disp); font-weight:800; font-size:13px; letter-spacing:.14em; color:var(--ink-soft); opacity:.5; } .kk-el-greet-en .elementor-heading-title{font-size:clamp(24px,2.2vw,34px); line-height:1.15} .kk-el .kk-el-greet-ko{margin-top:8px} .kk-el-greet-ko p{font-size:15px; letter-spacing:.02em; margin:0} /* 행: 사진 | 본문 */ .kk-el-greet-row > .elementor-container{align-items:flex-start} .kk-el-greet-row .elementor-widget-wrap{align-content:flex-start} /* 좌: 사진은 본문을 따라가며 머문다 */ .kk-el-greet-row .kk-el-greet-photo{position:sticky; top:calc(var(--header-h-sm) + 28px)} /* 우: 이름+서명(한 줄) → 직함 → 본문 — 2026-09-18 2차 수정: 서명을 본문 끝에서 이름 옆으로 이동(클라이언트 요청 '싸인 위치 변경'). Elementor 위젯 기본 width:100%(후행 로드) 를 이기려고 (0,3,0)+!important 로 이름·서명만 내용 폭으로 */ .kk-el-greet-row .kk-el-greet-name{order:1} .kk-el-greet-row .kk-el-sign{order:2} .kk-el-greet-row .kk-el-greet-role{order:3} .kk-el-greet-row .kk-el-greet-text{order:4} .kk-el-greet-row .elementor-widget-wrap > .kk-el-greet-name, .kk-el-greet-row .elementor-widget-wrap > .kk-el-sign{width:auto!important; max-width:100%} .kk-el-greet-row .elementor-widget-wrap > .kk-el-sign{align-self:baseline; margin:0 0 0 var(--s-3)!important} /* 2026-09-29: 이름 바로 옆 + 글자 기준선(baseline)에 맞춤 */ .kk-el-greet-row .elementor-widget-wrap > .kk-el-greet-name{align-self:baseline} /* 읽기 폭 40em — 위젯은 100% 폭을 유지하고 그 안의 콘텐츠를 묶는다 (위젯 자체를 좁히면 flex-wrap 때문에 다음 위젯이 옆으로 붙는다) */ .kk-el-greet-row .kk-el-greet-name > *, .kk-el-greet-row .kk-el-greet-role > *, .kk-el-greet-row .kk-el-greet-text > *{max-width:40em} .kk-el-greet-name .elementor-heading-title{font-size:28px; letter-spacing:var(--ls-head)} .kk-el-greet-row .kk-el-greet-role{margin-top:6px} .kk-el-greet-row .kk-el-greet-role > *{ padding-bottom:var(--s-5); border-bottom:1px solid var(--line); } .kk-el-greet-row .kk-el-greet-text{margin-top:var(--s-5)} .kk-el-greet-text p{ font-size:16px; line-height:1.95; color:var(--ink); margin:0 0 var(--s-3); /* 2026-09-18 2차: 단락 간격 24→12px */ } .kk-el-greet-text p:last-child{margin-bottom:0} /* 서명: 이름 오른쪽(2026-09-18 2차). 이름 글자 높이에 맞춰 44px */ .kk-el-greet-row .kk-el-sign{text-align:left} .kk-el-greet-row .kk-el-sign img{max-height:44px; width:auto; opacity:.9; margin:0; display:block} /* 사진이 없는 인사말(졸업위원장)은 빈 좌측 컬럼을 접는다 */ .kk-el-greet-row .elementor-container:not(:has(.kk-el-greet-photo)) > .elementor-column:first-child{display:none} .kk-el-greet-row .elementor-container:not(:has(.kk-el-greet-photo)) > .elementor-column:last-child{width:100%} @media (max-width:900px){ .kk-pagehero__sub{font-size:13px; letter-spacing:.14em; margin-top:12px} .kk-el-greet-row .kk-el-greet-photo{position:static; max-width:280px} .kk-el-greet-name .elementor-heading-title{font-size:23px} .kk-el-greet-text p{font-size:15px; line-height:1.9} .kk-el-greet-row .kk-el-sign{text-align:left} .kk-el .kk-el-greet-en::before{display:none} } /* ============================================================ 98. v2 P4 — ABOUT 하위 탭 sticky · SMVD/SMBD 학과 페이지 — 2026-09-09 ============================================================ */ /* ---- 하위 탭바를 헤더 아래에 고정 ---- THANKS TO / SMVD / SMBD 3화면을 오가는 내비게이션인데 본문이 3천~9천px 라 매번 최상단으로 돌아가야 했다. */ .kk-tabbar--sub{position:sticky; top:var(--header-h-sm); z-index:900} /* ---- 학과 소개 (SMVD / SMBD) ---- 본문이 1040px 폭으로 흘러 한 줄 70자가 넘었고 14px 라 작았다. */ .kk-el-dept-text p{ font-size:16px; line-height:1.95; color:var(--ink); max-width:40em; margin:0 0 var(--s-5); } .kk-el-dept-text p:last-child{margin-bottom:0} /* 섹션 헤드: ABOUT 인사말과 같은 리듬(상단 헤어라인) */ .kk-el .kk-el-award-en{padding-top:var(--s-6); border-top:1px solid var(--line-strong)} .kk-el .kk-el-award-ko{margin-top:8px} /* ---- 수상/기업연계 타임라인 (SMBD: 실제 텍스트) ---- */ .kk-el-year .elementor-heading-title{font-size:24px} .kk-el-year-list li,.kk-el-year-list p{ font-size:15px; line-height:1.9; color:var(--ink); max-width:44em; } /* ---- 수상실적·기업연계 텍스트 타임라인 (SMVD, P5) ---- 통짜 이미지를 텍스트로 교체(functions.php 의 the_content 필터가 를 이 마크업으로). SMBD 타임라인과 같은 레일+픽셀노드 비주얼로 통일. .kk-el-awardimg 위젯 안에 렌더된다. */ /* ★ 이 타임라인은 이미지 위젯(.kk-el-awardimg, text-align:center) 안에 렌더되므로 가운데 정렬을 상속한다 → 명시적으로 왼쪽 정렬로 되돌린다(실측). */ /* 2026-09-18 2차 수정: 노드 = 클라이언트 요소-07, 세로선·불릿 = 요소 색(#68B1B8)으로 통일 */ .kk-awardtl{--kk-el-c:#68B1B8; margin-top:var(--s-6); text-align:left} .kk-awardtl__row{ position:relative; display:grid; grid-template-columns:120px minmax(0,1fr); gap:0 28px; border-left:1px solid var(--kk-el-c); padding:2px 0 var(--s-7) 30px; text-align:left; } .kk-awardtl__row:last-child{padding-bottom:0} .kk-awardtl__row::before{ content:""; position:absolute; left:-15px; top:0; width:30px; height:30px; background:no-repeat center/contain url("assets/img/el/el07.png"); } /* 스크롤하면 아래→위로 올라오며 등장(main.js 가 html.kk-rise-on + .is-in 부여. 모션 줄이기면 미적용) */ html.kk-rise-on .kk-awardtl__row{opacity:0; transform:translateY(48px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out)} html.kk-rise-on .kk-awardtl__row.is-in{opacity:1; transform:none} .kk-awardtl__year{ font-family:var(--f-disp); font-weight:800; font-size:24px; color:var(--ink); line-height:1.1; margin:0; } .kk-awardtl__list{list-style:none; margin:0; padding:0; max-width:46em} .kk-awardtl__list li{ position:relative; font-size:15px; line-height:1.9; color:var(--ink); margin:0 0 5px; padding-left:15px; } .kk-awardtl__list li::before{ content:""; position:absolute; left:0; top:.7em; width:5px; height:5px; background:var(--kk-el-c); } @media (max-width:900px){ .kk-el-dept-text p{font-size:15px} .kk-el-year-list li,.kk-el-year-list p{font-size:14px} .kk-el-year .elementor-heading-title{font-size:20px} .kk-awardtl__row{grid-template-columns:1fr; gap:0; padding:2px 0 var(--s-6) 22px} .kk-awardtl__row::before{width:22px; height:22px; left:-11px} .kk-awardtl__year{font-size:20px; margin-bottom:12px} .kk-awardtl__list li{font-size:14px; line-height:1.85} } /* ============================================================ 99. v2 P4 — GUESTBOOK 재정리 — 2026-09-09 ============================================================ */ /* 카드는 읽기 폭으로. 1290px 폭에서는 짧은 방명록 글이 허공에 흩어졌다. */ .kk-gb__card{max-width:880px; margin:0 auto} .kk-gb__stats{align-items:center} .kk-gb__stats span{gap:8px; font-size:13px; letter-spacing:.01em} .kk-gb__list{list-style:none; margin:22px 0 0; padding:0} .kk-cmt{display:flex; gap:16px; align-items:flex-start; border-top:1px solid var(--line); padding:22px 0} .kk-cmt__ava{ flex:0 0 38px; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:var(--paper-2); color:var(--teal-dark); font-family:var(--f-disp); font-weight:800; font-size:15px; } .kk-cmt__body{min-width:0; flex:1 1 auto} .kk-cmt__head{font-size:12px; color:var(--ink-soft)} .kk-cmt__head b{color:var(--ink); font-size:14px; margin-right:10px} .kk-cmt__text{ margin-top:6px; font-size:15px; line-height:1.8; color:var(--ink); overflow-wrap:anywhere; } .kk-gb__empty{ margin-top:22px; padding:28px 0; border-top:1px solid var(--line); font-size:14px; color:var(--ink-soft); text-align:center; } /* 폼: 이름·이메일을 한 줄에 나란히 ★ inline-block 으로 하면 태그 사이 공백 문자(약 7px)가 폭에 더해져 계산상 맞아도 줄바꿈된다(실측: 388+388+8 이 788 안에서 넘침) → flex 로. */ .kk-gb__form form{display:flex; flex-wrap:wrap; gap:10px} .kk-gb__form form > p{flex:0 0 100%; margin:0} .kk-gb__form .kk-gb__row{flex:1 1 calc(50% - 5px); width:auto; min-width:0; margin:0} .kk-gb__form .kk-gb__row input{width:100%; padding:11px 14px} .kk-gb__form textarea{min-height:120px} .kk-gb__form .form-submit{display:flex; justify-content:flex-end; margin:14px 0 0} @media (max-width:900px){ .kk-gb__form .kk-gb__row{flex:0 0 100%} .kk-cmt{gap:12px} .kk-cmt__ava{flex-basis:32px; width:32px; height:32px; font-size:13px} .kk-cmt__text{font-size:14px} } /* ============================================================ 101. 서브페이지 히어로 높이 통일 — 2026-09-10 (사용자 지시) ABOUT(.kk-pagehero, 고정높이)·DESIGNER/PROJECT(Elementor .kk-el-px, 패딩기반)를 같은 높이(--kk-hero-h 430px / 모바일 310px)로 맞춘다. - ABOUT계열(.kk-pagehero)은 위 5절에서 height:var(--kk-hero-h) 로 통일. - DESIGNER(5494)·PROJECT(5495) Elementor 히어로는 Elementor post CSS 의 padding:232px 0 (596px) 을 무력화하고 min-height + flex 세로중앙으로 같은 높이·중앙정렬. Elementor CSS 가 테마 CSS 보다 후행 로드 + 특이도 (0,3,0) 이므로 !important. ============================================================ */ :root{ --kk-hero-h:430px; --kk-hero-h-m:310px; } .page-id-5494 main .kk-el-px, .page-id-5495 main .kk-el-px, .page-id-5496 main .kk-el-px{ min-height:var(--kk-hero-h)!important; padding-top:0!important; padding-bottom:0!important; display:flex!important; flex-direction:column!important; justify-content:center!important; } @media (max-width:900px){ .page-id-5494 main .kk-el-px, .page-id-5495 main .kk-el-px, .page-id-5496 main .kk-el-px{ min-height:var(--kk-hero-h-m)!important; } } /* 서브 Elementor 히어로(.kk-el-px) 배경을 PDF 시안 teal 그라데이션으로. 현재는 인라인 Elementor 배경(흰색→#DFDCD5 회색)이라 흰 타이틀이 안 보임 → teal 로 교체. ★스코프: DESIGNER(5494)/PROJECT(5495)/GUESTBOOK(5496) + 홈 히어로 섹션(995c9c3)만. 홈에는 .kk-el-px 가 2개(히어로+인트로)라 홈은 히어로 element-id 로 한정(인트로 제외). 2026-09-10 */ .page-id-5494 main .kk-el-px, .page-id-5495 main .kk-el-px, .page-id-5496 main .kk-el-px, .page-id-5490 main .elementor-element-995c9c3.kk-el-px{ background-image:var(--kk-hero-grad)!important; } /* 105. 홈·PROJECT 히어로 배경 모션영상 — 2026-09-11 사용자 지시로 제거(주입 필터·영상/베일 CSS 삭제). 히어로는 섹션 배경(--kk-hero-grad) + px-tile 로 표시. */ /* ============================================================ 102. 홈 인트로 섹션 너비 축소 — 2026-09-10 (사용자 지시) 히어로 아래 "켜켜이 / 시간을 기록하고, / 하나의 아카이브를 완성하다." 섹션 (포스터+인트로텍스트, Elementor boxed 1514px)이 너무 넓다 → 컨테이너 1140px 로. .kk-el-intro-title 는 홈 인트로 섹션에만 있어 자연 스코프. Elementor boxed 규칙 (.elementor-section-boxed>.elementor-container)이 후행 로드라 특이도+!important 로 확실히. ============================================================ */ main .elementor-top-section:has(.kk-el-intro-title) > .elementor-container{ max-width:960px!important; /* 2026-09-10 추가 축소(1140→1040→960) */ } /* ============================================================ 103. 홈 인트로 — PDF 시안에 맞춤 (2026-09-10 사용자 지적) ① 배경: PDF 는 흰 바탕 + 도트가 **좌하단으로 뭉쳐** 흩뿌려지고 중앙·우측(본문)은 클린 흰색. 이전엔 전면 균일 격자(var(--px-tile) 반복)라 "PDF와 다르다" 지적. → 도트를 ::before 로 옮기고 mask 로 좌하단 집중·우상단 소멸 그라데이션 필드로. ② 본문(kk-el-body p): 시안이 더 크고 진함. 테마 15px 규칙이 Elementor(16/400)에 덮이므로 !important+상위스코프로 17px/500/ink 로 확실히. .kk-el-intro-title 는 홈 인트로에만 있어 자연 스코프. ============================================================ */ main .elementor-top-section:has(.kk-el-intro-title){ background-image:none; position:relative; } main .elementor-top-section:has(.kk-el-intro-title)::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-image: var(--px-tile); -webkit-mask-image: radial-gradient(135% 130% at 4% 100%, #000 0%, rgba(0,0,0,.85) 26%, rgba(0,0,0,0) 58%); mask-image: radial-gradient(135% 130% at 4% 100%, #000 0%, rgba(0,0,0,.85) 26%, rgba(0,0,0,0) 58%); } /* 콘텐츠를 도트 위로 */ main .elementor-top-section:has(.kk-el-intro-title) > .elementor-container{ position:relative; z-index:1; } /* WebGL 매트릭스 캔버스(.kk-intro-fx)·.kk-fx-on 숨김 규칙 — 2026-09-11 전 페이지 WebGL 제거로 삭제. 정적 도트가 그대로 표시. */ /* ABOUT 인물사진 좌→우 리빌 와이프 — kk-portrait.js 가 html.kk-portrait-on + .is-revealed 토글. 2026-09-10 */ html.kk-portrait-on .kk-free__full img[src*="prof/"]{ -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); /* 우측 100% 잘라 안 보임(왼쪽부터 드러날 준비) */ transition: clip-path 1.1s cubic-bezier(.16,1,.3,1), -webkit-clip-path 1.1s cubic-bezier(.16,1,.3,1); will-change: clip-path; } html.kk-portrait-on .kk-free__full img[src*="prof/"].is-revealed{ -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); /* 좌→우로 전부 드러남 */ } main .elementor-top-section:has(.kk-el-intro-title) .kk-el-body p{ font-family:var(--f-disp)!important; font-size:18px!important; font-weight:500!important; line-height:1.85!important; color:var(--ink)!important; /* 2026-09-18 2차: 에스코어드림 5 Medium (이전 Pretendard 18/600) */ } /* 지도교수 ↔ 졸업전시 위원회 사이 세로 갭 — 2026-09-10 사용자 지시(기존 20px). 위원회 헤딩 위젯(5571a4b)에 상단 여백. */ .page-id-5490 .elementor-element-5571a4b{ margin-top:190px!important; } /* 갭 210px (baseline 20 + 190) — 2026-09-12 클라이언트 요청⑤로 120→210(시안 223px) */ /* #아카이브 태그 헤딩(82c5f17) 위 여백 추가 — 2026-09-10 사용자 지시(기존 20px). */ .page-id-5490 .elementor-element-82c5f17{ margin-top:80px!important; } /* #켜켜이 태그 헤딩(2215670) 위 여백 50px — 2026-09-10 사용자 지시. */ .page-id-5490 .elementor-element-2215670{ margin-top:50px!important; } /* 홈 CONCEPT 섹션(67c33c2) 위 여백 추가 — 2026-09-10 사용자 지시(기존 padding-top 70px). Elementor CSS 후행이라 !important. */ .page-id-5490 .elementor-element-67c33c2{ padding-top:150px!important; } /* 히어로 날짜 텍스트(2026.11.13 ...) 흰색 — 2026-09-10 사용자 지시(PDF 시안). */ .kk-el-hero-date .elementor-heading-title{ color:#fff!important; } /* 본문 스크롤 리빌(부드럽게 나타남) — 2026-09-10 사용자 지시(ABOUT/SMVD/SMBD). kk-reveal.js 가 성공 시에만 html.kk-reveal-on 부여 → JS 실패 시 콘텐츠 항상 노출(안전). */ html.kk-reveal-on .kk-reveal{ opacity:0; transform:translateY(46px); transition:opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1); will-change:opacity, transform; } html.kk-reveal-on .kk-reveal.is-in{ opacity:1; transform:none; } /* 인사말 본문(축사·격려사·학과장·졸업위원장) 양쪽정렬 — 2026-09-10 사용자 지시. */ .kk-el-greet-text, .kk-el-greet-text p{ text-align:justify!important; word-break:keep-all; } /* 모바일은 좁은 폭에서 양쪽정렬이 단어 사이를 크게 벌려 왼쪽 정렬 — 2026-09-11 사용자 지시. */ @media (max-width:900px){ .kk-el-greet-text, .kk-el-greet-text p{ text-align:left!important; } } /* ============================================================ 107. DESIGNER 카드 — 분야·작품명 숨김 모드(.kk-grid--nowork) — 2026-09-11 KK_DESIGNER_SHOW_WORK=false 이면 카드에 cat/work 를 출력하지 않으므로 리스트 보기 6칸(번호·이름·영문·분야·작품·화살표) → 4칸(번호·이름·영문·화살표). 그리드 보기에선 빈 영문명 줄을 접는다. ============================================================ */ .kk-grid--designer.kk-grid--nowork.is-view-list .kk-card{ grid-template-columns:64px minmax(140px,1.5fr) minmax(150px,3.6fr) 28px; } .kk-grid--designer.is-view-grid .kk-card__en:empty{display:none} /* ============================================================ 108. 작품 상세 좌측 정보란 학생 프로필 사진 — 2026-09-12 (클라이언트 수정요청) 시안 p4 좌측 고정 패널처럼 이름 위에 인물 사진. DESIGNER 카드와 같은 341:444 비율. ============================================================ */ .kk-dside__photo{ margin:0 0 24px; width:100%; } /* 2026-09-14 "사진 더 크게": 180px → 좌측 패널 폭(340) 가득 */ .kk-dside__photo img{ display:block; width:100%; height:auto; aspect-ratio:341/444; object-fit:cover; } @media (max-width:900px){ .kk-dside__photo{ width:240px; } } /* ============================================================ 109. 좌우 여백 확대 + 구역 세로 여백 — 2026-09-12 (클라이언트 요청 ②·⑤) 근거: 시안 1920 렌더 픽셀 실측 — 본문 텍스트 컬럼 ≈1086px(가운데 정렬), 구역 사이 빈 여백 204~334px, 지도교수↔위원회 223px, 마지막 구역↔푸터 258px. --container 를 1514→1200 으로 낮춰(:root) .kk-container·.kk-free__inner 가 함께 좁아지고, Elementor boxed 섹션(=홈 CONCEPT/지도교수, DESIGNER·PROJECT 그리드, GUESTBOOK 본문)도 1200 으로 통일. 이미 더 좁은 곳(홈 인트로 960, ABOUT계열 본문 1140)과 히어로 배너·푸터는 그대로 둔다. ============================================================ */ /* ★Elementor 기본 규칙 `.elementor-section.elementor-section-boxed > .elementor-container`(클래스 3개)가 테마 CSS보다 뒤에 로드되고 특이도도 높다 → 같은 클래스 수 + !important 로 확실히 덮는다. */ main .elementor-section.elementor-section-boxed > .elementor-container{ max-width:var(--container)!important; } /* 히어로 배너는 시안처럼 넓게(Elementor 기본 1514px) 유지 */ .page-id-5490 main .elementor-element-995c9c3 > .elementor-container, .page-id-5494 main .elementor-element-410e522 > .elementor-container, .page-id-5495 main .elementor-element-f634a41 > .elementor-container, .page-id-5496 main .elementor-element-e05d7cb > .elementor-container{ max-width:1514px!important; } /* ★홈 인트로는 사용자가 9/10에 두 번 좁힌 960px 유지(위 규칙과 같은 !important 라 특이도를 올려 고정) */ .page-id-5490 main .elementor-element-e17c70f.elementor-section > .elementor-container{ max-width:960px!important; } /* 작품상세 하단 "같은 분야 디자이너"도 본문 폭에 맞춤(기존 1640). ※탭바·초성 필터바는 위 6절(.kk-el .kk-tabbar__inner/.kk-filterbar__inner) 한 곳에서만 정의한다 — 중복 금지. */ .kk-drel .kk-container{ max-width:760px; } /* 2026-09-18 2차: 작게(카드 220px×3) */ /* ============================================================ 110. 홈 본문 배경 = 클라이언트 제공 배경 요소 (요청 ①) — 2026-09-12 `배경 요소-04`(상단 픽셀 레터링) → assets/img/bg/bg-letter.png : 인트로 ::before 로 깔고 CONCEPT 구간까지 흘러야 해서 아래쪽 inset 을 확장(레터링 잉크는 이미지 높이의 20~70%). `배경 요소-02`의 그라데이션 띠 → assets/img/bg/bg-grad.png : 지도교수 섹션 바닥에 고정 (푸터 바로 위에서 옅어지며 끝나는 원본 그대로, 위로는 흰 지면과 자연스럽게 이어짐). 기존 근사치(도트 radial 마스크 / 흰→종이색 그라데이션)를 대체한다. px 도트(::after)는 시안에도 있어 유지. ============================================================ */ .page-id-5490 main .elementor-element-e17c70f::before{ background-image:url("assets/img/bg/bg-letter.png"); background-repeat:no-repeat; background-position:top center; background-size:100% auto; -webkit-mask-image:none; mask-image:none; inset:0 0 -760px 0; opacity:1; pointer-events:none; } /* 2026-09-18 2차 수정: 클라이언트 '네모픽셀' 파일 아래부분(bg-pixel.png, 1900×1325 흰 사각 모자이크)을 그라데이션 위에 겹쳐 바닥에 고정 — 아래로 갈수록 픽셀이 쌓여 푸터로 이어진다. (원본 1900×1925 중 촘촘한 아래 800px 만 사용 → 섹션 위쪽 지도교수 구간은 깨끗하게, 시안과 동일) */ .page-id-5490 main .elementor-element-9599d19{ background-image:url("assets/img/bg/bg-pixel.png?v=2"), url("assets/img/bg/bg-grad.png")!important; background-repeat:no-repeat, no-repeat!important; background-position:center bottom, center bottom!important; background-size:100% auto, 100% auto!important; } /* 홈 구역 세로 여백 — Elementor 인라인 패딩보다 뒤에 오도록 !important */ .page-id-5490 main .elementor-element-e17c70f{ padding-top:150px!important; } /* 히어로↔인트로 210→240 */ .page-id-5490 main .elementor-element-67c33c2{ padding-bottom:140px!important; } /* CONCEPT 아래 110→140 */ .page-id-5490 main .elementor-element-deae9f8{ padding-top:120px!important; padding-bottom:120px!important; } .page-id-5490 main .elementor-element-9599d19{ padding-top:140px!important; padding-bottom:240px!important; } /* 마지막 구역↔푸터 90→210 */ /* 인사말/축사 서명 — 2026-09-18 2차 수정: 이름 옆으로 이동하면서 잉크 영역만 잘라 투명 배경으로 만든 sign/N-v2.png 로 교체. (이전 폭 고정 240/110px 규칙은 max-height 와 충돌해 1번 서명이 240×64 로 눌려 보였음 — 실측 후 삭제) 네 서명을 같은 높이로 맞춘다. */ .kk-el-greet-row .elementor-widget-wrap > .kk-el-sign img{height:40px!important; width:auto!important; max-width:none!important; max-height:none!important} /* 2026-09-29 메일: 28px 는 작다 → 40px 로 키우고 이름과 세로 가운데 정렬 */ /* ABOUT(5491)/SMVD(5492)/SMBD(5493) 본문 콘텐츠 폭 축소·통일 — 2026-09-10 사용자 지시. 본문 Elementor 컨테이너 기본 1514px → 1140px. .kk-free__full 스코프(본문만). */ .page-id-5491 .kk-free__full .elementor-top-section > .elementor-container, .page-id-5492 .kk-free__full .elementor-top-section > .elementor-container, .page-id-5493 .kk-free__full .elementor-top-section > .elementor-container{ max-width:1140px!important; } /* ============================================================ 104. PROJECT 히어로↔sub-nav 흰 여백 제거 — 2026-09-10 (사용자 지적) 카테고리 탭바 섹션의 Elementor 컬럼 .elementor-widget-wrap 기본 패딩(top 10px)이 teal 탭바를 10px 밀어내, 흰 body 배경(콘텐츠 흰색화 이후)이 히어로와 탭바 사이로 드러났다. 그 섹션 상단 패딩만 0으로 → 탭바가 히어로 하단에 밀착. .kk-tabbar 포함 top-section 스코프(PROJECT). Elementor 기본규칙 후행로드라 !important. ============================================================ */ .page-id-5495 .elementor-top-section:has(.kk-tabbar) .elementor-widget-wrap{ padding-top:0!important; } /* DESIGNER(page-id-5494): 초성 필터바 sub-nav도 동일 원인(widget-wrap top 10px)으로 히어로↔teal 필터바 사이 10px 흰 띠 → 상단 패딩 0으로 밀착. 2026-09-10 */ .page-id-5494 .elementor-top-section:has(.kk-filterbar) .elementor-widget-wrap{ padding-top:0!important; } /* ============================================================ 106. 투명 헤더 — 2026-09-11 (사용자 지시) body.kk-hdr-over(functions.php: 홈·ABOUT·SMVD·SMBD·DESIGNER·PROJECT·GUESTBOOK)만. 맨 위에선 헤더 배경·블러·보더를 없애고 본문 밀기(.kk-main padding-top)를 풀어 히어로가 헤더 밑까지 올라간다. 히어로는 헤더 높이만큼 위 패딩·높이를 늘려 콘텐츠 위치는 그대로. 스크롤(.is-scrolled) 또는 모바일 메뉴 열림이면 기존 흰 헤더. ============================================================ */ body.kk-hdr-over .kk-main{padding-top:0} body.kk-hdr-over .kk-header:not(.is-scrolled){ background:transparent; border-bottom-color:transparent; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; } body.kk-hdr-over .kk-header:has(.kk-nav.is-open){background:rgba(255,255,255,.97)} /* 현재 페이지 메뉴(teal-light)는 밝은 teal 히어로 위에서 거의 안 보여 → 투명 상태에선 teal-dark */ body.kk-hdr-over .kk-header:not(.is-scrolled) .kk-nav a[aria-current="page"]{color:var(--teal-dark)} /* 히어로를 헤더 밑까지 확장 (헤더 높이 = --header-h, 브레이크포인트별 114/96/80) */ body.kk-hdr-over .kk-pagehero{ height:calc(var(--kk-hero-h,430px) + var(--header-h)); padding-top:var(--header-h); } body.kk-hdr-over.page-id-5494 main .kk-el-px, body.kk-hdr-over.page-id-5495 main .kk-el-px, body.kk-hdr-over.page-id-5496 main .kk-el-px{ min-height:calc(var(--kk-hero-h) + var(--header-h))!important; padding-top:var(--header-h)!important; } /* 홈 히어로: 2026-09-18 2차 수정으로 첫 화면 가득(111절 min-height 100svh + 세로 중앙) → 상단은 헤더 높이만 비운다(이전 170px + 헤더) */ body.kk-hdr-over.page-id-5490 main .elementor-element-995c9c3.kk-el-px{ padding-top:var(--header-h)!important; } @media (max-width:900px){ body.kk-hdr-over .kk-pagehero{height:calc(var(--kk-hero-h-m,310px) + var(--header-h))} body.kk-hdr-over.page-id-5494 main .kk-el-px, body.kk-hdr-over.page-id-5495 main .kk-el-px, body.kk-hdr-over.page-id-5496 main .kk-el-px{ min-height:calc(var(--kk-hero-h-m) + var(--header-h))!important; } } /* ============================================================ 111. 2차 수정 요청 (0916 「2차 수정 사항.pdf」) — 2026-09-18 ============================================================ */ /* ① 홈 히어로: 첫 화면을 가득 채워 메인 비주얼 강조(시안 "반반으로 나뉘어 시선 분산 → 메인 부분 크게"). Elementor 패딩 대신 min-height 100svh + 세로 중앙. 헤더(투명)는 히어로 위에 겹친다. */ body.page-id-5490 main .elementor-element-995c9c3.kk-el-px{ min-height:100vh; min-height:100svh; display:flex!important; flex-direction:column; justify-content:center; padding-bottom:48px!important; /* padding-top 은 106절 투명헤더 규칙(헤더 높이) 한 곳에서 */ } body.page-id-5490 main .elementor-element-995c9c3.kk-el-px > .elementor-container{width:100%} /* ② MAP 버튼을 히어로 오른쪽(날짜 아래)으로 이동(Elementor 데이터에서 위젯 이동) — teal 히어로 위라 흰색 */ body.page-id-5490 main .elementor-element-995c9c3 .kk-el-mapbtn{margin-top:28px} body.page-id-5490 main .elementor-element-995c9c3 .kk-el-mapbtn{text-align:right} /* Elementor 4.x 는 .elementor-widget-container 래퍼가 없다 — 위젯 자체에 */ body.page-id-5490 main .elementor-element-995c9c3 .kk-el-mapbtn .elementor-button, body.page-id-5490 main .elementor-element-995c9c3 .kk-el-mapbtn .elementor-button:hover{color:#fff} body.page-id-5490 main .elementor-element-995c9c3 .kk-el-mapbtn .elementor-button-text::after{ background:linear-gradient(90deg, rgba(255,255,255,0) 0%, #fff 100%); } /* ③ DESIGNER 초성 필터: 첫 탭(ㄱ~ㄷ)을 카드 그리드 왼쪽 끝에, 검색창을 오른쪽 끝에 맞춘다(시안 before→after "이동"). 필터 내부 1200 vs 그리드 1180 → 좌우 10px 안쪽으로. 모바일(≤900)은 기존 줄바꿈 배치 유지. */ @media (min-width:901px){ .page-id-5494 .kk-filterbar__inner{justify-content:flex-start; padding-inline:10px} .page-id-5494 .kk-search{right:10px} } /* ④ SMVD(5492) 수상·기업연계: 배경 적용(시안 요청) — 홈 위원회 구역과 같은 처리. 페이지 마지막 구역(기업연계 e97da21) 바닥에 그라데이션 + 네모픽셀 모자이크, 아래 여백을 줘서 푸터로 이어지게. */ .page-id-5492 main .elementor-element-e97da21{ background-image:url("assets/img/bg/bg-pixel.png?v=2"), url("assets/img/bg/bg-grad.png")!important; background-repeat:no-repeat, no-repeat!important; background-position:center bottom, center bottom!important; background-size:100% auto, 100% auto!important; padding-bottom:240px!important; } /* ============================================================ 112. 홈 히어로 배경 모션영상 (클라이언트 -0917- 메인 모션) — 2026-09-21 (사용자 지시) functions.php 의 the_content 필터가 홈 히어로(995c9c3) 첫 자식으로 주입. 레이어: video(z0) < px-tile ::after(z1) < 콘텐츠(z2). 2026-09-10 판과 달리 teal 베일을 두지 않는다 ('메인 모션 강조' 요청). 영상이 없거나 재생 실패하면 섹션 배경(--kk-hero-grad)이 그대로 폴백. ============================================================ */ .page-id-5490 .elementor-element-995c9c3.kk-el-px{ overflow:hidden; } .page-id-5490 .elementor-element-995c9c3 .kk-video-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; pointer-events:none; border:0; display:block; } /* 모션 줄이기: 영상 대신 포스터 한 장(=섹션 배경 그라데이션)만 */ html.kk-reduced .page-id-5490 .elementor-element-995c9c3 .kk-video-bg, html.kk-reduced .kk-video-bg{ display:none; } /* --- 서브 히어로(ABOUT·SMVD·SMBD = .kk-pagehero, DESIGNER·PROJECT·GUESTBOOK = .kk-el-px) 배경 모션영상 (2026-09-21) --- */ .kk-pagehero .kk-video-bg{ z-index:0; } .kk-pagehero::after{ z-index:1; } /* px 도트는 영상 위 */ .kk-pagehero__inner{ position:relative; z-index:2; } .page-id-5494 main .kk-el-px, .page-id-5495 main .kk-el-px, .page-id-5496 main .kk-el-px{ overflow:hidden; } .page-id-5494 main .kk-el-px > .kk-video-bg, .page-id-5495 main .kk-el-px > .kk-video-bg, .page-id-5496 main .kk-el-px > .kk-video-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; pointer-events:none; border:0; display:block; } /* ============================================================ 113. 3차 수정 요청 (「3차 수정 사항.pdf」 2026-09-23) — 2026-09-29 ============================================================ */ /* ① 홈 히어로 레이아웃: 제목·부제를 화면 가운데, 학교명(좌하단) / 주소·일시·MAP(우하단). Elementor 2컬럼 DOM 은 그대로 두고 컬럼·위젯랩을 display:contents 로 풀어 섹션 컨테이너를 3행 그리드로 쓴다(= DB 수정 없이 배치 변경, 되돌리기 쉬움). */ @media (min-width:901px){ body.page-id-5490 main .elementor-element-995c9c3 > .elementor-container{ display:grid!important; grid-template-columns:1fr 1fr; grid-template-rows:1.1fr auto auto 1fr auto auto auto; /* 여백 · 제목 · 부제 · 여백 · 하단 3줄 */ align-items:end; row-gap:0; width:100%; padding-inline:clamp(24px,4vw,80px)!important; box-sizing:border-box!important; flex:1 1 auto; min-height:100%; /* 히어로(플렉스 세로중앙) 안에서 전체 높이를 차지해야 1fr 여백이 작동 */ } body.page-id-5490 main .elementor-element-995c9c3 > .elementor-container > .elementor-column, body.page-id-5490 main .elementor-element-995c9c3 .elementor-widget-wrap{display:contents} /* Elementor 기본 위젯 여백(20px)을 없애고 간격을 여기서만 준다 */ body.page-id-5490 main .elementor-element-995c9c3 .elementor-widget{margin:0!important} body.page-id-5490 main .elementor-element-995c9c3 .kk-el-hero-title{grid-row:2; grid-column:1 / -1} body.page-id-5490 main .elementor-element-995c9c3 .kk-el-hero-sub{grid-row:3; grid-column:1 / -1} body.page-id-5490 main .elementor-element-995c9c3 .kk-el-hero-meta{grid-row:5; grid-column:1; justify-self:start; align-self:end; text-align:left} body.page-id-5490 main .elementor-element-995c9c3 .kk-el-hero-en{grid-row:6; grid-column:1; justify-self:start; align-self:start; text-align:left; margin-top:10px!important} body.page-id-5490 main .elementor-element-995c9c3 .kk-el-hero-place{grid-row:5; grid-column:2; justify-self:end; align-self:end; text-align:right} body.page-id-5490 main .elementor-element-995c9c3 .kk-el-hero-date{grid-row:6; grid-column:2; justify-self:end; align-self:start; text-align:right; margin-top:10px!important} body.page-id-5490 main .elementor-element-995c9c3 .kk-el-mapbtn{grid-row:7; grid-column:2; justify-self:end; margin-top:22px!important} body.page-id-5490 main .elementor-element-995c9c3 .kk-el-hero-date .elementor-heading-title{line-height:1.25} body.page-id-5490 main .elementor-element-995c9c3 .kk-el-hero-title .elementor-heading-title, body.page-id-5490 main .elementor-element-995c9c3 .kk-el-hero-sub .elementor-heading-title{text-align:center} body.page-id-5490 main .elementor-element-995c9c3 .kk-el-hero-sub .elementor-heading-title{margin-top:6px} body.page-id-5490 main .elementor-element-995c9c3 .kk-el-hero-en p{text-align:left} } /* (② 히어로 하단 scroll 유도 — 6차 2026-10-30 클라이언트 요청으로 삭제: 하늘색 띠·scroll 글자) */ /* ③ 홈 인트로: 포스터:본문 = 1:1 (기존 1:2.4) */ @media (min-width:901px){ .page-id-5490 main .elementor-element-e17c70f > .elementor-container{ display:flex!important; align-items:flex-start; gap:48px; } .page-id-5490 main .elementor-element-e17c70f > .elementor-container > .elementor-column{ width:50%!important; flex:1 1 50%!important; } } /* ④ SMVD·SMBD 타임라인 등장 — 투명 상태에서 행이 아래→위로, 노드는 별자리처럼 위에서 떨어지고, 글자는 왼쪽에서 오른쪽으로 쫙 드러난다(clip-path). main.js 가 html.kk-rise-on + .is-in 부여. 모션 줄이기면 애니메이션 자체를 걸지 않는다(kk-rise-on 미부여). */ html.kk-rise-on .kk-awardtl__row, html.kk-rise-on .kk-el-timeline-row{ opacity:0; transform:translateY(48px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); } html.kk-rise-on .kk-awardtl__row.is-in, html.kk-rise-on .kk-el-timeline-row.is-in{opacity:1; transform:none} html.kk-rise-on .kk-awardtl__row::before, html.kk-rise-on .kk-el-timeline-row::before{ opacity:0; transform:translateY(-34px); transition:opacity .5s ease-out .15s, transform .7s cubic-bezier(.2,.9,.25,1) .15s; } html.kk-rise-on .kk-awardtl__row.is-in::before, html.kk-rise-on .kk-el-timeline-row.is-in::before{opacity:1; transform:none} html.kk-rise-on .kk-awardtl__row .kk-awardtl__year, html.kk-rise-on .kk-awardtl__row .kk-awardtl__list, html.kk-rise-on .kk-el-timeline-row .kk-el-year, html.kk-rise-on .kk-el-timeline-row .kk-el-year-list{ -webkit-clip-path:inset(0 100% 0 0); clip-path:inset(0 100% 0 0); transition:clip-path .85s cubic-bezier(.16,1,.3,1) .3s, -webkit-clip-path .85s cubic-bezier(.16,1,.3,1) .3s; } html.kk-rise-on .kk-awardtl__row.is-in .kk-awardtl__year, html.kk-rise-on .kk-awardtl__row.is-in .kk-awardtl__list, html.kk-rise-on .kk-el-timeline-row.is-in .kk-el-year, html.kk-rise-on .kk-el-timeline-row.is-in .kk-el-year-list{ -webkit-clip-path:inset(0 0 0 0); clip-path:inset(0 0 0 0); } /* ⑤ SMBD(5493) 도 SMVD 와 같은 바닥 배경(픽셀+그라데이션) */ .page-id-5493 main .elementor-element-e14576b{ background-image:url("assets/img/bg/bg-pixel.png?v=2"), url("assets/img/bg/bg-grad.png")!important; background-repeat:no-repeat, no-repeat!important; background-position:center bottom, center bottom!important; background-size:100% auto, 100% auto!important; padding-bottom:240px!important; } /* ============================================================ 114. 3차 수정 추가 메일 (2026-09-29) — 클라이언트 회신 반영 ============================================================ */ /* ① 인사말 인물 사진: 좌측을 제목(GREETINGS…)과 같은 선에 맞춘다 */ .kk-el-greet-row > .elementor-container > .elementor-column:first-child > .elementor-widget-wrap{padding-left:0!important} .kk-el-greet-row .kk-el-greet-photo{margin-left:0!important} /* ② 지도교수 명단: 첫 줄(학부장)은 가운데 한 줄, 나머지는 2열 */ .kk-el-people-list .lead{grid-column:1 / -1; text-align:center} /* ============================================================ 115. 4차 수정 요청 (「4차 수정 사항.pdf」 2026-10-22) — 2026-10-23 근거: 메일 「+ 수정요청 4차입니다. 이 자료로 봐주세요!!」 PDF 9쪽 + 메인 화면.jpg·모바일 메인화면 레이아웃.jpg ★폰트: ONE 모바일 고딕은 functions.php 가 공식 서브셋 CSS 를 로드(--f-one). SD워키토키(산돌 유료)는 파일 수령 전이라 S-CoreDream 900 을 가로 축소해 임시 대체(--f-wk). ============================================================ */ :root{ --f-one: "ONE Mobile", "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif; --f-wk: "S-CoreDream", "Pretendard Variable", Pretendard, sans-serif; /* TODO: SD워키토키 웹 사용권/파일 수령 시 교체 */ } /* ---------- ① 홈 히어로 (데스크톱) ---------- */ @media (min-width:901px){ body.page-id-5490 main .elementor-element-995c9c3.kk-el-px{ min-height:640px!important; height:calc(100vh - 130px); height:calc(100svh - 130px); max-height:1180px; padding-bottom:0!important; } body.page-id-5490 main .elementor-element-995c9c3 > .elementor-container{ max-width:none!important; padding-left:clamp(24px,12.9vw,320px)!important; padding-right:clamp(24px,11.6vw,290px)!important; padding-bottom:clamp(88px,15.5svh,190px)!important; /* 5차 「여백」: 글자 묶음이 하단 네모 픽셀과 겹치지 않게 */ grid-template-rows:clamp(24px,11.7svh,220px) auto auto minmax(0,1fr) auto auto auto; } /* 좌측 묶음: 위는 주소 줄, 아래는 MAP 줄에 맞춘다(시안) */ body.page-id-5490 main .elementor-element-995c9c3 .kk-el-hero-meta{grid-row:5 / 8; align-self:start} body.page-id-5490 main .elementor-element-995c9c3 .kk-el-hero-en{grid-row:5 / 8; align-self:end; margin-top:0!important} body.page-id-5490 main .elementor-element-995c9c3 .kk-el-mapbtn{margin-top:14px!important} /* 메인 로고: 제목 + 부제(한 줄, 제목과 같은 폭) */ body.page-id-5490 main .elementor-element-995c9c3 .kk-el-hero-title, body.page-id-5490 main .elementor-element-995c9c3 .kk-el-hero-sub{text-align:center} body.page-id-5490 main .elementor-element-995c9c3 .kk-el-hero-title .elementor-heading-title{ display:inline-block; font-family:var(--f-wk); font-weight:900; font-size:clamp(150px,11.2vw,230px); line-height:.95; letter-spacing:-.02em; transform:scaleX(.78); transform-origin:50% 50%; } body.page-id-5490 main .elementor-element-995c9c3 .kk-el-hero-sub .elementor-heading-title{ display:inline-block; font-family:var(--f-wk); font-weight:900; font-size:clamp(40px,3.55vw,72px); line-height:1.1; letter-spacing:-.02em; white-space:nowrap; transform:scaleX(.845); transform-origin:50% 50%; margin-top:12px; } /* 나머지 문구: ONE 모바일 고딕, 흰색 */ body.page-id-5490 main .elementor-element-995c9c3 .kk-el-hero-meta .elementor-heading-title{ font-family:var(--f-one); font-weight:400; font-size:clamp(18px,1.45vw,30px); line-height:1.4; letter-spacing:0; color:#fff; } body.page-id-5490 main .elementor-element-995c9c3 .kk-el-hero-en{font-family:var(--f-one); font-weight:300; font-size:clamp(14px,1.15vw,24px); line-height:1.55; color:rgba(255,255,255,.92)} body.page-id-5490 main .elementor-element-995c9c3 .kk-el-hero-en p{margin:0} body.page-id-5490 main .elementor-element-995c9c3 .kk-el-hero-place{font-family:var(--f-one); font-weight:300; font-size:clamp(12px,.86vw,18px); color:rgba(255,255,255,.9)} body.page-id-5490 main .elementor-element-995c9c3 .kk-el-hero-place p{margin:0} body.page-id-5490 main .elementor-element-995c9c3 .kk-el-hero-date .elementor-heading-title{ font-family:var(--f-one); font-weight:300; font-size:clamp(24px,2.2vw,46px); line-height:1.12; letter-spacing:-.01em; color:#fff!important; } body.page-id-5490 main .elementor-element-995c9c3 .kk-el-mapbtn .elementor-button{ font-family:var(--f-one); font-weight:400; font-size:clamp(14px,1.1vw,22px); letter-spacing:.02em; } } /* 일정 둘째 줄 앞 긴 대시 — ONE 모바일 고딕에 — 글리프가 없어(실측) 선으로 직접 그린다 */ .kk-dash{display:inline-block; width:1.75em; height:2px; background:currentColor; vertical-align:.3em; margin-right:.08em} /* PC/모바일 문구 전환 (시안이 두 버전의 줄바꿈·띄어쓰기를 따로 지정) */ .kk-mo{display:none} @media (max-width:900px){ .kk-pc{display:none} .kk-mo{display:inline} } /* 영상의 네모 픽셀 띠를 시안 비율(하단 약 22%)로 */ body.page-id-5490 .elementor-element-995c9c3 .kk-video-bg{object-position:50% 6%} /* 픽셀 띠를 화면 90% 아래로(글자 아래 여백) */ /* ---------- ② 홈 인트로: 포스터 3색 슬라이드 + 문구 (시안 p8 / 메인 화면.jpg) ---------- 포스터를 가운데 줄로, 그 아래 [큰 제목 + 소제목] 한 줄, 그 아래 본문 두 단락. */ .kk-posters{position:relative; width:100%; max-width:1200px; margin:0 auto; --pw:clamp(210px,26vw,500px)} .kk-posters__stage{position:relative; height:calc(var(--pw) * 1.413 + 36px)} .kk-posters__item{ position:absolute; left:50%; top:18px; width:var(--pw); margin:0; cursor:pointer; transition:transform .8s cubic-bezier(.22,.8,.2,1), opacity .6s ease; will-change:transform; backface-visibility:hidden; } .kk-posters__item img{display:block; width:100%; height:auto; box-shadow:0 22px 54px rgba(31,100,108,.20), 0 4px 14px rgba(31,100,108,.10)} .kk-posters__item[data-pos="center"]{transform:translate(-50%,0) scale(1); z-index:3; cursor:default} .kk-posters__item[data-pos="left"]{transform:translate(calc(-50% - var(--pw) * .70), 2.2%) scale(.92); z-index:2} .kk-posters__item[data-pos="right"]{transform:translate(calc(-50% + var(--pw) * .70), 2.2%) scale(.92); z-index:2} .kk-posters__item[data-pos="hidden"]{opacity:0; pointer-events:none; transform:translate(-50%,0) scale(.8); z-index:1} .kk-posters__item:focus-visible{outline:2px solid var(--teal); outline-offset:6px} @media (min-width:901px){ .page-id-5490 main .elementor-element-e17c70f.elementor-section > .elementor-container{ max-width:1200px!important; display:flex!important; flex-direction:column; align-items:center; gap:0; } .page-id-5490 main .elementor-element-e17c70f > .elementor-container > .elementor-column{width:100%!important; flex:0 0 auto!important} .page-id-5490 main .elementor-element-e17c70f > .elementor-container > .elementor-column:nth-child(2) > .elementor-widget-wrap{ display:grid!important; grid-template-columns:auto 1fr; column-gap:34px; align-items:end; width:100%; max-width:1200px; margin:clamp(60px,7.4vw,140px) auto 0; padding:0!important; } .page-id-5490 main .elementor-element-e17c70f .kk-el-intro-title{grid-column:1; grid-row:1; margin:0!important} .page-id-5490 main .elementor-element-e17c70f .kk-el-intro-lead{grid-column:2; grid-row:1; margin:0 0 .5em!important} .page-id-5490 main .elementor-element-e17c70f .kk-el-body{grid-column:1 / -1; grid-row:2; width:100%!important; max-width:none!important; margin:44px 0 0!important} .page-id-5490 main .elementor-element-e17c70f .kk-el-intro-title .elementor-heading-title{ display:inline-block; font-family:var(--f-wk)!important; font-weight:900!important; font-size:clamp(90px,7.1vw,150px)!important; line-height:.95!important; letter-spacing:-.02em; color:#34838d; transform:scaleX(.78); transform-origin:0 100%; margin-right:-.6em; } .page-id-5490 main .elementor-element-e17c70f .kk-el-intro-lead .elementor-heading-title{ display:inline-block; font-family:var(--f-wk)!important; font-weight:900!important; font-size:clamp(22px,1.95vw,42px)!important; line-height:1.2!important; letter-spacing:-.02em; color:#2f7f87; transform:scaleX(.82); transform-origin:0 100%; } } main .elementor-top-section:has(.kk-el-intro-title) .kk-el-body p{ font-family:var(--f-sans)!important; font-size:clamp(15px,.99vw,20px)!important; font-weight:500!important; line-height:1.95!important; letter-spacing:-.012em!important; color:#437877!important; margin:0 0 1.5em!important; word-break:keep-all; text-align:justify; } main .elementor-top-section:has(.kk-el-intro-title) .kk-el-body p:last-child{margin-bottom:0!important} main .elementor-top-section:has(.kk-el-intro-title) .kk-el-body strong{font-weight:700; color:#0f393a} /* ---------- ③ 푸터 로고 3종 같은 크기·위아래 맞춤 ---------- */ .kk-footer__logos{align-items:center; gap:clamp(24px,2.6vw,48px)} .kk-footer__img{height:44px; width:auto; max-width:none} @media (max-width:900px){ .kk-footer__img{height:34px} .kk-footer__logos{gap:22px; flex-wrap:wrap} } /* ---------- ④ 작품 상세 상단 배너: 글자 전부 삭제(스크린리더용 h1 은 화면 밖으로 유지) ---------- */ .kk-dhero__cap{ position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); -webkit-clip-path:inset(50%); clip-path:inset(50%); white-space:nowrap; border:0; } .kk-dhero__scrim{display:none} /* ---------- ⑤ ABOUT 하위 탭: 가운데 탭(SMVD)을 위쪽 ABOUT 제목과 중앙 정렬 ---------- */ @media (min-width:901px){ .kk-tabbar--sub .kk-tabbar__inner{display:grid; grid-template-columns:1fr auto 1fr; justify-items:center; column-gap:clamp(60px,5.7vw,110px)} .kk-tabbar--sub .kk-tabbar__inner > .kk-tab:nth-of-type(1){justify-self:end} .kk-tabbar--sub .kk-tabbar__inner > .kk-tab:nth-of-type(2){justify-self:center} .kk-tabbar--sub .kk-tabbar__inner > .kk-tab:nth-of-type(3){justify-self:start} } /* ---------- ⑥ 홈 마지막 구역(지도교수·위원회): 클라이언트 신규 '밑 배경' (위는 흰색→아래로 갈수록 민트+네모) ---------- 이음매·끊김이 없도록 위쪽이 순백으로 시작하는 원본을 그대로 쓴다(2400폭 리사이즈, 100% 폭). 옛 bg-pixel+bg-grad 2겹을 대체. */ .page-id-5490 main .elementor-element-9599d19{ background-image:url("assets/img/bg/bg-bottom.jpg?v=1")!important; background-repeat:no-repeat!important; background-position:center bottom!important; background-size:100% auto!important; background-color:#fefefe; } /* ---------- ⑦ 모바일 메인: 스크롤 없는 한 화면(레퍼런스: 2025 연세대 졸업전시) ---------- 포스터·소개·CONCEPT·PROJECT·지도교수·위원회·푸터는 모바일 홈에서 숨기고, 다른 페이지는 햄버거 메뉴로 이동. 배경은 모션(= 히어로 배경영상). 시안 「모바일 메인화면 레이아웃.jpg」 비율(650×1358)을 따른다. */ @media (max-width:900px){ body.page-id-5490{overflow:hidden; height:100vh; height:100svh; overscroll-behavior:none} body.page-id-5490 main .elementor-top-section:not(.elementor-element-995c9c3){display:none!important} body.page-id-5490 .kk-footer{display:none} body.page-id-5490 main .elementor-element-995c9c3.kk-el-px{ height:100vh; height:100svh; min-height:0!important; max-height:none; display:block!important; padding:0!important; } body.page-id-5490 main .elementor-element-995c9c3 > .elementor-container{ display:grid!important; grid-template-columns:1fr; width:100%; max-width:none!important; height:100%; box-sizing:border-box; padding:calc(var(--header-h) + 5svh) 7.4vw 25svh!important; grid-template-rows:auto auto auto auto minmax(0,1fr) auto auto; align-content:stretch; align-items:start; } body.page-id-5490 main .elementor-element-995c9c3 > .elementor-container > .elementor-column, body.page-id-5490 main .elementor-element-995c9c3 .elementor-widget-wrap{display:contents} body.page-id-5490 main .elementor-element-995c9c3 .elementor-widget{margin:0!important} body.page-id-5490 main .elementor-element-995c9c3 .kk-el-hero-place{display:none} body.page-id-5490 main .elementor-element-995c9c3 .kk-el-hero-title{grid-row:1; grid-column:1; justify-self:start; text-align:left} body.page-id-5490 main .elementor-element-995c9c3 .kk-el-hero-sub{grid-row:2; grid-column:1; justify-self:start; text-align:left; margin-top:.6svh!important} body.page-id-5490 main .elementor-element-995c9c3 .kk-el-hero-meta{grid-row:3; grid-column:1; justify-self:start; text-align:left; margin-top:4.6svh!important} body.page-id-5490 main .elementor-element-995c9c3 .kk-el-hero-en{grid-row:4; grid-column:1; justify-self:start; text-align:left; margin-top:1.4svh!important} body.page-id-5490 main .elementor-element-995c9c3 .kk-el-hero-date{grid-row:6; grid-column:1; justify-self:end; align-self:end; text-align:right} body.page-id-5490 main .elementor-element-995c9c3 .kk-el-mapbtn{grid-row:7; grid-column:1; justify-self:end; margin-top:1.2svh!important; text-align:right} body.page-id-5490 main .elementor-element-995c9c3 .kk-el-hero-title .elementor-heading-title{ display:inline-block; font-family:var(--f-wk); font-weight:900; font-size:24vw; line-height:.95; letter-spacing:-.02em; text-align:left; transform:scaleX(.78); transform-origin:0 50%; margin-right:-5.6vw; } body.page-id-5490 main .elementor-element-995c9c3 .kk-el-hero-sub .elementor-heading-title{ display:inline-block; font-family:var(--f-wk); font-weight:900; font-size:7.7vw; line-height:1.1; letter-spacing:-.02em; white-space:nowrap; text-align:left; transform:scaleX(.845); transform-origin:0 50%; margin-top:0; } body.page-id-5490 main .elementor-element-995c9c3 .kk-el-hero-meta .elementor-heading-title{ font-family:var(--f-one); font-weight:400; font-size:4.7vw; line-height:1.38; letter-spacing:-.01em; color:#2f7f87; text-align:left; } body.page-id-5490 main .elementor-element-995c9c3 .kk-el-hero-en{font-family:var(--f-one); font-weight:300; font-size:3.5vw; line-height:1.55; color:#2f7f87} body.page-id-5490 main .elementor-element-995c9c3 .kk-el-hero-en p{margin:0; text-align:left} body.page-id-5490 main .elementor-element-995c9c3 .kk-el-hero-date .elementor-heading-title{ font-family:var(--f-one); font-weight:300; font-size:5.7vw; line-height:1.45; letter-spacing:-.01em; color:#fff!important; text-align:right; } body.page-id-5490 main .elementor-element-995c9c3 .kk-el-mapbtn .elementor-button{font-family:var(--f-one); font-weight:400; font-size:4vw; letter-spacing:.02em; color:#fff} /* 영상의 네모 픽셀 띠가 시안(화면 77% 아래부터)에 오도록 영상을 세로로 18% 키워 위쪽에 고정 — 일정·MAP 이 픽셀 위에 올라타지 않게 */ body.page-id-5490 .elementor-element-995c9c3 .kk-video-bg{height:118%; bottom:auto; object-position:50% 0} } /* ---------- ⑧ 홈 마퀴 항목이 작품 링크()가 됨 ---------- */ a.kk-marquee__item{display:block; position:relative} a.kk-marquee__item:focus-visible{outline:2px solid var(--teal); outline-offset:-2px} /* ============================================================ 116. 5차 수정 (2026-10-28) — 「웹 메인페이지.jpg」·「모바일 메인페이지.jpg」 시안 기준 ★SD워키토키(산돌 유료) 글자는 시안 JPG 에서 벡터(SVG)로 따서 쓴다(assets/img/type/*.svg, 로고 brand/kk-logo.svg). 원본 제목 텍스트는 DOM 에 그대로 두고(스크린리더·검색용) 화면에는 SVG 만 보이게 한다. ============================================================ */ /* ---------- ① 홈 헤더(맨 위 상태): 시안 비율 — 로고 폭 10.5vw, 메뉴 글자 1.56vw ---------- */ @media (min-width:901px){ body.page-id-5490 .kk-header:not(.is-scrolled) .kk-header__inner{max-width:none; padding-left:2.55vw; padding-right:1.93vw; padding-top:1.1vw} body.page-id-5490 .kk-header:not(.is-scrolled) .kk-logo__img{height:auto; width:clamp(124px,10.47vw,230px)} body.page-id-5490 .kk-header:not(.is-scrolled) .kk-nav{gap:clamp(34px,3.1vw,64px)} body.page-id-5490 .kk-header:not(.is-scrolled) .kk-nav a{font-size:clamp(17px,1.56vw,32px); font-weight:600; letter-spacing:.012em} } /* ---------- ② 홈 히어로(데스크톱): 제목·부제 = SVG, 하단 묶음 위치, scroll 띠 ---------- */ @media (min-width:901px){ body.page-id-5490 main .elementor-element-995c9c3 .kk-el-hero-title .elementor-heading-title{ display:block; width:22.97vw; aspect-ratio:2.0776; margin:0 auto; padding:0; transform:none; position:relative; left:-1vw; background:url("assets/img/type/hero-title.svg") center/100% 100% no-repeat; font-size:0; line-height:0; color:transparent; overflow:hidden; white-space:nowrap; text-indent:-999px; } body.page-id-5490 main .elementor-element-995c9c3 .kk-el-hero-sub .elementor-heading-title{ display:block; width:23.18vw; aspect-ratio:6.0761; margin:.99vw auto 0; padding:0; transform:none; position:relative; left:-1vw; background:url("assets/img/type/hero-sub.svg") center/100% 100% no-repeat; font-size:0; line-height:0; color:transparent; overflow:hidden; white-space:nowrap; text-indent:-999px; } body.page-id-5490 main .elementor-element-995c9c3 > .elementor-container{padding-bottom:clamp(88px,12.6svh,190px)!important} /* 좌측: 한글 2줄 줄간격 1.33 + 19px 아래로, 영문은 시안(20px, 줄 1.5) */ body.page-id-5490 main .elementor-element-995c9c3 .kk-el-hero-meta{margin-top:1vw!important} body.page-id-5490 main .elementor-element-995c9c3 .kk-el-hero-meta .elementor-heading-title{font-weight:400; font-size:clamp(18px,1.5vw,31px); line-height:1.32} body.page-id-5490 main .elementor-element-995c9c3 .kk-el-hero-en{font-weight:300; font-size:clamp(14px,1.06vw,22px); line-height:1.5} /* 우측: 주소(약간 크게·아래로) · 일시(400, 줄간격↑) · MAP(큰 글자 + 흰 막대 188×23) */ body.page-id-5490 main .elementor-element-995c9c3 .kk-el-hero-place{font-size:clamp(12px,.96vw,20px); margin-bottom:-.28vw!important} body.page-id-5490 main .elementor-element-995c9c3 .kk-el-hero-date .elementor-heading-title{font-weight:400; font-size:clamp(24px,2.28vw,48px); line-height:1.16} body.page-id-5490 main .elementor-element-995c9c3 .kk-el-mapbtn .elementor-button{font-size:clamp(15px,1.36vw,28px)} body.page-id-5490 main .elementor-element-995c9c3 .kk-el-mapbtn .elementor-button{font-family:var(--f-sans); font-weight:400; gap:0} body.page-id-5490 main .elementor-element-995c9c3 .kk-el-mapbtn .elementor-button-text::after{ width:9.8vw; height:1.2vw; margin-left:.77vw; background:linear-gradient(90deg, rgba(255,255,255,.86), #fff); } body.page-id-5490 main .elementor-element-995c9c3 .kk-el-mapbtn .elementor-button:hover .elementor-button-text::after{width:11.6vw} } /* (scroll 띠 삭제 — 6차 2026-10-30: 하늘색 띠와 scroll 글자 모두 제거. 홈 히어로의 ::before 는 더 이상 쓰지 않는다) */ body.page-id-5490 main .elementor-element-995c9c3::before{content:none!important; display:none!important} /* 히어로 하단 네모 픽셀(kk-pixels.js 가 canvas 를 넣는다) — 영상의 작은 픽셀은 크롭돼 안 보여서 시안 크기의 사각형을 직접 그린다 */ .kk-pxfx{position:absolute; left:0; right:0; bottom:0; width:100%; height:clamp(110px,14.5%,215px); z-index:4; pointer-events:none; display:block} /* ---------- ③ 홈 인트로: 큰 제목·소제목 = SVG ---------- */ @media (min-width:901px){ .page-id-5490 main .elementor-element-e17c70f .kk-el-intro-title .elementor-heading-title{ display:block!important; width:14.53vw; aspect-ratio:2.08; margin:0; padding:0; transform:none; background:url("assets/img/type/intro-title.svg") center/100% 100% no-repeat; font-size:0!important; line-height:0!important; color:transparent; overflow:hidden; white-space:nowrap; text-indent:-999px; } .page-id-5490 main .elementor-element-e17c70f .kk-el-intro-lead{margin:0 0 -.16vw!important} .page-id-5490 main .elementor-element-e17c70f .kk-el-intro-lead .elementor-heading-title{ display:block!important; width:20.37vw; aspect-ratio:4.1132; margin:0; padding:0; transform:none; background:url("assets/img/type/intro-lead.svg") center/100% 100% no-repeat; font-size:0!important; line-height:0!important; color:transparent; overflow:hidden; white-space:nowrap; text-indent:-999px; } .page-id-5490 main .elementor-element-e17c70f > .elementor-container > .elementor-column:nth-child(2) > .elementor-widget-wrap{column-gap:1.9vw} } /* ---------- ④ 포스터: 그림자 강화 + 슬라이드 전환 때 원근 회전(Pinterest 참고 모션) ---------- */ .kk-posters__stage{perspective:2400px} /* 6차(2026-10-30): 포스터 묶음의 바깥 두 끝 = 아래 소개 문구 블록의 양끝(클라이언트 요청). 묶음 폭 = 2.4 × --pw(좌우 포스터 .76 이동 + .88 배) 이므로 --pw 를 컨테이너 폭 ÷ 2.4 로 잡는다. 컨테이너 쿼리 단위(cqw)가 되는 브라우저에서만 적용, 아니면 기존 26vw 공식 */ @supports (width:1cqw){ .kk-posters{container-type:inline-size; --pw:calc(100cqw / 2.4)} } /* 포스터 칸의 Elementor 기본 좌우 패딩(10px)이 포스터를 안쪽으로 밀어 문구 블록(패딩 0)보다 20px 좁았다 → 좌우만 0 */ @media (min-width:901px){ .page-id-5490 main .elementor-element-e17c70f > .elementor-container > .elementor-column:nth-child(1) > .elementor-widget-wrap{padding-left:0!important; padding-right:0!important} } /* ★Elementor 의 `.elementor img{box-shadow:none}` 가 같은 우선순위로 뒤에 로드돼 그림자를 지우고 있었다(2026-10-28 실측: 계산값 none) → 우선순위를 올려 !important */ .kk-posters .kk-posters__item img{box-shadow:0 2.8vw 4.8vw -.2vw rgba(30,86,100,.58), 0 .8vw 2vw rgba(30,86,100,.32)!important} .kk-posters__item[data-pos="left"]{transform:translate3d(calc(-50% - var(--pw) * .76), 0, 0) translateY(2.2%) scale(.88)} .kk-posters__item[data-pos="right"]{transform:translate3d(calc(-50% + var(--pw) * .76), 0, 0) translateY(2.2%) scale(.88)} .kk-posters__item[data-pos="center"]{transform:translate3d(calc(-50% - var(--pw) * .058), 0, 0) scale(1)} .kk-posters__item{transition:transform .95s cubic-bezier(.65,.02,.2,1), opacity .6s ease} .kk-posters.is-moving .kk-posters__item img{animation:kk-poster-turn .95s cubic-bezier(.45,0,.25,1)} @keyframes kk-poster-turn{ 0%{transform:perspective(1500px) rotateY(0)} 45%{transform:perspective(1500px) rotateY(calc(var(--turn, 1) * -26deg))} 100%{transform:perspective(1500px) rotateY(0)} } html.kk-reduced .kk-posters.is-moving .kk-posters__item img{animation:none} /* ---------- ⑤ 홈 CONCEPT: 시안 — 제목 없이 큰 연한 해시태그 + 모서리 괄호 틀 안의 굵은 문장 ---------- */ @media (min-width:901px){ .page-id-5490 main .elementor-element-67c33c2.elementor-section{padding-top:clamp(120px,10.2vw,200px); padding-bottom:clamp(110px,9.4vw,190px)} .page-id-5490 main .elementor-element-67c33c2.elementor-section > .elementor-container{max-width:960px!important; margin-left:auto; margin-right:auto} .page-id-5490 main .elementor-element-67c33c2 .elementor-widget-wrap{padding:0!important; align-content:flex-start} .page-id-5490 main .elementor-element-67c33c2 .kk-el-sectitle{ position:absolute!important; width:1px; height:1px; margin:-1px!important; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .page-id-5490 main .elementor-element-67c33c2 .kk-el-tag{margin:0!important; text-align:left!important} .page-id-5490 main .elementor-element-67c33c2 .kk-el-tag .elementor-heading-title{ display:block!important; padding:0; text-align:left; font-size:0!important; line-height:0!important; color:transparent; overflow:hidden; white-space:nowrap; text-indent:-999px; background-repeat:no-repeat; background-size:100% 100%; background-position:center; } .page-id-5490 main .elementor-element-2215670 .elementor-heading-title{width:19vw; aspect-ratio:2.673; margin-left:-.36vw; background-image:url("assets/img/type/tag-kk.svg")} .page-id-5490 main .elementor-element-67c33c2 .elementor-element-2215670.kk-el-tag{margin-top:2.4vw!important} .page-id-5490 main .elementor-element-67c33c2 .elementor-element-82c5f17.kk-el-tag{margin-top:8.9vw!important} .page-id-5490 main .elementor-element-82c5f17 .elementor-heading-title{width:24.2vw; aspect-ratio:3.4146; margin-left:-1.1vw; background-image:url("assets/img/type/tag-archive.svg")} .page-id-5490 main .elementor-element-67c33c2 .kk-el-desc{ width:99.8%; margin:1.25vw 0 0 -.3vw!important; padding:1.2vw 0!important; box-sizing:border-box; background: linear-gradient(#36716e,#36716e) 0 0/1.3vw 2px no-repeat, linear-gradient(#36716e,#36716e) 0 0/2px 1.3vw no-repeat, linear-gradient(#36716e,#36716e) 100% 0/1.3vw 2px no-repeat, linear-gradient(#36716e,#36716e) 100% 0/2px 1.3vw no-repeat, linear-gradient(#36716e,#36716e) 0 100%/1.3vw 2px no-repeat, linear-gradient(#36716e,#36716e) 0 100%/2px 1.3vw no-repeat, linear-gradient(#36716e,#36716e) 100% 100%/1.3vw 2px no-repeat, linear-gradient(#36716e,#36716e) 100% 100%/2px 1.3vw no-repeat; } .page-id-5490 main .elementor-element-67c33c2 .kk-el-desc p{ margin:0!important; text-align:center!important; font-family:var(--f-sans)!important; font-weight:800!important; font-size:clamp(15px,1.68vw,34px)!important; line-height:1.4!important; letter-spacing:-.015em!important; color:#36716e!important; word-break:keep-all; } } /* ---------- ⑥ 모바일 메인(≤900): 시안 「모바일 메인페이지.jpg」(650×1358) 비율 ---------- */ @media (max-width:900px){ body.page-id-5490 .kk-header:not(.is-scrolled) .kk-logo__img{height:auto; width:29vw} body.page-id-5490 .kk-header:not(.is-scrolled) .kk-header__inner{padding-left:6.4vw; padding-right:9vw} body.page-id-5490 .kk-header:not(.is-scrolled) .kk-nav__toggle{width:39px; gap:6px} body.page-id-5490 .kk-header:not(.is-scrolled) .kk-nav__toggle span{height:2.4px} /* 시안 배경은 연한 파스텔(아래로 갈수록 연한 민트) — 영상 위에 옅은 베일 */ body.page-id-5490 main .elementor-element-995c9c3.kk-el-px::after{ background:linear-gradient(180deg, rgba(255,255,255,0) 26%, rgba(236,248,248,.34) 60%, rgba(236,248,248,.52) 100%); } .kk-pxfx{height:24%} body.page-id-5490 main .elementor-element-995c9c3 > .elementor-container{padding:calc(23.6svh - var(--header-h)) 7.4vw 24.8svh!important} body.page-id-5490 main .elementor-element-995c9c3 .kk-el-hero-title .elementor-heading-title{ display:block; width:49.5vw; aspect-ratio:2.0776; margin:0; padding:0; transform:none; background:url("assets/img/type/hero-title.svg") center/100% 100% no-repeat; font-size:0; line-height:0; color:transparent; overflow:hidden; white-space:nowrap; text-indent:-999px; } /* 6차(2026-10-30) 문구 간격 — 클라이언트 「수정 후」 이미지(650폭)의 글자 줄 위치를 측정해 390폭으로 환산한 값에 맞춘다: 제목→부제 14 · 부제→한글 36 · 한글→영문 13 · 영문→날짜 29 · 날짜→MAP 20 (px, 글자 잉크 기준). 날짜·MAP 을 화면 바닥에 붙이던 방식(영문→날짜 간격이 화면 높이에 따라 71px 까지 벌어짐)을 버리고, 위 문구 묶음 바로 아래에 고정 간격(vw)으로 이어 붙인다. */ body.page-id-5490 main .elementor-element-995c9c3 > .elementor-container{grid-template-rows:repeat(7,auto); align-content:start} body.page-id-5490 main .elementor-element-995c9c3 .kk-el-hero-date{align-self:start; margin-top:5.6vw!important} body.page-id-5490 main .elementor-element-995c9c3 .kk-el-hero-sub{margin-top:3.6vw!important} body.page-id-5490 main .elementor-element-995c9c3 .kk-el-hero-sub .elementor-heading-title{ display:block; width:49.2vw; aspect-ratio:6.0761; margin:0; padding:0; transform:none; background:url("assets/img/type/hero-sub.svg") center/100% 100% no-repeat; font-size:0; line-height:0; color:transparent; overflow:hidden; white-space:nowrap; text-indent:-999px; } body.page-id-5490 main .elementor-element-995c9c3 .kk-el-hero-meta{margin-top:8.3vw!important} body.page-id-5490 main .elementor-element-995c9c3 .kk-el-hero-meta .elementor-heading-title{font-size:4.7vw; line-height:1.38; font-weight:400} body.page-id-5490 main .elementor-element-995c9c3 .kk-el-hero-en{margin-top:1.4vw!important; font-size:3.2vw; line-height:1.32; font-weight:300} body.page-id-5490 main .elementor-element-995c9c3 .kk-el-hero-date .elementor-heading-title{font-size:6.5vw; line-height:1.23; font-weight:400} body.page-id-5490 main .elementor-element-995c9c3 .kk-el-mapbtn{margin-top:2.3vw!important} body.page-id-5490 main .elementor-element-995c9c3 .kk-el-mapbtn .elementor-button{font-family:var(--f-sans); font-size:4.1vw; font-weight:400; gap:0; line-height:1.4} body.page-id-5490 main .elementor-element-995c9c3 .kk-el-mapbtn .elementor-button-text::after{ width:35.9vw; height:4.1vw; margin-left:2.8vw; background:linear-gradient(90deg,#fff,rgba(255,255,255,.34)); } } /* ---------- ⑦ 작품 상세 좌측 정보란 — 클라이언트 「프로필 정보 수정.jpg」(5차) ---------- 사진 → 가는 선 → CATEGORY / DESIGNER(이름 + 영문 + 연락처) / E-MAIL → 작품명(굵게) + 한 줄 설명 */ .kk-dmeta{margin:0 0 30px; padding-top:6px; border-top:1px solid var(--ink)} .kk-dmeta > div{display:grid; grid-template-columns:108px 1fr; gap:10px; padding:19px 0; border-bottom:1px solid var(--line); align-items:start} .kk-dmeta dt{padding-top:3px; font-size:11.5px; font-weight:400; letter-spacing:.1em; color:#666} .kk-dmeta dd{font-size:15.5px; line-height:1.5; color:#111; word-break:break-all} .kk-dmeta dd .kk-dmeta__ko{font-weight:600} .kk-dmeta dd span.kk-dmeta__en{display:inline; margin:0 0 0 8px; font-size:11.5px; letter-spacing:.04em; color:#111; text-transform:uppercase} .kk-dmeta dd a{color:inherit; text-decoration:none} .kk-dmeta dd a:hover{text-decoration:underline} .kk-dmeta dd .kk-dmeta__tel{display:block; margin-top:8px; font-size:15px; letter-spacing:.01em} .kk-dwinfo{margin-top:30px} .kk-dwinfo__title{margin:0 0 9px; font-family:var(--f-sans); font-size:16px; font-weight:600; line-height:1.4; letter-spacing:0; color:#111} .kk-dwinfo .kk-dbody__desc{font-size:14px; font-weight:300; line-height:1.7; color:#222} .kk-dwinfo .kk-dbody__desc p{margin:0} /* ---------- ⑧ PROJECT 카테고리 탭: 8종 + ALL = 9개가 1200 컨테이너를 넘지 않게 글자·간격을 폭에 맞춤 ---------- */ @media (min-width:901px){ .page-id-5495 .kk-tabbar:not(.kk-tabbar--sub) .kk-tabbar__inner{gap:clamp(14px,1.85vw,34px)} .page-id-5495 .kk-tabbar:not(.kk-tabbar--sub) .kk-tab{font-size:clamp(14px,1.28vw,19px); letter-spacing:.03em} } /* ---------- ⑨ 방명록: 스팸 미끼 칸 숨김 + 새 글 위치로 스크롤할 때 헤더에 안 가리게 ---------- */ .kk-hp{position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden} .kk-cmt{scroll-margin-top:140px} /* 6차: 관리자(로그인)에게만 보이는 글 삭제 버튼 */ .kk-cmt__del{flex:0 0 auto; align-self:flex-start; margin-left:auto; padding:7px 13px; border:1px solid var(--line); border-radius:999px; background:#fff; font-size:12px; line-height:1; color:#666; text-decoration:none; white-space:nowrap; transition:color .2s, border-color .2s} .kk-cmt__del:hover,.kk-cmt__del:focus-visible{color:#c0392b; border-color:#c0392b} /* ---------- ⑩ iOS Safari 보강: 다크모드·자동 반전이 페이지를 검게 칠하지 않게 밝은 테마로 고정 ---------- */ html{color-scheme:only light; background-color:#fff} /* 배경영상이 재생되지 않으면(kk-pixels.js 가 판정) 숨겨 그라데이션 배경을 보인다 */ .kk-video-bg.is-off{display:none} /* ============================================================ 117. 6차 보강 (2026-10-31) — 클라이언트 최종 메일(10/30) ============================================================ */ /* 아이폰: 자동재생이 막히면(저전력 모드 등) 영상 위에 뜨는 ▶ 시작 버튼을 숨김(요청: 「애플기기에서 보이는 모션 플레이어 버튼」). controls 없는 영상에만 적용. 선택자를 하나씩 따로 쓴다 — 한 줄로 묶으면 브라우저가 모르는 하나 때문에 규칙 전체가 버려진다. */ video:not([controls])::-webkit-media-controls{display:none!important} video:not([controls])::-webkit-media-controls-panel{display:none!important} video:not([controls])::-webkit-media-controls-enclosure{display:none!important} video:not([controls])::-webkit-media-controls-overlay-play-button{display:none!important} video:not([controls])::-webkit-media-controls-start-playback-button{display:none!important; -webkit-appearance:none} video:not([controls])::-webkit-media-controls-play-button{display:none!important} /* 모바일 홈: 모션영상 위에 얹은 canvas 네모 픽셀 삭제(kk-pixels.js 도 모바일에선 canvas 를 만들지 않는다) */ @media (max-width:900px){ .kk-pxfx{display:none!important} }