@charset "utf-8";
/* ───────── 2026-10-20 언크롭 그림액자 섹션 홈 (frh-) PC — shop_common/lib/frame_home.php
   작품 카드는 공용 파일(loadThumbnail_241022.php)과 공용 CSS 그대로 — 여기서는 카드 글자를 건드리지 않음
   폭 = .wrap (1400) · 글꼴 = 사이트 Noto Sans KR · 포인트 #4499aa (공용 카드 가격색)
   ───────── */
.frh { padding:34px 0 120px; color:#111111; }
.frh [class^="frh-"], .frh [class*=" frh-"] { box-sizing:border-box; }   /* 내 칸만 — 공용 .wrap · 카드는 원래 상자 계산 그대로 (전체에 걸면 본문 폭이 줄어 카드가 3개로) */
.frh a { color:inherit; text-decoration:none; }
.frh ul { margin:0; padding:0; list-style:none; }

/* 섹션 · 머리 */
.frh-sec { margin-top:116px; }
.frh-sec:first-child { margin-top:0; }
.frh-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:34px; }
.frh-eyebrow { display:block; margin-bottom:12px; font-size:11px; font-weight:500; line-height:1; letter-spacing:0.22em; text-transform:uppercase; color:#4499aa; }
.frh-head h2 { margin:0; font-size:28px; font-weight:500; line-height:1.25; letter-spacing:-1.1px; color:#111111; }
.frh-head p { margin:11px 0 0; font-size:14px; font-weight:300; line-height:1.5; letter-spacing:-0.4px; color:#7a7a7a; }
.frh-more { display:inline-flex; align-items:center; gap:7px; padding-bottom:3px; font-size:13px; font-weight:400; letter-spacing:-0.3px; color:#6f6f6f !important; white-space:nowrap; border-bottom:1px solid transparent; transition:color .2s, border-color .2s; }
.frh-more:hover { color:#111111 !important; border-bottom-color:#111111; }
.frh-more i, .frh-pane-more i, .frh-all-btn i, .frh-cur-go i { display:inline-block; width:5px; height:5px; margin-top:-1px; border-top:1.2px solid currentColor; border-right:1.2px solid currentColor; transform:rotate(45deg); }

/* 1. 큐레이션 — 크게 하나 + 작게 셋 */
.frh-cur { display:grid; grid-template-columns:minmax(0, 2.06fr) minmax(0, 1fr); grid-template-rows:repeat(3, minmax(0, 1fr)); gap:12px; height:612px; }
.frh-cur-i { position:relative; display:block; overflow:hidden; border-radius:4px; background:#f2f2f0; }
.frh-cur-i.is-lead { grid-row:1 / span 3; }
.frh-cur-img { position:absolute; left:0; top:0; right:0; bottom:0; background:#f2f2f0 center / cover no-repeat; transition:transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.frh-cur-i:hover .frh-cur-img { transform:scale(1.035); }
.frh-cur-t { position:absolute; left:0; right:0; bottom:0; padding:70px 26px 22px; background:linear-gradient(to top, rgba(0,0,0,0.46) 0%, rgba(0,0,0,0.16) 55%, rgba(0,0,0,0) 100%); color:#ffffff; }
.frh-cur-t b { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:15px; font-weight:500; line-height:1.45; letter-spacing:-0.5px; text-shadow:0 1px 8px rgba(0,0,0,0.18); }
.frh-cur-i.is-lead .frh-cur-t { padding:160px 46px 42px; background:linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.18) 50%, rgba(0,0,0,0) 100%); }
.frh-cur-t em { display:block; margin-bottom:14px; font-size:11px; font-style:normal; font-weight:500; line-height:1; letter-spacing:0.24em; text-transform:uppercase; opacity:0.88; }
.frh-cur-i.is-lead .frh-cur-t b { max-width:640px; font-size:31px; font-weight:500; line-height:1.36; letter-spacing:-1.3px; }
.frh-cur-go { display:inline-flex; align-items:center; gap:8px; margin-top:20px; padding-bottom:4px; font-size:13px; font-weight:400; letter-spacing:-0.2px; border-bottom:1px solid rgba(255,255,255,0.6); }

/* 2. 컬렉션 — 썸네일 칸 .frame · 글자 p.product-title / p.product-artist 는 공용 카드와 같음 (크기만 7칸에 맞춤) */
.frh-col { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:16px; }
.frh-col li { min-width:0; }
.frh-col .frame { position:relative; display:block; width:100%; height:0; padding-top:100%; }
.frh-col .frame .thumbnail { position:absolute; left:50%; top:50%; max-width:100%; max-height:100%; transform:translate(-50%, -50%); transition:transform .6s cubic-bezier(.2, .7, .2, 1); }
.frh-col li a:hover .frame .thumbnail { transform:translate(-50%, -50%) scale(1.04); }

/* 작품 카드 줄 (공용 파일) — 줄 간격만 정리 */
.frh .frh-plist ul li { margin-bottom:60px; }
.frh .frh-plist ul li:nth-child(4n) { margin-bottom:60px; }
.frh .frh-plist ul { margin-bottom:-60px; }
.frh-ranked ul { counter-reset:frhrank; }
.frh-ranked ul li { counter-increment:frhrank; }
.frh-ranked ul li .frame { position:relative; }
.frh-ranked ul li .frame:before { content:counter(frhrank); position:absolute; left:12px; top:12px; z-index:3; min-width:26px; height:26px; padding:0 6px; border-radius:2px; background:rgba(255,255,255,0.94); box-shadow:0 1px 3px rgba(0,0,0,0.08); font-family:'Noto Sans KR', sans-serif; font-size:12px; font-weight:600; line-height:26px; letter-spacing:0; text-align:center; color:#111111; }

/* 4. 고객의 공간 */
.frh-room-l { display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:16px; }
.frh-room-l li:nth-child(n+7) { display:none; }
.frh-room-l a { display:block; }
.frh-room-img { position:relative; display:block; height:0; padding-top:125%; overflow:hidden; border-radius:4px; background:#f2f2f0; }
.frh-room-img img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; transition:transform 1s cubic-bezier(.2, .7, .2, 1); }
.frh-room-l a:hover .frh-room-img img { transform:scale(1.045); }
.frh-room-l b { display:block; margin-top:14px; font-size:14px; font-weight:500; line-height:1.35; letter-spacing:-0.4px; color:#111111; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.frh-room-l b + span { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; margin-top:6px; font-size:13px; font-weight:300; line-height:1.6; letter-spacing:-0.3px; color:#7a7a7a; }

/* 5. 주제로 고르기 */
.frh-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:-6px 0 36px; }
.frh .frh-tab { height:38px; padding:0 19px; margin:0; border:0; border-radius:999px; background:#ffffff; box-shadow:inset 0 0 0 1px #dedede; font-family:'Noto Sans KR', sans-serif; font-size:14px; font-weight:400; letter-spacing:-0.4px; color:#555555; cursor:pointer; transition:background .2s, color .2s, box-shadow .2s; }
.frh .frh-tab:hover { box-shadow:inset 0 0 0 1px #111111; color:#111111; }
.frh .frh-tab.on { background:#111111; color:#ffffff; box-shadow:none; font-weight:500; }
.frh-pane { display:none; }
.frh-pane.on { display:block; }
.frh-pane-more { margin:56px 0 0; text-align:center; }
.frh-pane-more a { display:inline-flex; align-items:center; gap:9px; height:46px; padding:0 26px; border-radius:999px; box-shadow:inset 0 0 0 1px #dcdcdc; font-size:14px; font-weight:400; letter-spacing:-0.4px; color:#333333 !important; transition:box-shadow .2s, color .2s; }
.frh-pane-more a:hover { box-shadow:inset 0 0 0 1px #111111; color:#111111 !important; }

/* 8. 전체 작품 보기 */
.frh-all { margin-top:120px; padding-top:72px; border-top:1px solid #ececec; text-align:center; }
.frh-all-t { margin:0 0 22px; font-size:14px; font-weight:300; letter-spacing:-0.4px; color:#7a7a7a; }
.frh-all-btn { display:inline-flex; align-items:center; gap:12px; height:56px; padding:0 34px; border-radius:999px; background:#111111; color:#ffffff !important; font-size:15px; font-weight:500; letter-spacing:-0.4px; transition:background .2s; }
.frh-all-btn:hover { background:#2b2b2b; }
.frh-all-btn span { padding-left:12px; border-left:1px solid rgba(255,255,255,0.28); font-family:arial, sans-serif; font-size:14px; font-weight:400; letter-spacing:0; color:rgba(255,255,255,0.62); }