/* ============================================================ 현대장묘조경 · style.css 두 목업(홈·지역페이지)의 CSS를 합쳐 정리한 파일이다. 레이아웃 규칙 (반드시 지킴) - .wrap 은 좌우 패딩, .blk 는 상하 패딩만 지정한다. .blk 에 padding 단축 속성을 쓰면 .wrap 을 덮어쓴다. - --edge 는 히어로/전화 CTA의 좌우 기준선을 다른 섹션에 맞춘다. 히어로 사진 (--photo) - 기본은 --ph1(묘지이장). 무연고묘 페이지는 에 'svc-unclaimed' 클래스를 붙여 --ph2 로 전환한다. ============================================================ */ /* ── 토큰 ─────────────────────────────────────────────── */ :root{ --bg:#FBF9F4; --bg-alt:#F5F3EE; --ink:#1B1C19; --sub:#5F5E5E; --line:#DCC0BA; --line-soft:#E8E2DC; --accent:#8C3622; --accent-dk:#6D200E; --serif:'Noto Serif KR',serif; --sans:'Noto Sans KR',sans-serif; --pad:24px; --sec:64px; --max:1120px; --edge:max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad))); --ph1:url('/img/hero-relocation.webp'); --ph2:url('/img/hero-unclaimed.webp'); --photo:var(--ph1); /* 사진 채도 — 여름 진초록 사진(hero-relocation) 기준 .50. 사진 교체 시 재조정 */ --photo-saturate:.50; } @media(min-width:900px){ :root{ --pad:40px; --sec:120px; } } body.svc-unclaimed{ --photo:var(--ph2); } /* ── 리셋 ─────────────────────────────────────────────── */ *{box-sizing:border-box;margin:0;padding:0} html{scrollbar-gutter:stable} body{ background:var(--bg);color:var(--ink); font-family:var(--sans);font-size:16px;line-height:1.8; word-break:keep-all;-webkit-font-smoothing:antialiased; padding-bottom:72px; } body.modal-open{overflow:hidden} @media(min-width:900px){ body{padding-bottom:0} } a{color:inherit;text-decoration:none} /* ── 레이아웃 유틸 ────────────────────────────────────── */ .wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)} .blk{padding-top:var(--sec);padding-bottom:var(--sec)} .label{font-size:12px;letter-spacing:.2em;font-weight:500;color:var(--accent)} .pcbr{display:none} @media(min-width:900px){ .pcbr{display:inline} } .nobr{white-space:nowrap} /* 사업자등록번호·전화번호처럼 하이픈 있는 숫자가 줄 중간에서 잘리지 않도록 */ /* 섹션 공통 제목·설명 */ .sec-h{font-family:var(--serif);font-size:26px;font-weight:600;margin-bottom:8px} .sec-d{color:var(--sub);font-size:16px;margin-bottom:40px} @media(min-width:900px){ .sec-h{font-size:38px} .sec-d{margin-bottom:60px} } /* ── 헤더 ─────────────────────────────────────────────── */ header{ position:sticky;top:0;z-index:40;background:var(--bg); border-bottom:1px solid var(--line-soft); } .hd{ max-width:var(--max);margin:0 auto;padding:0 var(--pad);height:60px; display:flex;align-items:center;justify-content:space-between; } .logo{ display:flex;align-items:center;gap:10px; font-family:var(--serif);font-size:19px;font-weight:700; } .seal{ width:28px;height:28px;flex:none;background:var(--accent);color:#fff; font-family:var(--serif);font-size:16px;font-weight:700;line-height:1; display:flex;align-items:center;justify-content:center; } .hd-tel{ display:inline-flex;align-items:center;gap:7px; border:1px solid var(--line);padding:8px 14px; font-size:14px;color:var(--accent);font-weight:500;line-height:1; } .hd-tel b{font-family:var(--serif);font-size:16px;font-weight:700;letter-spacing:.01em} .hd-tel:hover{background:var(--accent);border-color:var(--accent);color:#fff} @media(max-width:640px){ .hd-tel{border:0;padding:8px;margin-right:-8px} .hd-tel .cap,.hd-tel b{display:none} .hd-tel:hover{background:none;color:var(--accent)} } /* 빵부스러기 + 지역 선택 (지역페이지 상단 바) */ .bar{border-bottom:1px solid var(--line-soft)} .bar-in{ max-width:var(--max);margin:0 auto;padding:16px var(--pad); display:flex;align-items:center;justify-content:space-between;gap:20px; } .crumb{ font-size:12.5px;letter-spacing:.06em;color:var(--sub); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .crumb a:hover{color:var(--accent)} .crumb span{margin:0 6px;color:#B9B4AC} .picker{ display:flex;align-items:baseline;gap:9px; background:none;border:0;cursor:pointer; font-family:var(--sans);padding:0 0 4px;flex:none; border-bottom:1px solid var(--line); } .picker:hover{border-bottom-color:var(--accent)} .picker:hover .rg{color:var(--accent)} .picker .cap{font-size:11px;letter-spacing:.16em;color:var(--sub)} .picker .rg{ font-family:var(--serif);font-size:19px;font-weight:600; color:var(--ink);transition:color .2s; } .picker .cv{font-size:10px;color:var(--sub)} @media(max-width:560px){ .picker .cap{display:none} } /* ── 히어로 ───────────────────────────────────────────── */ .hero{ position:relative;overflow:hidden; background-color:var(--ink); color:#F4F2ED; min-height:60vh; display:flex;flex-direction:column;justify-content:center; padding:56px 0 64px; } .hero::before{ content:"";position:absolute;inset:0;z-index:0; background-image:linear-gradient(rgba(24,26,22,.86), rgba(24,26,22,.94)), var(--photo); background-size:cover;background-position:center; filter:saturate(var(--photo-saturate)); } .hero .in{position:relative;z-index:1;width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--pad)} .hero .label{display:block;margin-bottom:16px;color:#E0BCB0} /* 홈 히어로 라벨 4항목. 좁은 화면에서 자연 줄바꿈에 맡기면 마지막 한 항목만 떨어지고 앞줄 끝에 「·」 가 매달린다. 640px 미만에서는 가운데 구분자를 줄바꿈으로 바꿔 2 + 2 로 나눈다 */ .hero .label .lbr{display:inline} .hero .label .sep{display:none} @media(min-width:640px){ .hero .label .lbr{display:none} .hero .label .sep{display:inline} } .hero h1{ font-family:var(--serif);font-size:30px;font-weight:700; line-height:1.45;letter-spacing:-.01em;color:#fff; } .hero .lead{ font-family:var(--serif);font-size:20px;font-weight:500; color:#EFEDE7;margin-top:14px; } .hero p{margin-top:14px;color:#D6D2CA;max-width:32em;font-size:16px} .hero .cta{ margin-top:30px;display:inline-flex;align-items:center;gap:10px; background:var(--accent);color:#fff;padding:16px 30px; font-size:16px;font-weight:500; } .hero .cta:hover{background:var(--accent-dk)} /* 강점 인라인 — 히어로 좌측 텍스트 블록 하단 모바일: 2×2 그리드로 강제 (자연 배치는 3+1이 되어 어색) */ .hero .merits-line{ list-style:none; margin-top:32px; padding-top:22px; border-top:1px solid rgba(255,255,255,.14); color:#D6D2CA; font-size:13px; line-height:1.7; display:grid; grid-template-columns:1fr 1fr; column-gap:14px; row-gap:8px; } .hero .merits-line li{white-space:nowrap} .hero .merits-line li::before{content:"·";margin-right:.5em;color:#D6D2CA} .hero-media{display:none} @media(min-width:900px){ .hero{ color:#F4F2ED; display:block;min-height:480px; padding:var(--sec) 0; } .hero::before{ /* PC 좌→우 그라데이션 — 좌측 절반은 사진이 거의 안 보일 만큼 어둡고 우측은 사진 형태가 드러나되 전체적으로 눌러 둠 */ background-image: linear-gradient(to right, rgba(24,26,22,.97) 0%, rgba(24,26,22,.94) 50%, rgba(24,26,22,.55) 78%, rgba(24,26,22,.40) 100%), var(--photo); } /* 무연고묘 사진(hero-unclaimed)은 우측 하단에 흰 꽃(개망초)이 있어 기본 오버레이로는 우측 밝기가 눈에 띈다. 우측만 더 눌러 톤을 맞춘다. */ body.svc-unclaimed .hero::before{ background-image: linear-gradient(to right, rgba(24,26,22,.97) 0%, rgba(24,26,22,.94) 50%, rgba(24,26,22,.82) 78%, rgba(24,26,22,.78) 100%), var(--photo); } /* 우측 컬럼(.hero-media)은 항상 display:none — 사진은 .hero::before 가 전체 배경으로 깐다. 우측 칸은 시각적으로 비어 있으므로 실제로는 좌측 글에 더 얹어줘도 화면상 아무것도 밀리지 않는다. 900px 근접 구간에서 좌측 칸이 좁아 h1이 (강제 줄바꿈 위에) 자연 줄바꿈까지 겹쳐 3줄이 되는 문제가 있어 1fr 1fr 대신 좌측에 더 넉넉한 비율을 준다 */ .hero .in{display:grid;grid-template-columns:3fr 2fr;gap:64px;align-items:center;min-height:240px} .hero-txt{display:flex;flex-direction:column;align-items:flex-start} .hero .label{color:#E0BCB0;margin-bottom:20px} .hero h1{font-size:48px;line-height:1.34;color:#fff} .hero .lead{font-size:26px;color:#EFEDE7;margin-top:18px} .hero p{font-size:17px;color:#D6D2CA;margin-top:18px} .hero .cta{margin-top:36px} .hero .merits-line{ display:flex;flex-wrap:wrap; font-size:14px;margin-top:40px;padding-top:24px } /* PC는 한 줄 인라인이므로 첫 항목엔 · 없음 */ .hero .merits-line li::before{content:none} .hero .merits-line li + li::before{content:"·";margin:0 .7em;color:#D6D2CA} } /* ── 서비스 (선 하나로 나누기, 프레임 없음) ─────────────── */ .svc{padding:var(--sec) 0;background:var(--bg)} .svc-grid{display:grid;grid-template-columns:1fr} .svc-cell{ padding:20px 0; display:flex;flex-direction:column; } .svc-cell + .svc-cell{border-top:1px solid var(--line)} .svc-cell .label{font-size:12px;letter-spacing:.16em;color:var(--accent);font-weight:500} .svc-cell h3{font-family:var(--serif);font-size:28px;font-weight:600;margin:14px 0 18px;color:var(--ink)} .svc-cell h3 .sub{font-family:var(--sans);font-size:14px;font-weight:400;color:var(--sub);letter-spacing:0} .svc-cell p{color:var(--sub);font-size:16px;margin-bottom:22px} .svc-cell .link{ color:var(--accent);font-weight:500;font-size:16px; border-bottom:1px solid var(--accent);padding-bottom:2px; align-self:flex-start; transition:color .15s, border-color .15s; } .svc-cell:hover .link{color:var(--accent-dk);border-bottom-color:var(--accent-dk)} @media(min-width:900px){ .svc-grid{grid-template-columns:1fr 1fr} .svc-cell{padding:32px 0} .svc-cell + .svc-cell{border-top:0;border-left:1px solid var(--line);padding-left:56px} .svc-cell:first-child{padding-right:56px} .svc-cell h3{font-size:38px} .svc-cell h3 .sub{font-size:16px} /* 좌우 셀의 설명 줄 수가 달라도 링크는 같은 높이에 오도록. p 가 남은 공간을 밀어내 link 를 하단에 정렬 */ .svc-cell p{flex:1} } /* ── 절차 ─────────────────────────────────────────────── */ .steps{border-top:1px solid var(--line-soft)} .step{ position:relative;padding:34px 0; border-bottom:1px solid var(--line-soft);overflow:hidden; } .step .bignum{ position:absolute;right:-8px;top:0; font-family:var(--serif);font-size:110px;font-weight:700;line-height:.9; color:var(--accent);opacity:.08; pointer-events:none;user-select:none; } .step .idx{ font-size:12px;letter-spacing:.2em;color:var(--accent); font-weight:500;position:relative; } .step h3{ font-family:var(--serif);font-size:21px;font-weight:600; margin:6px 0 10px;position:relative; } .step p{color:var(--sub);font-size:16px;position:relative} .step img{ width:100%;height:170px;object-fit:cover; margin-top:20px;position:relative;display:block; } @media(min-width:900px){ .step{ display:grid;grid-template-columns:280px 1fr;gap:56px; padding:52px 0;align-items:start; } .step .bignum{font-size:170px;right:16px;top:24px} .step h3{font-size:27px;margin:8px 0 0} .step p{font-size:16px} .step img{height:220px;margin-top:0} .step .col-r{display:grid;gap:24px} } /* ── 운구차량 ─────────────────────────────────────────── */ .hearse{ background:var(--bg-alt); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); } .hearse .txt{padding:var(--sec) 0} .hearse h2{ font-family:var(--serif);font-size:26px;font-weight:600; line-height:1.45;margin-top:14px; } .hearse p{color:var(--sub);margin-top:16px;font-size:16px} .hearse img{width:100%;height:220px;object-fit:cover;display:block} @media(min-width:900px){ .hearse .in{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center} .hearse img{height:360px} .hearse h2{font-size:36px} } /* ── 갤러리 (시공 사례) — 가로 슬라이드 ───────────────── 기본은 CSS scroll-snap. JS 가 켜져 있으면 touch-action:pan-y 를 걸어 터치축을 넘겨받아 화살표와 동일하게 한 걸음씩 스와이프시킨다 (JS 상세는 design/홈_목업.html 스크립트의 bindSwipe 참고). JS 를 꺼도 CSS scroll-snap 만으로 손가락 스와이프 열람은 가능하다. */ /* 제목 · 화살표 · 카운터 한 줄 정렬 기본은 세로 (좁은 뷰포트에서 화살표가 화면 밖으로 밀리는 문제 회피). 400px 이상에서 grid 2컬럼으로 전환. */ .gal-head{ display:flex;flex-direction:column; gap:14px;margin-bottom:20px; } .gal-head .txt{min-width:0} .gal-head .sec-h,.gal-head .sec-d{margin:0} .gal-head .sec-d{margin-top:6px} .gal-head .gal-nav{align-self:flex-end} @media(min-width:400px){ .gal-head{ display:grid;grid-template-columns:minmax(0,1fr) auto; align-items:end;column-gap:12px; } } .gal-nav{ display:flex;align-items:center;gap:8px; flex-shrink:0; } @media(min-width:640px){ .gal-nav{gap:12px} } .gal-count{ font-family:var(--serif);font-weight:500; font-size:15px;color:var(--sub); min-width:44px;text-align:right; letter-spacing:.02em; font-variant-numeric:tabular-nums; } .gal-btn{ position:relative; /* 터치 영역 확장 pseudo 기준 */ width:36px;height:36px; flex:0 0 36px; /* 축소 방지 — 좁은 뷰포트에서 밀림 방지 */ display:inline-flex;align-items:center;justify-content:center; background:transparent; border:1px solid var(--line); color:var(--ink); cursor:pointer; transition:border-color .15s, color .15s, background .15s; } @media(min-width:640px){ .gal-btn{width:40px;height:40px;flex-basis:40px} } /* 시각 사각형은 40×40 유지, 터치 판정만 44×44 로 확장 (WCAG 최소 크기) */ .gal-btn::before{ content:""; position:absolute;inset:-2px; } .gal-btn:hover:not(:disabled){border-color:var(--ink);background:var(--bg-alt)} .gal-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px} .gal-btn:disabled{color:#B8B4AC;border-color:var(--line-soft);cursor:default} .gal-btn svg{width:16px;height:16px} /* 슬라이드 트랙 .gal-track 이 실제 스크롤러. .gal 은 좌우 여백 리셋을 위해 유지 */ .gal-track{ display:flex;gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; scrollbar-width:none; overscroll-behavior-x:contain; } .gal-track::-webkit-scrollbar{display:none} .gal-track .gal-card{ flex:0 0 calc((100% - 10px) / 1.2); /* 모바일: 1.2장 (첫 카드 + gap + 0.2장 걸침) */ min-width:0; /* flex 아이템 자연폭 무시 — 안 넣으면 원본 폭으로 밀림 */ scroll-snap-align:start; margin:0; } .gal-card img{ width:100%; aspect-ratio:4/3;object-fit:cover;display:block; cursor:zoom-in; } .gal-card figcaption{ margin-top:8px; font-size:14px;line-height:1.4;color:var(--ink); height:2.8em; /* 2줄 고정 — 1줄이어도 카드 높이가 흔들리지 않는다 */ display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden; } @media(min-width:640px){ .gal-track{gap:14px} .gal-track .gal-card{ flex-basis:calc((100% - 14px) / 2); /* 태블릿: 2장 */ } } @media(min-width:900px){ .gal-track{gap:16px} .gal-track .gal-card{ flex-basis:calc((100% - 16px * 2) / 3); /* PC: 3장 */ } .gal-card figcaption{font-size:15px} } /* ── FAQ ──────────────────────────────────────────────── */ details{border-bottom:1px solid var(--line-soft)} details:first-of-type{border-top:1px solid var(--line-soft)} summary{ list-style:none;cursor:pointer; padding:22px 34px 22px 0;position:relative; font-size:16px;font-weight:500;font-family:var(--serif); } summary::-webkit-details-marker{display:none} summary::after{ content:"+";position:absolute;right:4px;top:20px; font-size:20px;color:var(--accent); } details[open] summary::after{content:"−"} details .ans{padding:0 0 24px;color:var(--sub);font-size:16px} @media(min-width:900px){ summary{font-size:19px;padding:26px 40px 26px 0} } /* ── 전화 CTA ─────────────────────────────────────────── */ .tel{background:var(--ink);color:#F2F1EC;text-align:center;padding:var(--sec) 0} .tel .label{color:#C8A99F} .tel h2{ font-family:var(--serif);font-size:24px;font-weight:600; margin:16px 0 0;line-height:1.45; } .tel .btn{ display:inline-flex;align-items:center;gap:12px;margin-top:28px; background:var(--accent);color:#fff;padding:22px 48px; font-size:17px;font-weight:500;line-height:1; } .tel .btn:hover{background:var(--accent-dk)} @media(min-width:900px){ .tel h2{font-size:32px} .tel .btn{padding:26px 60px;font-size:18px} } /* ── 지역 목록 ────────────────────────────────────────── */ .regions{ padding:var(--sec) 0; border-top:1px solid var(--line-soft); background:var(--bg-alt); } .regions .grp{margin-bottom:44px} .regions .grp:last-child{margin-bottom:0} .regions h3{font-family:var(--serif);font-size:19px;font-weight:600;margin-bottom:16px} .regions .rd{font-size:13.5px;color:var(--sub);margin-bottom:26px} .rgrid{ display:grid;grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line-soft); border-left:1px solid var(--line-soft); } .rgrid a{ padding:13px 10px;font-size:14px;color:var(--sub);text-align:center; border-right:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); } .rgrid a:hover{color:var(--accent);background:var(--bg)} .rgrid a.on{color:var(--accent);font-weight:700;background:var(--bg)} @media(min-width:640px){ .rgrid{grid-template-columns:repeat(5,1fr)} } @media(min-width:900px){ .rgrid{grid-template-columns:repeat(8,1fr)} } /* 시·도 16개 고정 그리드 (홈 전용) — 4열 → 8열로만 전환 */ .rgrid.sido{grid-template-columns:repeat(4,1fr)} @media(min-width:900px){ .rgrid.sido{grid-template-columns:repeat(8,1fr)} } /* 도 페이지 격자 아래 "다른 시·도 선택" 트리거 button 을 텍스트 링크 형태로. 벽돌색 + 밑줄 1px */ .regions .more{ display:inline-block; margin-top:24px; background:none;border:0;padding:0 0 2px; color:var(--accent);font-family:var(--sans);font-weight:500;font-size:16px; border-bottom:1px solid var(--accent); cursor:pointer; transition:color .15s, border-color .15s; } .regions .more:hover{color:var(--accent-dk);border-color:var(--accent-dk)} .regions .more:focus-visible{outline:2px solid var(--ink);outline-offset:3px} /* ── 푸터 ─────────────────────────────────────────────── */ footer{ padding:48px 0 56px;border-top:1px solid var(--line-soft); background:var(--bg-alt); font-size:13px;color:var(--sub); } footer .fname{ display:flex;align-items:center;gap:10px; font-family:var(--serif);font-size:19px;font-weight:600;color:var(--ink); margin-bottom:14px; } footer p{line-height:2.1} /* ── 하단 고정바 (모바일 전화 버튼) ───────────────────── */ .sticky{ position:fixed;left:0;right:0;bottom:0;z-index:50; background:var(--accent);color:#fff;padding:18px; font-size:16px;font-weight:500;line-height:1; display:flex;align-items:center;justify-content:center;gap:9px; } @media(min-width:900px){ .sticky{display:none} } /* ── 지역 모달 ───────────────────────────────────────── */ .modal{position:fixed;inset:0;z-index:100;display:none} .modal.open{display:block} .modal .veil{position:absolute;inset:0;background:rgba(24,26,22,.55)} .modal .box{ position:absolute;inset:auto 0 0 0;max-height:86vh; overflow-y:auto;overscroll-behavior:contain;background:var(--bg); } @media(min-width:900px){ .modal .box{ inset:50% auto auto 50%;transform:translate(-50%,-50%); width:720px;max-height:76vh; } } .modal .mh{ display:flex;justify-content:space-between;align-items:flex-start; padding:26px var(--pad) 20px;border-bottom:1px solid var(--line); position:sticky;top:0;background:var(--bg);z-index:2; } .modal .mh h4{font-family:var(--serif);font-size:21px;font-weight:600} .modal .mh p{font-size:13px;color:var(--sub);margin-top:4px} .modal .mh button{ background:none;border:0;font-size:20px;color:var(--sub); cursor:pointer;line-height:1;padding:4px;margin:-4px; } .mbody{padding:0 var(--pad) 40px} .mbody .msec{ font-family:var(--sans);font-size:12px;font-weight:500; letter-spacing:.16em;color:var(--sub); padding:24px 0 14px;margin-top:24px; border-top:1px solid var(--line-soft); } .mbody .msec:first-child{margin-top:0;padding-top:20px;border-top:0} .mgrid{ display:grid;grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line-soft); border-left:1px solid var(--line-soft); } .mgrid a{ padding:18px 6px;text-align:center;font-size:15px;color:var(--ink); border-right:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); } .mgrid a:hover{color:var(--accent);background:var(--bg-alt)} .mgrid a.on{color:#fff;background:var(--accent);font-weight:600} @media(min-width:900px){ .mgrid{grid-template-columns:repeat(6,1fr)} } /* ── 라이트박스 (갤러리 확대) ──────────────────────────── 구조: 어두운 배경 위 스크롤 트랙(scroll-snap) + 절대위치 UI. 갤러리 트랙과 동일하게 JS 가 touch-action:pan-y 로 터치축을 넘겨받아 스와이프 한 번에 한 장씩만 넘어가게 한다 (bindSwipe 공용 함수). z-index 층 .lb-track : 0 (기본, 스크롤·이미지) .lb-close : 3 (X 버튼) .lb-nav : 3 (좌우 화살표) .lb-info : 3 (하단 캡션·카운터, 클릭 통과) 닫기 방법 - X 버튼 (우상단, 항상 클릭 가능) - ESC 키 - 슬라이드 여백(사진 없는 공간) 클릭 - 사진 자체 클릭은 무시(스와이프 중 오작동 방지) */ .lightbox{ position:fixed;inset:0;z-index:110;display:none; background:#0C0C0A; /* 완전 불투명. rgba(...,.94) 로는 실기에서 뒤 페이지 글자가 비쳐 보였다 */ } .lightbox.open{display:block} .lightbox .lb-track{ position:absolute;inset:0; display:flex; overflow-x:auto;overflow-y:hidden; scroll-snap-type:x mandatory; scroll-behavior:auto; /* 라이트박스는 즉시 이동. 사장님 지시상 애니메이션 전면 금지 */ -webkit-overflow-scrolling:touch; overscroll-behavior:contain; scrollbar-width:none; } .lightbox .lb-track::-webkit-scrollbar{display:none} .lightbox .lb-slide{ flex:0 0 100%;min-width:0; scroll-snap-align:start; display:flex;align-items:center;justify-content:center; padding:60px 24px 100px; cursor:zoom-out; } .lightbox .lb-slide img{ max-width:100%;max-height:100%; object-fit:contain;display:block; user-select:none;-webkit-user-drag:none; cursor:default; } .lightbox .lb-close{ position:absolute;top:16px;right:16px;z-index:3; width:44px;height:44px; background:transparent;border:1px solid rgba(255,255,255,.45); color:#fff;cursor:pointer; display:inline-flex;align-items:center;justify-content:center; } .lightbox .lb-close:hover{border-color:#fff;background:rgba(255,255,255,.08)} .lightbox .lb-nav{ position:absolute;top:50%;transform:translateY(-50%);z-index:3; width:44px;height:44px; background:transparent;border:1px solid rgba(255,255,255,.45); color:#fff;cursor:pointer; display:inline-flex;align-items:center;justify-content:center; } .lightbox .lb-nav:hover:not(:disabled){border-color:#fff;background:rgba(255,255,255,.08)} .lightbox .lb-nav:disabled{opacity:.3;cursor:default} .lightbox .lb-nav.prev{left:16px} .lightbox .lb-nav.next{right:16px} .lightbox .lb-close svg, .lightbox .lb-nav svg{width:18px;height:18px} .lightbox .lb-info{ position:absolute;bottom:0;left:0;right:0;z-index:3; padding:20px 24px 22px; color:rgba(255,255,255,.85); pointer-events:none; /* 캡션 영역 클릭도 슬라이드로 통과 */ display:flex;justify-content:space-between;align-items:flex-end;gap:16px; background:linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,0)); } .lightbox .lb-caption{ font-family:var(--sans);font-size:14px;line-height:1.5; max-width:calc(100% - 80px); color:rgba(255,255,255,.9); margin:0; } .lightbox .lb-count{ font-family:var(--serif);font-weight:500;font-size:15px; color:rgba(255,255,255,.75); letter-spacing:.02em; font-variant-numeric:tabular-nums; flex-shrink:0; } .lightbox :focus-visible{outline:2px solid #fff;outline-offset:2px} @media(min-width:900px){ .lightbox .lb-close,.lightbox .lb-nav{width:52px;height:52px} .lightbox .lb-close{top:24px;right:24px} .lightbox .lb-nav{display:inline-flex} /* PC 만 화살표 노출 */ .lightbox .lb-nav.prev{left:24px} .lightbox .lb-nav.next{right:24px} .lightbox .lb-slide{padding:80px 96px 100px} .lightbox .lb-info{padding:24px 32px 28px} .lightbox .lb-caption{font-size:15px} }