@charset "UTF-8";
/* =========================================================
   AUX PETITS VERRES — 2026 renewal
   Café · Pâtisserie · Bar à vins
   ========================================================= */

:root {
	--apv-cream: #FCFAF5;
	--apv-cream-2: #F1EDE3;
	--apv-ink: #14211F;
	--apv-green: #14332E;
	--apv-deep: #0E1A18;
	--apv-accent: #2E8F84;
	--apv-accent-light: #5FB9AE;
	--apv-body: #3D4B48;
	--apv-muted: #5A6764;
	--apv-hd-h: 72px;
	--apv-serif: 'Cormorant Garamond', 'Noto Serif KR', 'Times New Roman', serif;
	--apv-sans: 'Noto Sans KR', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html { scroll-behavior: smooth; overflow-x: hidden; }
body.apv {
	margin: 0;
	background: var(--apv-cream);
	color: var(--apv-ink);
	font-family: var(--apv-sans);
	font-weight: 300;
	font-size: 15px;
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
body.apv * { box-sizing: border-box; }
body.apv h1, body.apv h2, body.apv h3, body.apv h4, body.apv h5,
body.apv p, body.apv li, body.apv span, body.apv div, body.apv a {
	word-break: keep-all;
	overflow-wrap: break-word;
}
/* fonts.css 의 `* { font-family: Pretendard }` 가 상속을 끊는다. 같은 특이도로 되돌린다 */
:where(.apv) * { font-family: inherit; }
:where(.apv) a { color: currentColor; text-decoration: none; }
body.apv img { max-width: 100%; }
body.apv ::selection { background: var(--apv-accent); color: #fff; }
body.apv .apv-main > section[id],
body.apv .apv-foot[id] { scroll-margin-top: calc(var(--apv-hd-h) + 24px); }

/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */
.apv-hd {
	position: fixed; top: 0; left: 0; right: 0; z-index: 200;
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	padding: 18px 40px;
	background: rgba(14, 26, 24, .68);
	color: #fff;
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid rgba(255, 255, 255, .10);
	transition: background .4s ease;
}
.apv-hd.is-solid { background: rgba(14, 26, 24, .92); }
.apv-hd__logo { display: flex; align-items: center; flex-shrink: 0; }
.apv-hd__logo img { height: 34px; width: auto; display: block; }
.apv-nav { display: flex; align-items: center; gap: 28px; }
.apv-nav a {
	padding: 6px 0;
	border-bottom: 1px solid transparent;
	white-space: nowrap;
	font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
	color: rgba(255, 255, 255, .82);
	transition: color .25s ease, border-color .25s ease;
}
.apv-nav a:hover { color: #fff; border-bottom-color: #fff; }
.apv-hd__right { display: flex; align-items: center; gap: 18px; }
.apv-sns { display: flex; align-items: center; gap: 12px; }
.apv-sns a { display: flex; align-items: center; justify-content: center; color: #fff; opacity: .8; transition: opacity .25s ease; }
.apv-sns a:hover { opacity: 1; }
.apv-lang { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .12em; color: rgba(255, 255, 255, .55); }
.apv-lang a { transition: color .25s ease; }
.apv-lang a:hover { color: #fff; }
.apv-lang a.is-on { color: #fff; }
.apv-lang span { opacity: .4; }
.apv-hd__cta {
	padding: 11px 22px;
	border: 1px solid rgba(255, 255, 255, .45);
	color: #fff;
	font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
	white-space: nowrap;
	transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.apv-hd__cta:hover { background: #fff; color: var(--apv-ink); border-color: #fff; }

/* burger + drawer */
.apv-burger {
	display: none;
	width: 44px; height: 44px;
	padding: 0; margin: 0;
	border: 0; background: transparent; cursor: pointer;
	flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.apv-burger span { display: block; width: 22px; height: 1px; background: #fff; transition: transform .3s ease, opacity .3s ease; }
.apv-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.apv-burger.is-open span:nth-child(2) { opacity: 0; }
.apv-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.apv-drawer {
	position: fixed; inset: 0; z-index: 190;
	display: flex; flex-direction: column; justify-content: center;
	padding: calc(var(--apv-hd-h) + 40px) 32px 48px;
	background: var(--apv-deep);
	color: #fff;
	opacity: 0; visibility: hidden;
	transition: opacity .35s ease, visibility .35s ease;
	overflow-y: auto;
}
.apv-drawer.is-open { opacity: 1; visibility: visible; }
.apv-drawer nav { display: flex; flex-direction: column; gap: 4px; }
.apv-drawer nav a {
	padding: 16px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
	font-family: var(--apv-serif);
	font-size: 30px; letter-spacing: .04em;
}
.apv-drawer__foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 40px; }
.apv-drawer__foot .apv-lang { font-size: 13px; }
.apv-drawer__foot .apv-sns { gap: 18px; }

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */
.apv-hero {
	position: relative;
	min-height: 100vh;
	background: var(--apv-cream);
	display: grid; grid-template-columns: 1.05fr .95fr; align-items: center;
}
.apv-hero__text { padding: 150px 56px 96px 96px; }
.apv-eyebrow { display: flex; align-items: center; gap: 16px; margin-bottom: 34px; }
.apv-eyebrow i { display: block; width: 52px; height: 1px; background: rgba(20, 33, 31, .4); }
.apv-eyebrow span { font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: var(--apv-accent); font-style: normal; }
.apv-hero h1 {
	margin: 0;
	font-family: var(--apv-serif); font-weight: 300;
	font-size: clamp(40px, 5.2vw, 86px); line-height: 1.04; letter-spacing: -.01em;
}
.apv-hero h1 em { font-style: italic; font-weight: 300; color: var(--apv-accent); }
.apv-hero p { margin: 34px 0 0; max-width: 460px; font-size: 15px; line-height: 2.15; color: #4A5754; }
.apv-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 46px; }
.apv-hero__img { width: 100%; height: 100%; min-height: 640px; object-fit: cover; display: block; }

.apv-btn {
	display: inline-block;
	padding: 16px 32px;
	font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
	transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.apv-btn--dark { background: var(--apv-green); color: var(--apv-cream); }
.apv-btn--dark:hover { background: var(--apv-accent); color: #fff; }
.apv-btn--line { border: 1px solid rgba(20, 33, 31, .3); color: var(--apv-ink); }
.apv-btn--line:hover { border-color: var(--apv-accent); color: var(--apv-accent); }
.apv-btn--light { background: var(--apv-cream); color: var(--apv-green); }
.apv-btn--light:hover { background: var(--apv-accent-light); color: var(--apv-deep); }
.apv-btn--line-light { border: 1px solid rgba(255, 255, 255, .4); color: #fff; }
.apv-btn--line-light:hover { background: rgba(255, 255, 255, .1); }

/* ---------------------------------------------------------
   Quatre visages
   --------------------------------------------------------- */
.apv-quatre { background: var(--apv-green); }
.apv-quatre__grid { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1440px; margin: 0 auto; }
.apv-quatre__col {
	padding: 64px 40px;
	border-right: 1px solid rgba(255, 255, 255, .12);
	display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px;
}
.apv-quatre__col:last-child { border-right: 0; }
.apv-quatre__col img { height: 62px; width: auto; opacity: .9; }
.apv-quatre__col h3 { margin: 0; font-family: var(--apv-serif); font-weight: 400; font-size: 24px; letter-spacing: .06em; color: #fff; }
.apv-quatre__col p { margin: 0; max-width: 250px; font-size: 13px; line-height: 2; color: rgba(255, 255, 255, .6); }

/* ---------------------------------------------------------
   Section shell
   --------------------------------------------------------- */
.apv-sec { padding: 140px 40px; }
.apv-sec--cream { background: var(--apv-cream); }
.apv-sec--cream2 { background: var(--apv-cream-2); }
.apv-sec--deep { background: var(--apv-deep); color: #fff; }
.apv-label { font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--apv-accent); margin-bottom: 22px; }
.apv-sec--deep .apv-label { color: var(--apv-accent-light); }
.apv-h2 {
	margin: 0;
	font-family: var(--apv-serif); font-weight: 300;
	font-size: clamp(30px, 3.6vw, 56px); line-height: 1.14;
}
.apv-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 64px; }
.apv-sec-head p { margin: 0; max-width: 380px; font-size: 14px; line-height: 2.1; color: var(--apv-muted); }

/* ---------------------------------------------------------
   Maison / Chef
   --------------------------------------------------------- */
.apv-maison__inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: .85fr 1fr; gap: 96px; align-items: center; }
.apv-maison__fig { position: relative; margin: 0; }
.apv-maison__fig > img { width: 100%; height: auto; display: block; }
.apv-badges { position: absolute; right: -28px; bottom: -28px; display: flex; gap: 12px; background: var(--apv-cream); padding: 14px 16px; }
.apv-badges img { height: 56px; width: auto; }
.apv-maison h2 { margin: 0 0 32px; color: var(--apv-ink); }
.apv-rule { width: 44px; height: 1px; background: var(--apv-ink); opacity: .25; margin-bottom: 34px; }
.apv-maison__body { max-width: 520px; font-size: 15px; line-height: 2.15; color: var(--apv-body); white-space: pre-line; margin: 0 0 40px; }
.apv-stats { display: flex; flex-wrap: wrap; gap: 48px; padding-top: 34px; border-top: 1px solid rgba(20, 33, 31, .12); }
.apv-stats b { display: block; font-family: var(--apv-serif); font-weight: 400; font-size: 40px; line-height: 1; color: var(--apv-accent); }
.apv-stats span { display: block; margin-top: 10px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #7C8885; }

/* ---------------------------------------------------------
   Pâtisserie / carte
   --------------------------------------------------------- */
.apv-carte__inner { max-width: 1320px; margin: 0 auto; }
.apv-carte__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.apv-card { background: var(--apv-cream); transition: background .3s ease, transform .4s ease, box-shadow .4s ease; }
.apv-card:hover { background: #fff; transform: translateY(-6px); box-shadow: 0 18px 40px rgba(20, 33, 31, .08); }
.apv-card__thumb { display: block; width: 100%; aspect-ratio: 1 / 1.18; overflow: hidden; }
.apv-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s ease; }
.apv-card:hover .apv-card__thumb img { transform: scale(1.05); }
.apv-card__body { padding: 26px 24px 30px; }
.apv-card__fr { font-family: var(--apv-serif); font-size: 23px; line-height: 1.3; color: var(--apv-ink); }
.apv-card__kr { font-size: 12px; letter-spacing: .06em; color: var(--apv-accent); margin: 6px 0 14px; }
.apv-card__desc { margin: 0; font-size: 13px; line-height: 1.95; color: #68746F; }

/* ---------------------------------------------------------
   Salle
   --------------------------------------------------------- */
.apv-salle { padding: 130px 0 120px; }
.apv-salle__head { max-width: 1320px; margin: 0 auto 56px; padding: 0 40px; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.apv-arrows { display: flex; gap: 12px; }
.apv-arrows button {
	width: 52px; height: 52px;
	border: 1px solid rgba(255, 255, 255, .3);
	background: transparent; color: #fff; cursor: pointer; font-size: 16px;
	transition: background .25s ease, color .25s ease;
}
.apv-arrows button:hover { background: #fff; color: var(--apv-deep); }
.apv-rail {
	display: flex; gap: 20px;
	overflow-x: auto; scroll-behavior: smooth;
	padding: 0 40px 26px;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 40px;
	cursor: grab;
}
.apv-rail.is-drag { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.apv-rail img { -webkit-user-drag: none; user-select: none; }
.apv-rail img { height: 520px; width: auto; flex: 0 0 auto; scroll-snap-align: start; object-fit: cover; }
.apv-rail::-webkit-scrollbar { height: 2px; }
.apv-rail::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .35); }
.apv-rail::-webkit-scrollbar-track { background: rgba(255, 255, 255, .08); }
.apv-salle__note { max-width: 1320px; margin: 0 auto; padding: 34px 40px 0; }
.apv-salle__note p { margin: 0; max-width: 560px; font-size: 14px; line-height: 2.15; color: rgba(255, 255, 255, .6); }

/* ---------------------------------------------------------
   Trois visages
   --------------------------------------------------------- */
.apv-trois__inner { max-width: 1320px; margin: 0 auto; }
.apv-trois__head { text-align: center; margin-bottom: 70px; }
.apv-trois__head .apv-h2 { color: var(--apv-ink); }
.apv-trois__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.apv-trois__thumb { display: block; overflow: hidden; }
.apv-trois__thumb img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; transition: transform .8s ease; }
.apv-trois article:hover .apv-trois__thumb img { transform: scale(1.04); }
.apv-trois__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 26px 0 12px; }
.apv-trois__meta h3 { margin: 0; font-family: var(--apv-serif); font-weight: 400; font-size: 28px; color: var(--apv-ink); }
.apv-trois__meta span { font-size: 11px; letter-spacing: .16em; color: #9AA5A2; white-space: nowrap; }
.apv-trois p { margin: 0; font-size: 14px; line-height: 2.05; color: var(--apv-muted); }

/* ---------------------------------------------------------
   Equipe
   --------------------------------------------------------- */
.apv-equipe { background: var(--apv-green); color: #fff; }
.apv-equipe__inner { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.apv-equipe__text { padding: 120px 80px 120px 40px; display: flex; flex-direction: column; justify-content: center; }
.apv-equipe h2 { margin: 0 0 30px; font-size: clamp(28px, 3.2vw, 50px); }
.apv-equipe p { margin: 0 0 40px; max-width: 460px; font-size: 15px; line-height: 2.15; color: rgba(255, 255, 255, .68); }
.apv-equipe__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.apv-equipe__img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; display: block; }

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */
.apv-foot { background: var(--apv-deep); color: #fff; padding: 120px 40px 48px; }
.apv-foot__inner { max-width: 1320px; margin: 0 auto; }
.apv-foot__grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 64px; padding-bottom: 80px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.apv-foot__logo { height: 46px; width: auto; display: block; margin-bottom: 34px; }
.apv-foot__addr { margin: 0 0 10px; font-size: 15px; line-height: 1.9; color: rgba(255, 255, 255, .82); }
.apv-foot__ceo { margin: 0 0 28px; font-size: 13px; line-height: 1.9; color: rgba(255, 255, 255, .45); }
.apv-foot__tel { font-family: var(--apv-serif); font-size: 30px; letter-spacing: .04em; transition: color .25s ease; }
.apv-foot__tel:hover { color: var(--apv-accent-light); }
.apv-foot__ttl { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--apv-accent-light); margin-bottom: 26px; }
.apv-foot__list { display: flex; flex-direction: column; gap: 14px; font-size: 14px; color: rgba(255, 255, 255, .78); }
.apv-foot__list > div { display: flex; gap: 14px; }
.apv-foot__list > div > span:first-child { flex: 0 0 68px; }
.apv-foot__list > div span + span { color: rgba(255, 255, 255, .5); }
.apv-foot__list a { transition: color .25s ease; word-break: break-all; }
.apv-foot__list a:hover { color: var(--apv-accent-light); }
.apv-foot__note { margin: 26px 0 0; font-size: 12px; line-height: 1.9; color: rgba(255, 255, 255, .4); }
.apv-foot__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding-top: 34px; font-size: 11px; letter-spacing: .1em; color: rgba(255, 255, 255, .35); }

/* floating reserve */
.apv-float { position: fixed; right: 32px; bottom: 32px; z-index: 150; transition: opacity .3s ease, visibility .3s ease; }
.apv-float.is-hidden { opacity: 0; visibility: hidden; }
.apv-float a {
	display: inline-block;
	padding: 16px 26px;
	background: var(--apv-accent); color: #fff;
	font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
	box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
	transition: background .3s ease;
}
.apv-float a:hover { background: var(--apv-green); }

/* sub pages (gallery) sit under the fixed header */
body.apv .apv-main--sub { padding-top: var(--apv-hd-h); }

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width: 1280px) {
	.apv-hd { padding: 16px 24px; }
	.apv-nav { gap: 20px; }
	.apv-hd__right { gap: 14px; }
	.apv-hero__text { padding: 140px 40px 90px 48px; }
	.apv-maison__inner { gap: 56px; }
	.apv-badges { right: 0; bottom: -24px; }
}

@media (max-width: 1080px) {
	.apv-nav, .apv-hd__cta { display: none; }
	.apv-burger { display: flex; }
	.apv-hd__right { gap: 12px; }
	.apv-sec { padding: 100px 28px; }
	.apv-carte__grid { grid-template-columns: repeat(2, 1fr); }
	.apv-quatre__grid { grid-template-columns: repeat(2, 1fr); }
	.apv-quatre__col:nth-child(2) { border-right: 0; }
	.apv-quatre__col:nth-child(1), .apv-quatre__col:nth-child(2) { border-bottom: 1px solid rgba(255, 255, 255, .12); }
	.apv-trois__grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
	.apv-trois__meta { flex-direction: column; align-items: flex-start; gap: 4px; }
}

@media (max-width: 900px) {
	/* 가로 이동 애니메이션은 모바일에서 가로 스크롤을 만든다 */
	[data-aos="fade-right"], [data-aos="fade-left"] { transform: translate3d(0, 40px, 0) !important; }
	[data-aos="fade-right"].aos-animate, [data-aos="fade-left"].aos-animate { transform: translate3d(0, 0, 0) !important; }

	.apv-hero { grid-template-columns: 1fr; min-height: 0; }
	.apv-hero__text { padding: calc(var(--apv-hd-h) + 56px) 28px 56px; order: 2; }
	.apv-hero__img { min-height: 0; height: 58vh; order: 1; }
	.apv-hero p { max-width: none; }
	.apv-maison__inner { grid-template-columns: 1fr; gap: 64px; }
	.apv-badges { position: static; padding: 0; margin-top: 20px; background: transparent; }
	.apv-maison__body { max-width: none; }
	.apv-equipe__inner { grid-template-columns: 1fr; }
	.apv-equipe__text { padding: 80px 28px; order: 2; }
	.apv-equipe__img { order: 1; height: 52vh; min-height: 0; }
	.apv-equipe p { max-width: none; }
	.apv-salle { padding: 100px 0 90px; }
	.apv-salle__head { padding: 0 28px; margin-bottom: 36px; }
	.apv-rail { padding: 0 28px 22px; gap: 14px; scroll-padding-left: 28px; }
	.apv-rail img { height: 380px; }
	.apv-salle__note { padding: 26px 28px 0; }
	.apv-foot { padding: 90px 28px 40px; }
	.apv-foot__grid { grid-template-columns: 1fr 1fr; gap: 48px; padding-bottom: 56px; }
	.apv-foot__grid > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
	.apv-hd { padding: 12px 18px; --apv-hd-h: 62px; }
	.apv-hd__logo img { height: 26px; }
	.apv-sec { padding: 80px 20px; }
	.apv-sec-head { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 40px; }
	.apv-sec-head p { max-width: none; }
	.apv-hero__text { padding: 100px 20px 56px; }
	.apv-eyebrow { gap: 12px; margin-bottom: 26px; }
	.apv-eyebrow i { width: 28px; }
	.apv-eyebrow span { font-size: 10px; letter-spacing: .22em; }
	.apv-hero__img { height: 46vh; }
	.apv-hero__cta { margin-top: 34px; gap: 10px; }
	.apv-btn { padding: 14px 22px; font-size: 11px; }
	.apv-quatre__grid { grid-template-columns: 1fr; }
	.apv-quatre__col { padding: 40px 24px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
	.apv-quatre__col:last-child { border-bottom: 0; }
	.apv-quatre__col p { max-width: none; font-size: 13.5px; }
	.apv-carte__grid { grid-template-columns: 1fr; gap: 20px; }
	.apv-card__thumb { aspect-ratio: 4 / 3; }
	.apv-card__body { padding: 22px 20px 26px; }
	.apv-card__fr { font-size: 21px; }
	.apv-card__kr { font-size: 12.5px; }
	.apv-card__desc { font-size: 13.5px; }
	.apv-stats { gap: 28px; }
	.apv-stats b { font-size: 30px; }
	.apv-trois__grid { grid-template-columns: 1fr; gap: 40px; }
	.apv-trois__thumb img { aspect-ratio: 4 / 3; }
	.apv-rail img { height: 300px; }
	.apv-arrows button { width: 44px; height: 44px; }
	.apv-foot { padding: 70px 20px 36px; }
	.apv-foot__grid { grid-template-columns: 1fr; gap: 44px; }
	.apv-foot__bar { flex-direction: column; align-items: flex-start; gap: 10px; line-height: 1.7; }
	.apv-float { right: 16px; bottom: 16px; }
	.apv-float a { padding: 13px 18px; font-size: 11px; }
	.apv-drawer nav a { font-size: 24px; padding: 13px 0; }
}