/* urh.kr 사이트 공통 디자인 (head.sub.php 에서 불러옴, 관리자 화면 제외, 2026-10-23 전체 개편)
   첫 화면(urh_main.css)과 같은 색·글꼴 — 머리, 하위 페이지 상단, 소개 페이지, 게시판, 회원 화면, 꼬리, 맨 위로 버튼 */
:root {
	--ink: #0f1020;
	--ink-2: #1b1d35;
	--paper: #f6f5f1;
	--line: #e7e6ef;
	--violet: #6c4cff;
	--coral: #ff6a55;
	--mint: #19c9a3;
	--text: #1a1b2e;
	--mute: #62657a;
	--grad: linear-gradient(120deg, var(--violet) 0%, #b14dff 45%, var(--coral) 100%);
	--ease: cubic-bezier(.22, .8, .25, 1);
	--font: 'Pretendard Variable', Pretendard, 'Noto Sans KR', -apple-system, sans-serif;
	--hd-h: 76px;
}
@media (max-width: 991.98px) { :root { --hd-h: 64px; } }

body { font-family: var(--font); color: var(--text); background: #fff; -webkit-font-smoothing: antialiased; }
body h1, body h2, body h3, body h4, body h5, body h6, body .ks3, body .ks4, body .ks5, body .en1, body .ko1 { font-family: var(--font); }
::selection { background: rgba(108, 76, 255, .18); }
#hd_login_msg { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ======================================================================
   머리
   ====================================================================== */
.urh-hd {
	position: fixed; top: 0; left: 0; right: 0; z-index: 1040; height: var(--hd-h);
	background: rgba(255, 255, 255, .86); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
	border-bottom: 1px solid rgba(15, 16, 32, .06);
	transition: background .35s, box-shadow .35s, border-color .35s, height .35s var(--ease);
}
.urh-scrolled .urh-hd { box-shadow: 0 10px 34px rgba(15, 16, 32, .09); background: rgba(255, 255, 255, .94); }
.urh-hd-in { max-width: 1200px; height: 100%; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 22px; }
.urh-hd-logo { flex: 0 0 auto; display: block; line-height: 0; }
.urh-hd-logo img { height: 36px; width: auto; transition: filter .35s, height .35s; }

.urh-gnb { margin-left: auto; }
.urh-gnb > ul { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.urh-gnb > ul > li { position: relative; }
.urh-gnb a {
	position: relative; display: block; padding: 10px 16px; border-radius: 999px;
	color: var(--text); font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; text-decoration: none;
	transition: color .25s, background .25s;
}
.urh-gnb > ul > li > a::after {
	content: ""; position: absolute; left: 16px; right: 16px; bottom: 5px; height: 2px; border-radius: 2px;
	background: var(--grad); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--ease);
}
.urh-gnb a:hover, .urh-gnb a:focus-visible { color: var(--violet); text-decoration: none; }
.urh-gnb > ul > li > a:hover::after, .urh-gnb > ul > li > a:focus-visible::after { transform: scaleX(1); }
.urh-gnb-sub {
	position: absolute; top: calc(100% + 6px); left: 50%; min-width: 180px; margin: 0; padding: 8px; list-style: none;
	background: #fff; border-radius: 16px; box-shadow: 0 24px 50px rgba(15, 16, 32, .16);
	opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: opacity .25s, transform .25s var(--ease), visibility .25s;
}
.urh-gnb li:hover > .urh-gnb-sub, .urh-gnb li:focus-within > .urh-gnb-sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.urh-gnb-sub a { padding: 10px 14px; border-radius: 10px; font-size: 14.5px; font-weight: 500; white-space: nowrap; }
.urh-gnb-sub a:hover { background: rgba(108, 76, 255, .08); }

.urh-hd-util { display: flex; align-items: center; gap: 2px; }
.urh-hd-util a { padding: 8px 12px; color: var(--mute); font-size: 14px; font-weight: 500; text-decoration: none; border-radius: 999px; transition: color .25s; }
.urh-hd-util a:hover { color: var(--violet); text-decoration: none; }
.urh-hd-util .urh-hd-cta {
	margin-left: 8px; padding: 11px 20px; color: #fff; font-weight: 700; background: var(--ink);
	box-shadow: 0 8px 20px rgba(15, 16, 32, .18); transition: transform .3s var(--ease), box-shadow .3s, background .3s;
}
.urh-hd-util .urh-hd-cta:hover { color: #fff; background: var(--violet); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(108, 76, 255, .35); }

.urh-burger { display: none; position: relative; width: 44px; height: 44px; margin-left: auto; padding: 0; border: 0; border-radius: 12px; background: transparent; cursor: pointer; }
.urh-burger span { position: absolute; left: 11px; right: 11px; height: 2px; border-radius: 2px; background: var(--text); transition: transform .35s var(--ease), opacity .25s, background .35s; }
.urh-burger span:nth-child(1) { top: 15px; }
.urh-burger span:nth-child(2) { top: 21px; }
.urh-burger span:nth-child(3) { top: 27px; }
.urh-hd.is-open .urh-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.urh-hd.is-open .urh-burger span:nth-child(2) { opacity: 0; }
.urh-hd.is-open .urh-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.urh-burger:focus-visible, .urh-gnb a:focus-visible, .urh-hd-util a:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.urh-burger:focus:not(:focus-visible) { outline: none; }

.urh-mnav { position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100vh - var(--hd-h)); overflow-y: auto; padding: 8px 20px 26px; background: #fff; box-shadow: 0 30px 50px rgba(15, 16, 32, .18); animation: urhDrop .35s var(--ease); }
.urh-mnav[hidden] { display: none; }
.urh-mnav-list { margin: 0; padding: 0; list-style: none; }
.urh-mnav-list > li { border-bottom: 1px solid var(--line); }
.urh-mnav-list a { display: block; padding: 16px 4px; color: var(--text); font-size: 18px; font-weight: 700; text-decoration: none; }
.urh-mnav-list ul { margin: -6px 0 10px; padding: 0 0 0 12px; list-style: none; }
.urh-mnav-list ul a { padding: 9px 4px; font-size: 15.5px; font-weight: 500; color: var(--mute); }
.urh-mnav-util { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.urh-mnav-util a { flex: 1 1 0; min-height: 46px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 999px; color: var(--text); font-size: 14.5px; font-weight: 600; text-decoration: none; }
@keyframes urhDrop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* 첫 화면 — 히어로 위에 투명하게, 스크롤하거나 메뉴를 열면 흰 바탕 */
.urh-hd--over { background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.urh-hd--over .urh-hd-logo img { filter: brightness(0) invert(1); }
.urh-hd--over .urh-gnb a, .urh-hd--over .urh-hd-util a { color: rgba(255, 255, 255, .88); }
.urh-hd--over .urh-gnb a:hover, .urh-hd--over .urh-hd-util a:hover { color: #fff; }
.urh-hd--over .urh-hd-util .urh-hd-cta { background: #fff; color: var(--ink); box-shadow: none; }
.urh-hd--over .urh-burger span { background: #fff; }
.urh-scrolled .urh-hd--over, .urh-hd--over.is-open {
	background: rgba(255, 255, 255, .94); border-color: rgba(15, 16, 32, .06);
	backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
}
.urh-scrolled .urh-hd--over .urh-hd-logo img, .urh-hd--over.is-open .urh-hd-logo img { filter: none; }
.urh-scrolled .urh-hd--over .urh-gnb a, .urh-hd--over.is-open .urh-gnb a { color: var(--text); }
.urh-scrolled .urh-hd--over .urh-hd-util a, .urh-hd--over.is-open .urh-hd-util a { color: var(--mute); }
.urh-scrolled .urh-hd--over .urh-hd-util .urh-hd-cta { background: var(--ink); color: #fff; }
.urh-scrolled .urh-hd--over .urh-burger span, .urh-hd--over.is-open .urh-burger span { background: var(--text); }
.urh-hd--over .urh-gnb-sub a { color: var(--text); }

.urh-hd-space { height: var(--hd-h); }

@media (max-width: 991.98px) {
	.urh-hd-in { padding: 0 12px 0 20px; }
	.urh-hd-logo img { height: 30px; }
	.urh-gnb, .urh-hd-util { display: none; }
	.urh-burger { display: block; }
	.urh-nav-open body { overflow: hidden; }
}
@media (max-width: 380px) {
	.urh-hd-logo img { height: 26px; }
}

/* ======================================================================
   하위 페이지 상단(게시판·소개 페이지 공통)
   ====================================================================== */
.urh-sub-hero {
	position: relative; overflow: hidden; display: flex; align-items: flex-end;
	min-height: clamp(240px, 30vw, 360px); padding: 56px 0 46px; background: var(--ink); color: #fff; isolation: isolate;
}
.urh-sub-hero-bg {
	position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center;
	opacity: .42; transform: scale(1.12); animation: urhSubZoom 14s var(--ease) forwards;
}
.urh-sub-hero::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(180deg, rgba(15, 16, 32, .25) 0%, rgba(15, 16, 32, .88) 100%),
		linear-gradient(120deg, rgba(108, 76, 255, .55) 0%, rgba(177, 77, 255, .2) 45%, rgba(255, 106, 85, .35) 100%);
}
.urh-sub-hero::after {
	content: ""; position: absolute; inset: 0; z-index: -1; opacity: .18;
	background-image: linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .5) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 70%); mask-image: linear-gradient(180deg, transparent, #000 70%);
}
.urh-sub-hero-in { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.urh-sub-eyebrow {
	display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 6px 14px; border-radius: 999px;
	background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22);
	font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.urh-sub-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px rgba(255, 106, 85, .25); }
.urh-sub-title { margin: 0; color: #fff; font-size: clamp(30px, 4.6vw, 52px); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.urh-sub-desc { margin: 12px 0 0; color: rgba(255, 255, 255, .78); font-size: clamp(14px, 1.4vw, 17px); }
.urh-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; font-size: 13.5px; color: rgba(255, 255, 255, .7); }
.urh-crumb a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.urh-crumb a:hover { color: #fff; text-decoration: underline; }
.urh-crumb span::before { content: "›"; margin-right: 8px; opacity: .6; }
@keyframes urhSubZoom { to { transform: scale(1); } }

/* ======================================================================
   소개 페이지(about·history·product, 2026-10-23 디자인 개선 — 검색 제외 페이지)
   ====================================================================== */
.center-heading { margin-bottom: 44px; text-align: center; }
.center-heading h2 { margin: 0; font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.center-heading .center-line { display: block; width: 56px; height: 4px; margin: 18px auto 0; border-radius: 4px; background: var(--grad); }

.urh-intro-sec { position: relative; padding: clamp(64px, 8vw, 110px) 0; overflow: hidden; isolation: isolate; }
.urh-intro-sec--paper { background: var(--paper); }
.urh-intro-sec--paper::before {
	content: ""; position: absolute; z-index: -1; width: 520px; height: 520px; top: -180px; right: -160px; border-radius: 50%;
	background: radial-gradient(circle, rgba(108, 76, 255, .16), transparent 70%); animation: urhIntroBlob 18s ease-in-out infinite alternate;
}
@keyframes urhIntroBlob { to { transform: translate3d(-120px, 140px, 0) scale(1.2); } }
.urh-intro-in { position: relative; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.urh-intro p, .urh-intro .ks3 { margin: 0; color: var(--mute); font-size: 16px; line-height: 1.85; }
.urh-intro h4 { margin: 0 0 10px; font-size: 19px; font-weight: 800; letter-spacing: .02em; color: var(--text); }
.urh-kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; color: var(--violet); font-size: 12.5px; font-weight: 800; letter-spacing: .16em; }
.urh-kicker::before { content: ""; width: 24px; height: 2px; border-radius: 2px; background: var(--grad); }

/* 회사소개 — 인사말 */
.urh-ab-greet { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 5vw, 70px); align-items: center; }
.urh-ab-photo { position: relative; margin: 0; isolation: isolate; }
.urh-ab-photo::before { content: ""; position: absolute; z-index: -1; inset: 18px -14px -14px 18px; border-radius: 26px; background: var(--grad); opacity: .85; }
.urh-ab-photo img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 26px; box-shadow: 0 30px 60px rgba(15, 16, 32, .18); }
.urh-ab-text { position: relative; }
.urh-ab-text::before {
	content: "\201C"; position: absolute; top: -58px; left: -8px; z-index: -1; font-size: 150px; font-weight: 800; line-height: 1;
	background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .18;
}

/* 회사소개 — 특징 4가지 */
.urh-feat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.urh-feat {
	position: relative; padding: 34px 32px 32px; border-radius: 24px; background: #fff; overflow: hidden;
	box-shadow: 0 14px 34px rgba(15, 16, 32, .06); transition: transform .45s var(--ease), box-shadow .45s;
}
.urh-feat::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--grad); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease); }
.urh-feat:hover { transform: translateY(-8px); box-shadow: 0 28px 56px rgba(15, 16, 32, .12); }
.urh-feat:hover::after { transform: scaleX(1); }
.urh-feat-no { position: absolute; top: 20px; right: 26px; font-size: 52px; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: rgba(108, 76, 255, .09); }
.urh-feat-ic {
	display: inline-flex; width: 56px; height: 56px; margin-bottom: 22px; align-items: center; justify-content: center; border-radius: 18px;
	background: var(--grad); color: #fff; font-size: 22px; box-shadow: 0 12px 24px rgba(108, 76, 255, .3); transition: transform .45s var(--ease);
}
.urh-feat:hover .urh-feat-ic { transform: rotate(-8deg) scale(1.06); }

/* 회사소개 — 영상·안내 */
.urh-ab-biz { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.urh-ab-video { position: relative; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; background: var(--ink); box-shadow: 0 30px 60px rgba(15, 16, 32, .16); }
.urh-ab-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* 영상이 사라진 자리 — 원이 천천히 떠돌며 도는 장식 판 */
.urh-ab-art { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 45%, #3b2a8f 100%); }
.urh-ab-art strong { position: relative; z-index: 1; color: #fff; font-size: clamp(44px, 6vw, 76px); font-weight: 800; letter-spacing: .08em; opacity: .92; }
.urh-orb { position: absolute; border-radius: 50%; filter: blur(2px); animation: urhOrb 14s linear infinite; }
.urh-orb--1 { width: 46%; aspect-ratio: 1; top: 8%; left: 10%; background: radial-gradient(circle at 30% 30%, rgba(108, 76, 255, .95), rgba(108, 76, 255, .15) 70%); }
.urh-orb--2 { width: 34%; aspect-ratio: 1; bottom: 6%; right: 12%; background: radial-gradient(circle at 30% 30%, rgba(255, 106, 85, .9), rgba(255, 106, 85, .1) 70%); animation-duration: 18s; animation-direction: reverse; }
.urh-orb--3 { width: 18%; aspect-ratio: 1; top: 18%; right: 26%; background: radial-gradient(circle at 30% 30%, rgba(25, 201, 163, .85), rgba(25, 201, 163, .1) 70%); animation-duration: 11s; }
@keyframes urhOrb {
	0% { transform: rotate(0deg) translateX(18px) rotate(0deg); }
	100% { transform: rotate(360deg) translateX(18px) rotate(-360deg); }
}
.urh-ab-biz-text h2 { margin: 0 0 18px; font-size: clamp(26px, 3vw, 34px); font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.urh-ab-biz-text p { margin-bottom: 12px; }
.urh-ab-biz-text strong { color: var(--text); }
.urh-ab-biz-text a { color: var(--violet); word-break: break-all; }

/* 연혁 — 세로 타임라인(넓은 화면은 좌우 번갈아) */
.urh-tl { position: relative; max-width: 980px; margin: 0 auto; padding: 0; list-style: none; }
.urh-tl::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 50%; width: 2px; margin-left: -1px; background: linear-gradient(var(--violet), var(--coral)); opacity: .35; }
.urh-tl-item { position: relative; width: 50%; padding: 0 52px 34px 0; }
.urh-tl-item:nth-child(even) { margin-left: 50%; padding: 0 0 34px 52px; }
.urh-tl-dot {
	position: absolute; top: 20px; right: -22px; z-index: 1; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
	border: 2px solid transparent; border-radius: 50%; background: linear-gradient(#fff, #fff) padding-box, var(--grad) border-box;
	color: var(--violet); font-size: 13px; font-weight: 800; box-shadow: 0 0 0 6px #fff;
}
.urh-tl-item:nth-child(even) .urh-tl-dot { right: auto; left: -22px; }
.urh-tl-card {
	padding: 26px 28px; border: 1px solid var(--line); border-radius: 20px; background: #fff;
	box-shadow: 0 14px 34px rgba(15, 16, 32, .06); transition: transform .4s var(--ease), box-shadow .4s, border-color .4s;
}
.urh-tl-card:hover { transform: translateY(-4px); border-color: rgba(108, 76, 255, .35); box-shadow: 0 24px 48px rgba(108, 76, 255, .12); }
.urh-tl-card h5 { margin: 0 0 8px; font-size: 19px; font-weight: 800; color: var(--text); }
.urh-tl-card p { font-size: 15px; }

/* 제품안내 — 서비스 6가지 */
.urh-svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.urh-svc { padding: 32px 28px; border: 1px solid var(--line); border-radius: 22px; background: #fff; transition: transform .4s var(--ease), box-shadow .4s, border-color .4s; }
.urh-svc:hover { transform: translateY(-6px); border-color: transparent; box-shadow: 0 26px 52px rgba(15, 16, 32, .12); }
.urh-svc-ic {
	display: inline-flex; width: 52px; height: 52px; margin-bottom: 20px; align-items: center; justify-content: center; border-radius: 16px;
	background: rgba(108, 76, 255, .1); color: var(--violet); font-size: 22px; transition: background .4s, color .4s, transform .4s var(--ease);
}
.urh-svc:hover .urh-svc-ic { background: var(--grad); color: #fff; transform: scale(1.08) rotate(-6deg); }
.urh-svc h3 { margin: 0 0 10px; font-size: 19px; font-weight: 800; color: var(--text); }
.urh-svc p { font-size: 15px; }

/* 제품안내 — 부서 안내 표 */
.urh-dept { border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 0 18px 40px rgba(15, 16, 32, .07); }
.urh-dept-tbl { width: 100%; margin: 0; border-collapse: collapse; }
.urh-dept-tbl thead th { padding: 18px 26px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .04em; text-align: left; }
.urh-dept-tbl thead th:first-child { width: 170px; }
.urh-dept-tbl tbody th, .urh-dept-tbl td { padding: 22px 26px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.urh-dept-tbl tbody th { color: var(--text); font-size: 15.5px; font-weight: 800; white-space: nowrap; }
.urh-dept-tbl tbody th::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--grad); vertical-align: middle; }
.urh-dept-tbl td { color: var(--mute); font-size: 15px; line-height: 1.8; }
.urh-dept-tbl tbody tr { transition: background .3s; }
.urh-dept-tbl tbody tr:hover { background: rgba(108, 76, 255, .04); }

/* 제품안내 — 제품 카드(그라데이션 판 + 떠다니는 원) */
.urh-prd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.urh-prd { display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 0 14px 34px rgba(15, 16, 32, .08); transition: transform .45s var(--ease), box-shadow .45s; }
.urh-prd:hover { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(15, 16, 32, .15); }
.urh-prd-art { position: relative; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--grad); color: #fff; font-size: 54px; }
.urh-prd-art--1 { background: linear-gradient(135deg, var(--ink-2), var(--violet)); }
.urh-prd-art--2 { background: linear-gradient(135deg, var(--coral), #ffb35c); }
.urh-prd-art::before, .urh-prd-art::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .13); transition: transform .8s var(--ease); }
.urh-prd-art::before { width: 70%; aspect-ratio: 1; top: -30%; right: -20%; }
.urh-prd-art::after { width: 45%; aspect-ratio: 1; bottom: -20%; left: -10%; }
.urh-prd:hover .urh-prd-art::before { transform: translate(-12%, 14%); }
.urh-prd:hover .urh-prd-art::after { transform: translate(14%, -10%); }
.urh-prd-art i { position: relative; z-index: 1; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .2)); transition: transform .6s var(--ease); }
.urh-prd:hover .urh-prd-art i { transform: scale(1.12); }
.urh-prd-body { flex: 1; display: flex; flex-direction: column; padding: 26px 26px 28px; }
.urh-prd-body h5 { margin: 0 0 10px; font-size: 18px; font-weight: 800; color: var(--text); }
.urh-prd-body p { flex: 1; margin-bottom: 20px; font-size: 15px; }
.urh-prd-btn {
	align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 999px;
	background: var(--ink); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; transition: background .3s, gap .3s;
}
.urh-prd-btn:hover, .urh-prd-btn:focus-visible { background: var(--violet); color: #fff; gap: 12px; text-decoration: none; }

@media (max-width: 991.98px) {
	.urh-ab-greet, .urh-ab-biz { grid-template-columns: 1fr; }
	.urh-ab-text::before { top: -40px; font-size: 110px; }
	.urh-svc-grid, .urh-prd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.urh-tl::before { left: 22px; }
	.urh-tl-item, .urh-tl-item:nth-child(even) { width: auto; margin-left: 0; padding: 0 0 24px 66px; }
	.urh-tl-dot, .urh-tl-item:nth-child(even) .urh-tl-dot { top: 18px; left: 0; right: auto; }
}
@media (max-width: 767.98px) {
	.urh-intro-in { padding: 0 16px; }
	.urh-feat-grid { grid-template-columns: 1fr; gap: 16px; }
	.urh-feat { padding: 28px 24px 26px; }
	.urh-intro p, .urh-intro .ks3 { font-size: 15px; }
}
@media (max-width: 575.98px) {
	.urh-svc-grid, .urh-prd-grid { grid-template-columns: 1fr; gap: 16px; }
	.urh-svc { display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; padding: 22px 20px; }
	.urh-svc-ic { grid-row: span 2; width: 48px; height: 48px; margin: 0; font-size: 20px; }
	.urh-svc h3 { margin-bottom: 6px; font-size: 17px; }
	.urh-svc p { font-size: 14.5px; line-height: 1.7; }
	.urh-prd-art { aspect-ratio: 16 / 7; font-size: 42px; }
	.urh-prd-body { padding: 20px 20px 22px; }
	.urh-tl-card { padding: 20px 20px; }
	.urh-dept-tbl thead { display: none; }
	.urh-dept-tbl, .urh-dept-tbl tbody, .urh-dept-tbl tr, .urh-dept-tbl tbody th, .urh-dept-tbl td { display: block; width: 100%; }
	.urh-dept-tbl tbody tr + tr { border-top: 1px solid var(--line); }
	.urh-dept-tbl tbody th { padding: 20px 20px 4px; border-top: 0; }
	.urh-dept-tbl td { padding: 0 20px 20px 38px; border-top: 0; font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) {
	.urh-intro-sec--paper::before, .urh-orb { animation: none; }
	.urh-feat, .urh-svc, .urh-prd, .urh-tl-card, .urh-prd-art::before, .urh-prd-art::after, .urh-prd-art i { transition: none; }
}

/* ======================================================================
   게시판(basic_div·gallery) — 목록·보기·쓰기
   ====================================================================== */
#bo_list, #bo_v, #bo_w, #bo_gall { font-family: var(--font); }
#bo_list_total { background: var(--paper); color: var(--mute); border-radius: 999px; padding: 0 16px; line-height: 36px; font-size: 14px; }
#bo_list_total span { color: var(--text); font-weight: 700; }
.btn_bo_user li { margin-left: 6px; }
#bo_list .btn, #bo_v .btn, #bo_w .btn, #bo_gall .btn,
#bo_list .btn_b01, #bo_list .btn_b02, #bo_list .btn_admin, #bo_v .btn_b01, #bo_v .btn_b02, #bo_v .btn_admin {
	display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px;
	background: #fff; color: var(--text); font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none; transition: background .25s, color .25s, border-color .25s;
}
#bo_list .btn:hover, #bo_v .btn:hover, #bo_w .btn:hover, #bo_gall .btn:hover,
#bo_list .btn_b01:hover, #bo_list .btn_b02:hover, #bo_v .btn_b01:hover, #bo_v .btn_b02:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
#bo_list .btn_b02, #bo_v .btn_b02 { background: var(--ink); color: #fff; border-color: var(--ink); }
#bo_list .btn_b02:hover, #bo_v .btn_b02:hover { background: var(--violet); border-color: var(--violet); }

/* 목록 머리줄·글 줄 */
#bo_list .e_num_ti, #bo_list .e_subject_ti, #bo_list .e_writer_ti, #bo_list .e_hit_ti, #bo_list .e_date_ti {
	background: transparent; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line);
	color: var(--mute); font-size: 13.5px; font-weight: 600;
}
#bo_list .e_num_ti a, #bo_list .e_hit_ti a, #bo_list .e_date_ti a { color: var(--mute); text-decoration: none; }
#bo_list .pr.bl { transition: background .25s; }
#bo_list .pr.bl:hover { background: #faf9ff; }
#bo_list .pr.bl > div, #bo_list .pr.bl .m_view > div { border-color: var(--line); background: transparent; }
#bo_list .e_subject a { color: var(--text); font-size: 16px; font-weight: 600; text-decoration: none; transition: color .25s; }
#bo_list .e_subject a:hover { color: var(--violet); }
#bo_list .e_subject .fa-heart { color: var(--coral); }
#bo_list .e_num, #bo_list .e_writer, #bo_list .e_hit, #bo_list .e_date { color: var(--mute); }

/* 검색 */
#bo_sch { border: 1px solid var(--line); border-radius: 999px; background: #fff; overflow: hidden; box-shadow: 0 8px 22px rgba(15, 16, 32, .05); transition: border-color .25s, box-shadow .25s; }
#bo_sch:focus-within { border-color: var(--violet); box-shadow: 0 0 0 4px rgba(108, 76, 255, .12); }
#bo_sch select { margin: 9px 6px 9px 14px; background: transparent; color: var(--text); }
#bo_sch .sch_input { color: var(--text); }
#bo_sch .sch_input:focus { outline: none; }
#bo_sch .sch_btn { color: var(--violet); }
/* 좁은 화면에서 검색창이 세 줄로 깨지던 문제 — 한 줄 가로 배치 */
#bo_sch form { display: flex; align-items: center; }
#bo_sch select { flex: 0 0 auto; width: auto; max-width: 42%; float: none; }
#bo_sch .sch_input { flex: 1 1 auto; min-width: 0; width: auto !important; float: none; padding: 0 6px; }
#bo_sch .sch_btn { flex: 0 0 44px; float: none; }
@media (max-width: 767.98px) { #bo_sch { width: 100%; max-width: none; } }

/* 쪽 번호 */
.pg_wrap .pg_page, .pg_wrap .pg_current { min-width: 38px; height: 38px; line-height: 38px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--text); }
.pg_wrap .pg_current { background: var(--ink); border-color: var(--ink); color: #fff; }
.pg_wrap .pg_page:hover { border-color: var(--violet); color: var(--violet); }

/* 글 보기 */
#bo_v_title, #bo_v_title .bo_v_tit { color: var(--text); font-weight: 800; letter-spacing: -.02em; }
#bo_v_info { color: var(--mute); border-color: var(--line); }
#bo_v_con { color: #2b2d42; line-height: 1.85; }
#bo_v_con img { border-radius: 14px; }
#bo_vc article { border-color: var(--line); }

/* 글쓰기·폼 공통 */
#bo_w .frm_input, #bo_w textarea, #bo_w select, .urh-form-area .frm_input, .urh-form-area textarea, .urh-form-area select {
	border: 1px solid var(--line); border-radius: 12px; background: #fff; transition: border-color .25s, box-shadow .25s;
}
#bo_w .frm_input:focus, #bo_w textarea:focus, .urh-form-area .frm_input:focus, .urh-form-area textarea:focus {
	outline: none; border-color: var(--violet); box-shadow: 0 0 0 4px rgba(108, 76, 255, .12);
}
.btn_submit, a.btn_submit, button.btn_submit {
	min-height: 46px; padding: 0 28px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 700; cursor: pointer;
	transition: background .25s, transform .3s var(--ease), box-shadow .3s;
}
.btn_submit:hover { background: var(--violet); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(108, 76, 255, .3); color: #fff; }
.btn_cancel, a.btn_cancel { min-height: 46px; padding: 0 24px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--text); display: inline-flex; align-items: center; }

/* ======================================================================
   회원가입 약관·가입 양식
   ====================================================================== */
#fregister { max-width: 920px; margin: 0 auto; }
#fregister > p:first-child, #fregister p.alert, #fregister .alert {
	border: 0; border-radius: 16px; background: linear-gradient(120deg, rgba(108, 76, 255, .08), rgba(255, 106, 85, .08)); color: var(--text);
}
#fregister section { margin-top: 26px; padding: 26px; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 14px 34px rgba(15, 16, 32, .05); }
#fregister h2 { font-size: 18px; font-weight: 800; color: var(--text); }
#fregister h2 i { color: var(--violet); }
#fregister textarea { border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
#fregister table th { background: var(--ink) !important; color: #fff; }
#fregister input[type=checkbox], .urh-form-area input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--violet); vertical-align: middle; }
#fregister .btn_confirm, .urh-form-area .btn_confirm { margin-top: 28px; text-align: center; }
.urh-form-area .tbl_frm01 { border-radius: 20px; }

/* ======================================================================
   꼬리
   ====================================================================== */
.urh-ft { position: relative; overflow: hidden; background: var(--ink); color: rgba(255, 255, 255, .72); font-size: 14px; }
.urh-ft::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--grad); }
.urh-ft-in { max-width: 1200px; margin: 0 auto; padding: 70px 24px 40px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.urh-ft-brand strong { display: block; margin-bottom: 14px; color: #fff; font-size: 26px; font-weight: 800; letter-spacing: .02em; }
.urh-ft-brand p { margin: 0; line-height: 1.8; }
.urh-ft h2 { margin: 0 0 16px; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.urh-ft ul { margin: 0; padding: 0; list-style: none; }
.urh-ft li { margin-bottom: 10px; }
.urh-ft a { color: rgba(255, 255, 255, .78); text-decoration: none; transition: color .25s; }
.urh-ft a:hover { color: #fff; }
.urh-ft-info i { width: 20px; color: var(--coral); }
.urh-ft-copy { border-top: 1px solid rgba(255, 255, 255, .08); }
.urh-ft-copy p { max-width: 1200px; margin: 0 auto; padding: 22px 24px; color: rgba(255, 255, 255, .5); font-size: 13px; }
.urh-ft-copy a { color: rgba(255, 255, 255, .7); }
@media (max-width: 767.98px) {
	.urh-ft-in { grid-template-columns: 1fr 1fr; padding: 54px 20px 30px; gap: 30px 20px; }
	.urh-ft-brand { grid-column: 1 / -1; }
	.urh-ft-copy p { padding: 20px; }
}
@media (max-width: 480px) {
	.urh-ft-in { grid-template-columns: 1fr; gap: 26px; }
}

/* ======================================================================
   맨 위로 버튼(전 페이지) — 스크롤해야 나타남
   ====================================================================== */
body #top_btn {
	position: fixed; right: 20px; bottom: 20px; z-index: 1500; width: 48px; height: 48px; margin: 0; padding: 0;
	border: 0; border-radius: 50%; background: var(--ink); color: #fff; line-height: 48px; font-size: 16px;
	box-shadow: 0 10px 24px rgba(15, 16, 32, .3); cursor: pointer;
	opacity: 0; visibility: hidden; transform: translateY(14px);
	transition: opacity .3s, visibility .3s, transform .3s var(--ease), background .3s;
}
body #top_btn.is-show { opacity: 1; visibility: visible; transform: none; }
body #top_btn:hover { background: var(--violet); transform: translateY(-4px); }
body #top_btn i { color: #fff; }

/* ======================================================================
   하위 페이지 등장 효과(js/urh_site.js 가 urh-rise-on 을 붙였을 때만)
   ====================================================================== */
.urh-rise-on .urh-rise-el { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.urh-rise-on .urh-rise-el.is-in { opacity: 1; transform: none; }
.urh-rise-on .urh-rise-el { transition-delay: var(--d, 0s); } /* 카드 순차 등장(style="--d:.08s") */

@media (prefers-reduced-motion: reduce) {
	.urh-sub-hero-bg { animation: none; transform: none; }
	.urh-hd, .urh-mnav, .urh-gnb-sub, body #top_btn { transition: none; animation: none; }
}

/* ======================================================================
   그누보드 5.6.43 적용 뒤 크롬 점검(2026-10-25) — 모바일 가로 넘침·옛 검색 폼
   스킨 style.css 가 이 파일 앞뒤 어디에 붙을지 몰라 body 를 앞에 붙여 우선순위를 높임
   ====================================================================== */
/* 갤러리 — section.wrapper 가 display:table 이라 검색칸(384px) 폭만큼 늘어나 480·380 폭에서 메뉴 단추가 화면 밖으로 밀림 */
@media (max-width: 767.98px) {
	body #bo_gall section.wrapper { display: block; width: 100%; max-width: 100%; }
	body #bo_gall #bo_sch { float: none; width: 100%; max-width: 100%; box-sizing: border-box; margin-left: 0; margin-right: 0; }
	body #bo_gall #bo_sch .sch_input { flex: 1 1 0; min-width: 0; }
}

/* 전체검색·새글·FAQ 검색 폼 — 회색 상자·파란 단추·네모 칸을 사이트 모양(둥근 칸·보라 초점)으로, 칸 폭은 화면 안으로 */
body #sch_res_detail, body #new_sch {
	border: 1px solid var(--line); border-radius: 22px; background: #fff; padding: 22px; margin: 0 0 28px;
	box-shadow: 0 10px 30px rgba(15, 16, 32, .05); text-align: center; box-sizing: border-box; max-width: 100%;
}
body #sch_res_detail select, body #new_sch select, body #sch_res_detail .frm_input, body #new_sch .frm_input, body #faq_sch .frm_input {
	height: 46px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--text); padding: 0 14px;
	box-sizing: border-box; max-width: 100%; vertical-align: middle; transition: border-color .25s, box-shadow .25s;
}
body #sch_res_detail .frm_input:focus, body #new_sch .frm_input:focus, body #faq_sch .frm_input:focus,
body #sch_res_detail select:focus, body #new_sch select:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 4px rgba(108, 76, 255, .12); }
body #sch_res_detail .btn_submit, body #new_sch .btn_submit, body #faq_sch .btn_submit {
	height: 46px; min-height: 46px; padding: 0 22px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 15px; vertical-align: middle;
}
body #sch_res_detail .btn_submit:hover, body #new_sch .btn_submit:hover, body #faq_sch .btn_submit:hover { background: var(--violet); }
body #sch_res_detail .sch_wr { display: inline-flex; gap: 8px; max-width: 100%; vertical-align: middle; }
body #sch_res_detail .sch_wr .frm_input { flex: 1 1 auto; min-width: 0; width: 320px; }
body #sch_res_detail .sch_rd { display: inline-block; margin-left: 10px; color: var(--mute); vertical-align: middle; }
body #faq_sch form { display: inline-flex; gap: 8px; max-width: 100%; }
body #faq_sch .frm_input { flex: 1 1 auto; min-width: 0; width: 300px; }
@media (max-width: 767.98px) {
	body #sch_res_detail, body #new_sch { padding: 16px; border-radius: 18px; }
	body #sch_res_detail select, body #new_sch select { width: 100%; margin: 0 0 8px; }
	body #sch_res_detail .sch_wr, body #faq_sch form { display: flex; width: 100%; }
	body #sch_res_detail .sch_wr .frm_input, body #faq_sch .frm_input { width: auto; }
	body #sch_res_detail .sch_rd { display: block; margin: 10px 0 0; }
	body #new_sch .frm_input { width: 100%; margin: 0 0 8px; }
}

/* 전체검색 결과 — 게시판 칩·결과 목록 */
body #sch_res_board { border: 0; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 8px; }
body #sch_res_board li { float: none; margin: 0; }
body #sch_res_board a { display: inline-block; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--text); text-decoration: none; }
body #sch_res_board a.sch_on, body #sch_res_board a:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
body .sch_res_list h2 a { color: var(--text); font-weight: 800; }
body .sch_res_list .sch_res_title { color: var(--text); font-weight: 700; }
body .sch_res_list .sch_res_title:hover { color: var(--violet); }
body .sch_res_list .sch_word, body #sch_res_ov .sch_word { color: var(--violet); }

/* 현재접속자 — PC 4칸, 좁은 화면 2칸·1칸, 카드 모양 */
body #current_connect li .inner { border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 8px 22px rgba(15, 16, 32, .05); }
body #current_connect .crt_lct { border-top-color: var(--line); }
body #current_connect .crt_lct a { color: var(--violet); }
@media (max-width: 767.98px) { body #current_connect li { width: 50%; } }
@media (max-width: 479.98px) { body #current_connect li { width: 100%; } }
/* FAQ 검색칸은 .frm_input 이 아닌 .faq-input(폭 310px 고정) — 380 폭에서 검색 단추가 13px 밖으로 */
body #faq_sch .faq-input {
	flex: 1 1 auto; min-width: 0; width: 300px; max-width: 100%; height: 46px; border: 1px solid var(--line); border-radius: 12px;
	background: #fff; color: var(--text); padding: 0 14px; box-sizing: border-box; transition: border-color .25s, box-shadow .25s;
}
body #faq_sch .faq-input:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 4px rgba(108, 76, 255, .12); }
@media (max-width: 767.98px) { body #faq_sch .faq-input { width: auto; } body #faq_sch .btn_submit { flex: 0 0 auto; } }
/* 380 폭에서 '검색' 단추 글자가 두 줄로 쪼개져 잘림 */
body #sch_res_detail .btn_submit, body #new_sch .btn_submit, body #faq_sch .btn_submit { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 479.98px) { body #sch_res_detail .btn_submit, body #faq_sch .btn_submit { padding: 0 16px; } }
/* 새글 — 폼에 id 가 없어(form[name=fnew]) 위 #new_sch 규칙이 안 걸림 */
body form[name="fnew"] {
	display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 22px; border: 1px solid var(--line); border-radius: 22px;
	background: #fff; box-shadow: 0 10px 30px rgba(15, 16, 32, .05); box-sizing: border-box; max-width: 100%;
}
body form[name="fnew"] select, body form[name="fnew"] input[type="text"] {
	height: 46px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--text); padding: 0 14px;
	box-sizing: border-box; max-width: 100%; transition: border-color .25s, box-shadow .25s;
}
body form[name="fnew"] input[type="text"] { flex: 1 1 220px; min-width: 0; }
body form[name="fnew"] select:focus, body form[name="fnew"] input[type="text"]:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 4px rgba(108, 76, 255, .12); }
body form[name="fnew"] .btn_submit { flex: 0 0 auto; white-space: nowrap; height: 46px; min-height: 46px; padding: 0 22px; border-radius: 999px; background: var(--ink); color: #fff; }
body form[name="fnew"] .btn_submit:hover { background: var(--violet); }
body #fnewlist .table { border-color: var(--line); border-radius: 14px; overflow: hidden; }
body #fnewlist .table > thead > tr > th { background: transparent; border-color: var(--line); border-top: 2px solid var(--ink); color: var(--mute); font-weight: 600; }
body #fnewlist .table > tbody > tr > td { border-color: var(--line); }
body #fnewlist .table-striped > tbody > tr:nth-of-type(odd) { background: #faf9ff; }
@media (max-width: 767.98px) { body form[name="fnew"] { padding: 16px; } body form[name="fnew"] select { flex: 1 1 40%; } }