/* =========================================================
   주혜림 Young — extrafazant.nl 감각
   흑백 바탕(#F4F4F4 / #101010) + 원색 프레임, Pretendard 굵기 믹스 헤드라인(800/200).
   부모 main.css 뒤에 로드되어 토큰과 컴포넌트를 덮어쓴다.
   ========================================================= */

:root {
	--ink: #101010;
	--ink-2: #1f1f1f;
	--cream: #ffffff;
	--sand: #fee897;
	--bg: #f4f4f4;
	--line: #dcdcdc;
	--muted: #606268;

	--blue: #0038ff;
	--pink: #ff77cd;
	--orange: #ff5f04;
	--red: #f44a32;
	--yellow: #fee897;

}

body { background: var(--bg); }
/* 이모지가 화면 옆으로 튀어 나가도 가로 스크롤이 생기지 않게. clip은 sticky를 깨지 않는다 */
html, body { overflow-x: clip; }
::selection { background: var(--pink); color: var(--ink); }
:focus-visible { outline-color: var(--blue); }

/* ---------- 타이포: Pretendard 하나, 굵기로만 대비(굵게 800 / 얇게 200) ---------- */
.jhy-thin { font-weight: 200; letter-spacing: -0.04em; }
.display, .section-title { letter-spacing: -0.05em; }
.hero__title, .reveal__title, .footer-cta__title, .page-intro__title, .about-hero__title,
.contact-page__title, .not-found__title, .post-list__title, .stack-card__title, .section-title {
	font-weight: 800; line-height: 1;
}
.chip, .chip--white, .chip--sand, .chip--dark {
	padding: 0; margin-bottom: .6rem; background: none; color: inherit; border-radius: 0;
	font-weight: 400; font-size: clamp(1.15rem, 1.6vw, 1.5rem); letter-spacing: -0.03em;
}
.subhead {
	font-weight: 300; font-size: clamp(1.15rem, 1.8vw, 1.6rem); letter-spacing: -0.03em;
}
.subhead--light { color: inherit; opacity: .85; }

/* 굵기 호버용 글자 조각 — 부드럽게 굵기가 바뀐다 */
.jhy-word { display: inline-block; white-space: nowrap; }
.jhy-char { display: inline-block; transition: font-weight .25s ease; }

/* ---------- 버튼: 화살표 정사각형 + 라벨 박스 ---------- */
.btn {
	position: relative; margin-left: 2.85rem; border: 0; border-radius: 0;
	padding: .75rem 1.1rem; font-size: .9rem; font-weight: 700; letter-spacing: -0.01em;
}
.btn:hover { transform: none; }
.btn::before {
	content: "→"; position: absolute; top: 0; bottom: 0; right: calc(100% + 3px); width: 2.6rem;
	display: grid; place-items: center; background: inherit; color: inherit; font-weight: 700;
	transition: transform .2s ease;
}
.btn:hover::before { transform: translateX(3px); }
.btn--chev::after { display: none; }
.btn--primary { background: var(--pink); color: var(--ink); }
.btn--primary:hover { background: var(--ink); color: var(--white); }
.btn--ghost, .btn--outline { background: var(--white); color: var(--ink); }
.btn--ghost:hover, .btn--outline:hover { background: var(--ink); color: var(--white); }
.btn--ghost-light { background: var(--blue); color: var(--white); border: 0; }
.btn--ghost-light:hover { background: var(--white); color: var(--ink); }
.btn--accent { background: var(--yellow); color: var(--ink); }
input.btn { margin-left: 0; }
.hero__actions .btn, .pills .btn { margin-left: 2.85rem; }

/* ---------- 헤더: 붓글씨 로고 / 가운데 흰 박스 메뉴 / ● 상담 ---------- */
.site-header, .site-header:has(.menu-item--mega:hover) .site-header__inner { background: transparent; }
.site-header:has(.menu-item--mega:hover, .menu-item--mega:focus-within) .site-header__inner { background: transparent; }
.jhy-logo { display: inline-block; }
/* 로고: "회계사"(얇게) + "주혜림"(굵게), 잉크 블랙. 검정 배경 위에서는 흰색 */
.jhy-logo { color: var(--ink); white-space: nowrap; font-size: 1.6rem; line-height: 1; letter-spacing: -0.05em; }
.jhy-logo__thin { font-weight: 200; }
.jhy-logo__bold { font-weight: 800; }
.is-dark .jhy-logo { color: var(--white); }
@media (min-width: 901px) {
	.site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; }
	.site-nav { margin: 0; padding: .35rem 1.1rem; background: var(--white); }
	.site-nav__list { gap: 1.4rem; }
	.site-nav__list > li > a { padding: .35rem 0; font-size: .88rem; font-weight: 700; color: var(--ink); }
	.site-header__actions { justify-self: end; margin: 0; }
}
/* 스크롤 내리면 위로 숨고, 올리면 부드럽게 내려온다(young.js가 is-hidden을 붙인다). 맨 위에서는 배경 없이 지금 모습 그대로 */
.site-header {
	position: sticky; top: var(--wp-admin--admin-bar--height, 0px);
	transition: transform .45s cubic-bezier(.2, .8, .2, 1), background-color .3s ease;
}
.site-header.is-scrolled { background: var(--bg); }
.site-header.is-hidden { transform: translateY(calc(-100% - var(--wp-admin--admin-bar--height, 0px))); }
@media (prefers-reduced-motion: reduce) { .site-header { transition: none; } }
.site-header .btn { margin-left: 0; }
.site-header .btn::before { display: none; }
.site-header__phone { display: none; }
.site-header__cta, .is-dark .site-header__cta {
	background: var(--white); color: var(--ink); padding: .55rem .9rem; font-size: .85rem;
}
.site-header__cta::after {
	display: block; content: ""; order: -1; width: 7px; height: 7px; margin: 0 .1rem 0 0;
	border: 0; border-radius: 50%; background: var(--blue); transform: none;
}
.site-header__cta:hover { background: var(--ink); color: var(--white); }
.mega, .mega__cta, .mega__blog, .mega__list a, .mega__icon { border-radius: 0; }
.mega__cta, .mega--about .mega__cta { background: var(--blue); color: var(--white); }
.mega__cta .btn { margin-left: 2.85rem; }
.site-header .mega .btn::before { display: grid; } /* 헤더 버튼은 화살표 칸을 숨기지만 메가 패널 버튼은 살린다 */
.mega__icon:has(.mega__art) { background: none; }
.mega__art svg > rect:first-child { fill: transparent; }
.mega__art svg [fill="#F3EBDD"] { fill: var(--white); }

/* ---------- 히어로(차일드 템플릿) ---------- */
.jhy-hero { padding-top: clamp(4rem, 12vh, 9rem); text-align: center; } /* 이모지가 위아래 영역으로 날아가도 잘리지 않게 hidden을 두지 않는다 */
.jhy-hero__lead { font-size: clamp(1.5rem, 2.6vw, 2.4rem); line-height: 1.15; font-weight: 400; }
.jhy-hero__title {
	margin-top: 1.25rem; font-size: clamp(3.4rem, 10.5vw, 9.6rem); line-height: .98; letter-spacing: -0.06em;
}
.jhy-hero__title b { font-weight: 800; }
.jhy-hero__title .jhy-thin { font-weight: 200; }
.jhy-line { display: block; overflow: clip; padding-bottom: .06em; }
.jhy-more {
	position: relative; display: inline-flex; align-items: center; gap: .55rem; margin-top: 2.2rem;
	color: var(--ink); text-decoration: none;
}
.jhy-more__label { font-size: 1.35rem; }
.jhy-more__icon {
	display: grid; place-items: center; width: 24px; height: 24px; background: var(--blue); color: var(--white);
	font-size: .9rem; font-weight: 700;
}
.jhy-more:hover .jhy-more__icon { transform: translateY(3px); transition: transform .2s ease; }

.jhy-marquee { margin-top: clamp(4rem, 10vh, 7rem); padding-block: 1.75rem; overflow: hidden; }
.jhy-marquee__track { display: flex; width: max-content; animation: jhy-marquee 60s linear infinite; }
/* 묶음 끝에도 항목 간격만큼 여백을 둬야 -50% 지점에서 이음새가 맞는다 */
.jhy-marquee__group { display: flex; align-items: center; gap: 3.5rem; padding-right: 3.5rem; flex: none; }
.jhy-marquee__item {
	white-space: nowrap;
	font-size: 1.5rem; font-weight: 800; letter-spacing: -0.04em; color: var(--blue);
}
.jhy-marquee__sep { font-size: 1.1rem; color: var(--blue); }
@keyframes jhy-marquee { to { transform: translateX(-50%); } }

/* 히어로 이모지 — 제목 앞으로 날아와 글자에 부딪혀 튕긴다. 움직임은 young.js가 물리 계산으로 만든다 */
.jhy-hero { position: relative; }
.jhy-hero__inner { position: relative; z-index: 1; }
/* 터치 기기: 이모지 분수를 누르고 있을 때 글자가 선택되거나 길게 누르기 메뉴가 뜨지 않게 */
@media (hover: none) {
	.jhy-hero { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
}
.jhy-emoji {
	position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; user-select: none;
	margin: -.5em 0 0 -.5em; /* 좌표가 이모지 가운데에 오게 */
	font-size: clamp(3rem, 6vw, 5.5rem); line-height: 1; will-change: transform, opacity;
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
	transform: scale(0);
}

/* 히어로 글자 등장: 한 글자씩 아래에서 올라온다 */
.jhy-hero__title .jhy-char { animation: jhy-rise .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 28ms + .1s); }
@keyframes jhy-rise { from { transform: translateY(105%); } }
/* 로테이션: 지금 글자가 한 글자씩 위로 빠진다 */
.jhy-hero__title.is-leaving .jhy-char { animation: jhy-leave .42s cubic-bezier(.6, 0, .8, .2) both; animation-delay: calc(var(--i, 0) * 18ms); }
@keyframes jhy-leave { to { transform: translateY(-105%); } }

/* ---------- 원색 프레임: 섹션별 카드 ---------- */
/* 대상 고객 카드: 흰 면 + 두꺼운 컬러 테두리 */
.reveal-card { background: var(--white) !important; color: var(--ink) !important; border: 14px solid var(--c, var(--blue)) !important; border-radius: 0; }
.reveal-card--1 { --c: var(--blue); }
.reveal-card--2 { --c: var(--pink); }
.reveal-card--3 { --c: var(--orange); }
.reveal-card--4 { --c: var(--yellow); }
.reveal-card--5 { --c: var(--red); }
.reveal-card--6 { --c: var(--ink); }

/* 업무분야(다크): 흰 카드 + 컬러 프레임 */
.section--dark, .services, .why { background: var(--ink); }
.simple-card { background: var(--white); color: var(--ink); border: 12px solid var(--c, var(--blue)); border-radius: 0; }
.simple-card:hover { background: var(--white); }
.simple-card__body { color: var(--muted); }
/* 업무 아이콘: 부모용 진크림 배경판을 빼고 흰 카드 위에 선 그림만 올린다 */
.simple-card__image { width: 8.5rem; margin: -1rem 0 .75rem -1.85rem; } /* 아이콘 안쪽 여백만큼 당겨 제목과 왼쪽 선을 맞춘다 */
.simple-card__image svg > rect:first-child { fill: transparent; }
.simple-card__image svg [fill="#F3EBDD"] { fill: var(--white); }
.slider__item:nth-child(5n+1) .simple-card { --c: var(--blue); }
.slider__item:nth-child(5n+2) .simple-card { --c: var(--pink); }
.slider__item:nth-child(5n+3) .simple-card { --c: var(--orange); }
.slider__item:nth-child(5n+4) .simple-card { --c: var(--yellow); }
.slider__item:nth-child(5n+5) .simple-card { --c: var(--red); }
.slider__btn { border-radius: 0; border-color: var(--white); color: var(--white); }
.slider__btn:hover { background: var(--white); color: var(--ink); }

/* 일하는 방식(다크): 원색 스티커 카드 */
.fix-card { border: 0; border-radius: 0; background: var(--c); color: var(--ink); }
.fix-card__title, .fix-card__body { color: inherit; }
.fix-card:nth-child(4n+1) { --c: var(--blue); color: var(--white); }
.fix-card:nth-child(4n+2) { --c: var(--pink); }
.fix-card:nth-child(4n+3) { --c: var(--yellow); }
.fix-card:nth-child(4n+4) { --c: var(--orange); }

/* 진행 절차: 회색/흰 바탕 + 컬러 프레임 이미지 */
.stack-card--cream { background: var(--bg); }
.stack-card--sand { background: var(--white); }
.stack-card--white { background: var(--bg); }
.stack-card .chip { color: var(--blue); }
.stack-card__image { background: var(--white) !important; border: 16px solid var(--c, var(--blue)); border-radius: 0; }
.stack-card:nth-child(4n+1) .stack-card__image { --c: var(--yellow); }
.stack-card:nth-child(4n+2) .stack-card__image { --c: var(--blue); }
.stack-card:nth-child(4n+3) .stack-card__image { --c: var(--red); }
.stack-card:nth-child(4n+4) .stack-card__image { --c: var(--pink); }

/* 글 카드: 컬러 프레임 */
.post-card { border: 10px solid var(--c, var(--blue)); border-radius: 0; padding: 0; }
.post-card__thumb { border-radius: 0; }
.post-list .post-card__thumb { aspect-ratio: 1; } /* 인사이트 목록은 정사각형 */
.post-card__body { padding: 1.1rem 1.1rem .9rem; }
.post-grid > li:nth-child(4n+1) { --c: var(--blue); }
.post-grid > li:nth-child(4n+2) { --c: var(--pink); }
.post-grid > li:nth-child(4n+3) { --c: var(--orange); }
.post-grid > li:nth-child(4n+4) { --c: var(--yellow); }
.tag { border-radius: 0; background: var(--bg); }
.section--cream, .post-list, .contact-page, .post-single { background: var(--bg); }

/* 하위 페이지 컬러 포인트 */
.page-intro__art, .zigzag__art, .tilt-photo img, .tilt-photo__placeholder { border-radius: 0; }
.page-intro__art { background: var(--white) !important; border: 16px solid var(--blue); }
.zigzag__art { background: var(--white) !important; border: 16px solid var(--c, var(--pink)); }
.zigzag:nth-of-type(2) .zigzag__art { --c: var(--yellow); }
.zigzag:nth-of-type(3) .zigzag__art { --c: var(--orange); }
.outline-card, .line-card { border-radius: 0; border-color: var(--white); }
.outline-card__title, .line-card__title, .about-lead__title, .timeline__year { color: var(--yellow); }
.outline-card__list li::before { color: var(--pink); }
.principles__tabs a { border-radius: 0; background: var(--white); color: var(--ink); }
.principles__tabs a:hover { background: var(--pink); }
.pill { border-radius: 0; background: var(--blue); color: var(--white); }
.pill:hover { background: var(--ink); color: var(--white); }
.form-card, .aside-card, .white-card, .single__head, .single__image, .filter, .filter__item { border-radius: 0; }
.single__head { background: var(--blue); }
.single__meta { color: var(--yellow); }
.receipt__chips a { background: var(--pink); }
.tag-pill:hover { background: var(--blue); border-color: var(--blue); color: var(--white); }
.jhy-collab-pills { justify-content: flex-start; margin-top: .75rem; }
.jhy-collab-pills .tag-pill:hover { background: var(--white); border-color: var(--ink); color: var(--ink); } /* 링크가 아니라 보기용 */

/* ---------- 홈 인사이트: 사진 | 랜덤 이모지 | 제목·요약 ---------- */
.jhy-insights { background: var(--bg); }
.jhy-insights__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem; margin-bottom: 2.5rem; }
.jhy-rows { border-top: 2px solid var(--ink); }
.jhy-row { border-bottom: 2px solid var(--ink); }
.jhy-row__link {
	display: grid; grid-template-columns: minmax(0, 260px) 140px minmax(0, 1fr); align-items: center; gap: 1.5rem;
	padding-block: 1.75rem; color: var(--ink); text-decoration: none;
}
.jhy-row__thumb { display: block; aspect-ratio: 1; overflow: hidden; border: 10px solid var(--c, var(--blue)); background: var(--white); }
.jhy-row__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.jhy-row__thumb-fallback { display: grid; place-items: center; height: 100%; font-weight: 800; }
.jhy-row:nth-child(4n+1) { --c: var(--blue); }
.jhy-row:nth-child(4n+2) { --c: var(--pink); }
.jhy-row:nth-child(4n+3) { --c: var(--orange); }
.jhy-row:nth-child(4n+4) { --c: var(--yellow); }
.jhy-row__emoji {
	justify-self: center; font-size: clamp(3.5rem, 6vw, 5.5rem); line-height: 1; rotate: var(--tilt, 0deg);
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
	transition: scale .45s cubic-bezier(.34, 1.8, .5, 1), rotate .45s cubic-bezier(.34, 1.8, .5, 1);
}
.jhy-row__text { display: grid; gap: .6rem; }
.jhy-row__meta { font-size: .9rem; font-weight: 600; color: var(--blue); }
.jhy-row__title { font-size: clamp(1.5rem, 2.6vw, 2.25rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.04em; }
.jhy-row__lead { color: var(--muted); line-height: 1.65; max-width: 40rem; }
.jhy-row__link:hover .jhy-row__thumb img { transform: scale(1.05); }
.jhy-row__link:hover .jhy-row__emoji { scale: 1.25; rotate: calc(var(--tilt, 0deg) * -1.5); }
.jhy-row__link:hover .jhy-row__title { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; text-decoration-color: var(--c); }
@media (max-width: 760px) {
	.jhy-row__link { grid-template-columns: 1fr; position: relative; gap: 1rem; }
	.jhy-row__emoji { position: absolute; top: 1rem; right: .5rem; font-size: 3.5rem; }
}

/* ---------- 회계사 소개(차일드 템플릿) — 홈과 같은 문법 ---------- */
.jhy-center-head { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
/* 부모의 .why는 홈에서 업무분야에 이어 붙도록 위 여백이 0 — 소개 페이지의 #why는 일반 섹션 여백을 준다 */
#why.why { padding-top: var(--section-y); }

.jhy-story__grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 960px) { .jhy-story__grid { grid-template-columns: .9fr 1.1fr; gap: 5rem; } }
.jhy-story__photo { position: relative; width: min(100%, 420px); margin-inline: auto; }
.jhy-frame { margin: 0; border: 16px solid var(--pink); background: var(--white); rotate: -3deg; }
.jhy-frame img, .jhy-frame__placeholder { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--white); color: var(--muted); }
.jhy-sticker {
	position: absolute; padding: .7rem 1rem; font-weight: 700; line-height: 1.2; box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
}
.jhy-sticker--name { left: -1rem; bottom: 2.5rem; background: var(--blue); color: var(--white); rotate: -6deg; font-size: 1.15rem; }
.jhy-sticker--stat { right: -1.5rem; top: 2rem; display: grid; background: var(--yellow); color: var(--ink); rotate: 7deg; font-size: .9rem; }
.jhy-sticker--stat b { font-size: 2.2rem; font-weight: 800; letter-spacing: -0.04em; }
.jhy-story__body { margin-top: 1.5rem; line-height: 1.75; color: var(--ink); max-width: 36rem; }
.jhy-story__body p + p { margin-top: .9em; }
.jhy-story__text .btn { margin-top: 2rem; }

.jhy-tilt-cards { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.jhy-tilt-card { background: var(--c); padding: 14px; color: var(--ink); }
.jhy-tilt-card:nth-child(3n+1) { --c: var(--blue); rotate: -3deg; color: var(--white); }
.jhy-tilt-card:nth-child(3n+2) { --c: var(--pink); rotate: 1.5deg; translate: 0 -12px; }
.jhy-tilt-card:nth-child(3n+3) { --c: var(--orange); rotate: 3deg; }
.jhy-tilt-card__art { display: grid; place-items: center; aspect-ratio: 1; background: var(--white); }
.jhy-tilt-card__svg { display: block; width: 82%; }
.jhy-tilt-card__svg svg { width: 100%; height: auto; }
/* 이모지 조합 일러스트: 가운데 큰 이모지 + 모서리에 기울어진 작은 이모지 두 개 */
.jhy-emoji-art { position: relative; overflow: hidden; }
.jhy-emoji-art span {
	position: absolute; line-height: 1; user-select: none;
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
	transition: transform .5s cubic-bezier(.34, 1.8, .5, 1);
}
.jhy-emoji-art__main { left: 50%; top: 52%; font-size: clamp(6rem, 11vw, 9rem); transform: translate(-50%, -50%) rotate(-6deg); }
.jhy-emoji-art__a { right: 12%; top: 12%; font-size: clamp(3rem, 5vw, 4.25rem); transform: rotate(14deg); }
.jhy-emoji-art__b { left: 12%; bottom: 12%; font-size: clamp(2.75rem, 4.5vw, 3.75rem); transform: rotate(-16deg); }
/* 진행 절차 카드: 칸이 커서 이모지도 크게, 칸 전체를 채운다 */
.jhy-emoji-art--lg { position: absolute; inset: 0; }
.jhy-emoji-art--lg .jhy-emoji-art__main { font-size: clamp(7rem, 13vw, 12rem); }
.jhy-emoji-art--lg .jhy-emoji-art__a { font-size: clamp(3.5rem, 6vw, 5.5rem); }
.jhy-emoji-art--lg .jhy-emoji-art__b { font-size: clamp(3.25rem, 5.5vw, 5rem); }
.jhy-tilt-card:hover .jhy-emoji-art__main { transform: translate(-50%, -50%) rotate(6deg) scale(1.08); }
.jhy-tilt-card:hover .jhy-emoji-art__a { transform: rotate(-8deg) translateY(-6px) scale(1.12); }
.jhy-tilt-card:hover .jhy-emoji-art__b { transform: rotate(10deg) translateY(4px) scale(1.12); }

.jhy-tilt-card__key { margin-top: 1.1rem; font-size: .9rem; font-weight: 600; opacity: .85; }
.jhy-tilt-card__title { margin-top: .3rem; font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.15; }
.jhy-tilt-card__body { margin: .7rem 0 .4rem; font-size: .95rem; line-height: 1.6; }

.jhy-career__rows { list-style: none; border-top: 2px solid var(--ink); }
.jhy-career__rows li {
	display: grid; grid-template-columns: minmax(0, 240px) 1fr; gap: 1.5rem; align-items: baseline;
	padding-block: 1.6rem; border-bottom: 2px solid var(--ink);
}
.jhy-career__year { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -0.04em; color: var(--blue); }
.jhy-career__body { font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight: 400; }
@media (max-width: 640px) { .jhy-career__rows li { grid-template-columns: 1fr; gap: .3rem; } }

/* ---------- 푸터 CTA: 검정 띠 + 핑크 버튼 ---------- */
.footer-cta, .footer-cta--sand { background: var(--ink) !important; color: var(--white); }
.site-footer { background: var(--ink); }

/* ---------- 오른쪽 아래 회전 배지 ---------- */
.jhy-badge {
	position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 90;
	display: grid; place-items: center; width: 108px; height: 108px; border-radius: 50%;
	background: var(--blue); color: var(--white); text-decoration: none;
	box-shadow: 0 10px 30px rgba(0, 56, 255, .3); transition: transform .3s ease;
}
.jhy-badge:hover { transform: scale(1.08); }
.jhy-badge svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: jhy-spin 14s linear infinite; }
.jhy-badge text { fill: currentColor; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; }
.jhy-badge__icon { font-size: 1.5rem; font-weight: 700; }
@keyframes jhy-spin { to { transform: rotate(360deg); } }
@media (max-width: 600px) { .jhy-badge { width: 84px; height: 84px; right: 1rem; bottom: 1rem; } .jhy-badge text { font-size: 12px; } }

/* =========================================================
   프레임: 스티커 + 테이프 (3안)
   두꺼운 컬러 테두리 대신 가는 검정 선 + 살짝 기울임 + 위쪽 원색 마스킹테이프.
   --c는 각 요소가 이미 가진 색 순환(블루·핑크·오렌지·옐로·레드)을 그대로 쓴다.
   ========================================================= */
.reveal-card, .simple-card, .stack-card__image, .post-card, .jhy-row__thumb,
.page-intro__art, .zigzag__art, .jhy-frame, .jhy-tilt-card {
	position: relative; border: 1.5px solid var(--ink) !important; background: var(--white) !important; overflow: visible;
}
.reveal-card::before, .simple-card::before, .stack-card__image::before, .post-card::before, .jhy-row__thumb::before,
.page-intro__art::before, .zigzag__art::before, .jhy-frame::before, .jhy-tilt-card::before {
	content: ""; position: absolute; z-index: 3; top: -13px; left: 50%; width: 96px; height: 26px;
	translate: -50% 0; rotate: -4deg; background: var(--c, var(--blue)); opacity: .9; pointer-events: none;
}
/* 어두운 섹션 위의 카드는 검정 선이 묻히므로 흰 카드 그대로 둔다(선은 유지) */
.simple-card { rotate: var(--r, 0deg); }
.slider__item:nth-child(odd) .simple-card { --r: -1.2deg; }
.slider__item:nth-child(even) .simple-card { --r: 1.2deg; }
.simple-card:hover { transform: translateY(-4px); }
.stack-card:nth-child(odd) .stack-card__image { rotate: -2deg; }
.stack-card:nth-child(even) .stack-card__image { rotate: 1.5deg; }
.post-grid > li:nth-child(odd) { rotate: -.8deg; }
.post-grid > li:nth-child(even) { rotate: .8deg; }
.post-card__thumb { border-bottom: 1.5px solid var(--ink); }
.jhy-row:nth-child(odd) .jhy-row__thumb { rotate: -2deg; }
.jhy-row:nth-child(even) .jhy-row__thumb { rotate: 1.5deg; }
.jhy-row__link:hover .jhy-row__thumb img { transform: none; }
.page-intro__art { --c: var(--blue); rotate: -1.5deg; }
.zigzag__art { rotate: -1.5deg; }
.jhy-frame { --c: var(--pink); }
.jhy-frame img, .jhy-frame__placeholder { display: grid; }
/* 소개 '이렇게 일해요': 원색 면 카드 → 흰 스티커 카드, 색은 테이프로 */
.jhy-tilt-card { color: var(--ink) !important; padding: 14px; }
.jhy-tilt-card:nth-child(3n+1) { color: var(--ink); }
.jhy-tilt-card__art { border: 1.5px solid var(--ink); background: var(--bg); }
.jhy-tilt-card__key { color: var(--blue); opacity: 1; }
/* 글 상세 상단 이미지: 인사이트 목록 카드와 같은 스티커 + 테이프 */
.single__image { position: relative; overflow: visible; border: 1.5px solid var(--ink); background: var(--white); rotate: 1.5deg; --c: var(--pink); }
.single__image::before {
	content: ""; position: absolute; z-index: 3; top: -13px; left: 50%; width: 96px; height: 26px;
	translate: -50% 0; rotate: -4deg; background: var(--c); opacity: .9; pointer-events: none;
}
.single__image img { display: block; }

@media (prefers-reduced-motion: reduce) {
	.jhy-marquee__track, .jhy-badge svg, .jhy-hero__title .jhy-char { animation: none; }
}

/* ---------- 새 글: 노란 회전 스티커 / 메뉴 NEW ---------- */
.post-card { position: relative; }
.jhy-new {
	position: absolute; z-index: 5; top: -20px; right: -20px; width: 76px; height: 76px; border-radius: 50%;
	display: grid; place-items: center; background: var(--yellow); color: var(--ink);
	border: 1.5px solid var(--ink); box-shadow: 0 2px 0 var(--ink); rotate: 8deg; pointer-events: none;
}
.jhy-new svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: jhy-new-spin 9s linear infinite; }
.jhy-new text { font-size: 13px; font-weight: 800; letter-spacing: .12em; fill: var(--ink); }
.jhy-new b { font-size: 1.35rem; font-weight: 800; line-height: 1; }
@keyframes jhy-new-spin { to { transform: rotate(360deg); } }
.site-nav__list > li > a:has(.jhy-new-mark) { position: relative; }
.jhy-new-mark {
	position: absolute; top: -.55rem; right: -1.55rem; padding: .18rem .32rem; rotate: 10deg;
	background: var(--yellow); color: var(--ink); border: 1px solid var(--ink);
	font-size: .6rem; font-weight: 800; letter-spacing: .06em; line-height: 1;
	animation: jhy-new-bob 2.4s ease-in-out infinite;
}
@keyframes jhy-new-bob { 50% { translate: 0 -2px; rotate: 4deg; } }
@media (max-width: 900px) {
	.jhy-new { width: 62px; height: 62px; top: -16px; right: -14px; }
	.jhy-new b { font-size: 1.1rem; }
	.jhy-new-mark { position: static; display: inline-block; margin-left: .45rem; vertical-align: .2em; }
}
@media (prefers-reduced-motion: reduce) { .jhy-new svg, .jhy-new-mark { animation: none; } }

/* 인사이트 글 본문: 문단·목록은 양쪽 맞춤(제목은 왼쪽 그대로) */
.post-single .prose p, .post-single .prose li { text-align: justify; }
/* 글 상세: 헤더(.wrap)와 같은 폭으로 — 로고·문의하기 끝과 본문 좌우 끝을 일직선에 */
.single__top, .single__layout, .post-single .post-nav { max-width: none; }
/* 데스크톱: 헤더 끝선보다 양쪽 10px 안쪽으로(기울어진 대표 이미지가 헤더 끝선을 넘지 않게) */
@media (min-width: 860px) {
	.single__top, .single__layout, .post-single .post-nav { padding-inline: calc(var(--gutter) + 10px); }
}
/* 모바일: 이모지가 썸네일 모서리로 올라가 NEW 스티커와 겹치니, 새 글이면 이모지를 숨긴다 */
@media (max-width: 760px) {
	.jhy-row:has(.jhy-new) .jhy-row__emoji { display: none; }
}

/* 고정 글: 컬러 테이프 대신 같은 자리에 검정 '고정' 테이프 */
.jhy-row__thumb:has(> .jhy-pin)::before, .post-card:has(> .jhy-pin)::before { display: none; }
.jhy-pin {
	position: absolute; z-index: 4; top: -13px; left: 50%; width: 96px; height: 26px; translate: -50% 0; rotate: -4deg;
	display: grid; place-items: center; background: rgba(16, 16, 16, .92); color: var(--white);
	font-size: .82rem; font-weight: 800; letter-spacing: .2em; text-indent: .2em; line-height: 1; pointer-events: none;
}
.jhy-frame img { object-position: 50% 25%; } /* 인물 사진: 얼굴 쪽을 남기고 자른다 */

/* 글 좋아요: 공유 위 */
.jhy-like { margin-top: 1.75rem; text-align: center; }
.jhy-like__btn {
	display: inline-flex; align-items: center; gap: .55rem; padding: .8rem 1.15rem;
	border: 1.5px solid var(--ink); background: var(--white); color: var(--ink);
	font: inherit; font-size: .95rem; font-weight: 700; cursor: pointer; transition: background-color .2s, transform .15s;
}
.jhy-like__btn:hover { background: var(--yellow); }
.jhy-like__btn:active { transform: scale(.96); }
.jhy-like__icon { font-size: 1.25rem; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.jhy-like__btn[aria-pressed="true"] { background: var(--pink); cursor: default; }
.jhy-like__btn.is-pop .jhy-like__icon { animation: jhy-like-pop .55s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes jhy-like-pop { 0% { transform: scale(1); } 35% { transform: scale(1.7) rotate(-14deg); } 100% { transform: scale(1); } }
.jhy-like__count { margin-top: .6rem; font-size: .85rem; color: var(--muted); }
.jhy-like__count b { color: var(--ink); }