:root {
  --ink: #0b0b0a;
  --coal: #171716;
  --steel: #85857e;
  --paper: #e8e5dc;
  --cream: #f4f0e6;
  --rust: #c84b27;
  --yellow: #e6b72e;
  --line: rgba(11,11,10,.22);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Pretendard,"Noto Sans KR",Arial,sans-serif; }
a { color: inherit; text-decoration: none; }
img,video { display: block; width: 100%; }
h1,h2,h3,p,figure { margin-top: 0; }

header { position: fixed; inset: 0 0 auto; z-index: 50; height: 76px; padding: 0 3vw; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: #fff; background: linear-gradient(#000b,transparent); }
.logo { display: flex; align-items: center; gap: 10px; width: max-content; }
.logo>span { display: grid; place-items: center; width: 31px; height: 31px; background: var(--rust); color: #fff; font-size: 16px; transform: rotate(45deg); }
.logo>span::first-letter { transform: rotate(-45deg); }
.logo b { font-size: 16px; letter-spacing: -.04em; }
.logo small { padding-left: 10px; border-left: 1px solid #ffffff55; font-size: 10px; letter-spacing: .15em; color: #ddd; }
nav { display: flex; gap: 25px; font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.topcall { justify-self: end; padding-bottom: 5px; border-bottom: 2px solid var(--yellow); font-size: 15px; font-weight: 900; }

.hero { position: relative; min-height: 100svh; background: #080808; color: #fff; overflow: hidden; }
.hero-photo { position: absolute; inset: 0; margin: 0; }
.hero-photo::after { content:""; position:absolute; inset:0; background: linear-gradient(90deg,#080808ed 0%,#080808a8 43%,#08080825 78%),linear-gradient(0deg,#080808d9 0%,transparent 45%); }
.hero-photo img { height: 100%; object-fit: cover; filter: saturate(.58) contrast(1.12); }
.hero-photo figcaption { position: absolute; z-index: 2; right: 3vw; bottom: 35px; display: flex; align-items: baseline; gap: 14px; font-size: 11px; letter-spacing: .16em; }
.hero-photo figcaption b { font-size: 38px; color: var(--yellow); }
.hero-copy { position: relative; z-index: 3; width: min(820px,80vw); min-height: 100svh; padding: 18vh 3vw 80px; display: flex; flex-direction: column; justify-content: center; }
.issue,.section-title>span,.split span,.place span,.local-hero span,.note-hero>span,.note-grid article>span { font-size: 11px; font-weight: 900; letter-spacing: .22em; text-transform: uppercase; color: var(--rust); }
.hero .issue { color: var(--yellow); }
.hero h1 { margin: 25px 0 35px; font-size: clamp(68px,9.2vw,145px); line-height: .82; letter-spacing: -.09em; font-weight: 900; }
.hero h1 em { display: block; margin-top: .08em; font-style: normal; color: var(--yellow); -webkit-text-stroke: 0; text-shadow: 0 4px 24px #000; }
.hero p { max-width: 630px; padding-left: 24px; border-left: 3px solid var(--rust); font-size: 16px; line-height: 1.8; color: #d1d1ce; }
.actions { display: flex; gap: 0; margin-top: 35px; }
.actions a,.primary { min-width: 165px; padding: 17px 22px; border: 1px solid #ffffff55; font-size: 13px; font-weight: 900; text-align: center; }
.actions .primary,.primary { background: var(--rust); border-color: var(--rust); color: #fff; }
.ticker { display: grid; grid-template-columns: repeat(4,1fr); background: var(--yellow); color: var(--ink); border-bottom: 1px solid #000; }
.ticker span { padding: 16px 3vw; border-right: 1px solid #000; font-size: 12px; font-weight: 900; letter-spacing: .04em; }

.section { padding: 115px 5vw; }
.section-title { display: grid; grid-template-columns: 110px minmax(300px,1fr) minmax(260px,.7fr); gap: 28px; align-items: start; margin-bottom: 60px; }
.section-title h2 { margin: -10px 0 0; font-size: clamp(45px,6vw,90px); line-height: .9; letter-spacing: -.075em; }
.section-title p { max-width: 520px; font-size: 15px; line-height: 1.75; color: #41413d; }
.service-grid { border-top: 3px solid var(--ink); }
.service-grid article { display: grid; grid-template-columns: 90px minmax(190px,.55fr) 1fr; align-items: center; min-height: 130px; border-bottom: 1px solid var(--line); transition: padding .2s,background .2s,color .2s; }
.service-grid article:hover { padding-left: 18px; background: var(--ink); color: #fff; }
.service-grid i { font-style: normal; font: 900 38px/1 Arial,sans-serif; color: var(--rust); }
.service-grid h3 { margin: 0; font-size: clamp(26px,3vw,43px); letter-spacing: -.06em; }
.service-grid p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--steel); }

.split { min-height: 780px; display: grid; grid-template-columns: 58% 42%; background: var(--coal); color: #fff; }
.split img { height: 100%; object-fit: cover; filter: grayscale(.75); }
.split>div { padding: 9vw 5vw; display: flex; flex-direction: column; justify-content: center; }
.split h2 { margin: 25px 0 35px; font-size: clamp(43px,5vw,76px); line-height: .98; letter-spacing: -.07em; }
.split p,.split li { font-size: 15px; line-height: 1.85; color: #bebebb; }
.split ul { padding-left: 20px; border-top: 1px solid #ffffff30; padding-top: 25px; }

.dark { background: #080808; color: #fff; }
.dark .section-title p { color: #aaa; }
.movies { display: grid; grid-template-columns: 1.35fr .7fr; grid-template-rows: 330px 330px; gap: 12px; }
.movies video { height: 100%; object-fit: cover; background: #111; border: 1px solid #ffffff24; }
.movies video:first-child { grid-row: 1 / 3; }
.gallery { background: var(--cream); }
.photo-grid { display: grid; grid-template-columns: 1.15fr .85fr 1fr; grid-auto-rows: 270px; gap: 18px; }
.photo-grid figure { position: relative; margin: 0; overflow: hidden; background:#222; }
.photo-grid figure:nth-child(1),.photo-grid figure:nth-child(5) { grid-row: span 2; }
.photo-grid img { height: 100%; object-fit: cover; filter: saturate(.72); transition: transform .5s,filter .5s; }
.photo-grid figure:hover img { transform: scale(1.035); filter: saturate(1); }
.photo-grid figcaption { position: absolute; left: 0; bottom: 0; padding: 12px 14px; background: #080808d9; color: #fff; font-size: 11px; letter-spacing: .1em; }

.area { background: #d8d5cc; }
.area-grid { columns: 4; column-gap: 0; border-top: 3px solid var(--ink); }
.area-grid a { break-inside: avoid; display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 14px 10px; border-bottom: 1px solid var(--line); font-size: 13px; }
.area-grid a::after { content:"↗"; color: var(--rust); }
.area-grid b { font-size: 15px; }
.area-grid span { display: none; }
.area-grid a:hover { background: var(--yellow); }
.place { margin: 0; padding: 60px 5vw; display: grid; grid-template-columns: 1fr auto; align-items: end; background: var(--rust); color: #fff; }
.place h2 { margin: 12px 0; font-size: clamp(38px,5vw,70px); letter-spacing: -.06em; }
.place p { margin: 0; color: #f1cfc5; }
.place a { padding: 16px 24px; border: 1px solid #fff; font-weight: 900; }

.place-info { margin: 0; padding: 105px 5vw; background: #10100f; color: #fff; }
.place-info-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 25px; border-bottom: 3px solid #fff; padding-bottom: 35px; }
.place-info-head span { color: var(--yellow); font-size: 11px; letter-spacing: .18em; }
.place-info-head h2 { margin: 12px 0; font-size: clamp(36px,5vw,68px); letter-spacing: -.06em; }
.place-info-head p { margin: 0; color: #aaa; }
.place-info-head>a { padding: 14px 20px; border: 1px solid #777; font-weight: 900; }
.place-stats { display: grid; grid-template-columns: repeat(4,1fr); border-bottom: 1px solid #444; }
.place-stats>div { padding: 35px 18px; border-right: 1px solid #444; }
.place-stats strong { display: block; font-size: clamp(28px,3vw,46px); color: var(--yellow); }
.place-stats span { color: #999; font-size: 12px; }
.place-links { display: grid; grid-template-columns: repeat(4,1fr); }
.place-links a { padding: 26px 18px; border-right: 1px solid #444; border-bottom: 1px solid #444; }
.place-links b,.place-links span { display:block; }
.place-links span { margin-top:8px; color:#888; font-size:12px; }
.place-info>small { display:block; margin-top:25px; color:#777; }
footer { padding: 65px 5vw; display:flex; justify-content:space-between; align-items:center; background:#050505; color:#fff; border-top:1px solid #333; }
footer p { color:#888; }
footer>a { color:var(--yellow); font-size:28px; font-weight:900; }
.float { display:none; }

.local-hero { position:relative; min-height:760px; padding:150px 5vw 90px; display:flex; align-items:flex-end; background:#090909; color:#fff; overflow:hidden; }
.local-hero>div { position:relative; z-index:2; width:min(850px,78vw); }
.local-hero img { position:absolute; inset:0; height:100%; object-fit:cover; opacity:.48; filter:grayscale(.5); }
.local-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#050505e8,transparent 75%),linear-gradient(0deg,#050505d8,transparent 60%); }
.local-hero h1 { margin:25px 0; font-size:clamp(75px,12vw,170px); line-height:.78; letter-spacing:-.09em; }
.local-hero h1 em { font-style:normal; color:var(--yellow); }
.local-hero p { max-width:650px; color:#ccc; line-height:1.8; }
.local-hero .primary { display:inline-block; margin-top:20px; }
.local-work { background:var(--cream); }
.local-gallery { display:grid; grid-template-columns:1.2fr .8fr; grid-template-rows:310px 310px; gap:14px; }
.local-gallery figure { position:relative; margin:0; overflow:hidden; background:#111; }
.local-gallery figure:first-child { grid-row:1 / 3; }
.local-gallery img { height:100%; object-fit:cover; filter:saturate(.72); transition:transform .45s,filter .45s; }
.local-gallery figure:hover img { transform:scale(1.035); filter:saturate(1); }
.local-gallery figcaption { position:absolute; left:0; bottom:0; padding:12px 15px; background:#080808df; color:#fff; font-size:12px; letter-spacing:.08em; }
.note-hero { padding:170px 5vw 70px; background:var(--ink); color:#fff; }
.note-hero h1 { margin:20px 0; font-size:clamp(70px,11vw,160px); letter-spacing:-.09em; }
.note-hero p { max-width:650px; color:#aaa; font-size:18px; }
.note-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:80px 25px; }
.note-grid article:nth-child(even) { margin-top:120px; }
.note-grid img { height:480px; object-fit:cover; margin-bottom:20px; filter:saturate(.7); }
.note-grid h2 { margin:10px 0; font-size:36px; }
.note-grid p { color:#555; line-height:1.7; }

@media (max-width:800px) {
  body { padding-bottom:78px; }
  header { position:absolute; height:68px; padding:0 18px; grid-template-columns:1fr auto; }
  .logo small,nav { display:none; }
  .topcall { font-size:13px; }
  .hero-copy { width:100%; min-height:100svh; padding:130px 20px 90px; justify-content:flex-end; }
  .hero-photo::after { background:linear-gradient(0deg,#070707fa 3%,#0707078c 64%,#07070730); }
  .hero-photo figcaption { right:18px; bottom:20px; opacity:.65; }
  .hero h1 { font-size:clamp(52px,16vw,74px); line-height:.88; }
  .hero h1 em { color:#ffd233; text-shadow:0 3px 16px #000; }
  .hero p { font-size:14px; line-height:1.65; }
  .actions a { min-width:0; flex:1; padding:15px 10px; }
  .ticker { grid-template-columns:1fr 1fr; }
  .ticker span { padding:13px 18px; border-bottom:1px solid #000; }
  .section { padding:80px 20px; }
  .section-title { display:block; margin-bottom:40px; }
  .section-title h2 { margin-top:15px; font-size:48px; }
  .section-title p { margin-top:22px; }
  .service-grid article { grid-template-columns:52px 1fr; min-height:105px; }
  .service-grid i { font-size:24px; }
  .service-grid h3 { font-size:27px; }
  .service-grid p { grid-column:2; margin:-18px 0 18px; font-size:13px; }
  .split { min-height:0; display:flex; flex-direction:column; }
  .split img { height:470px; }
  .split>div { padding:70px 20px; }
  .split h2 { font-size:45px; }
  .movies { display:flex; flex-direction:column; }
  .movies video { width:100%; height:auto; aspect-ratio:9/16; }
  .photo-grid { grid-template-columns:1fr 1fr; grid-auto-rows:250px; gap:8px; }
  .photo-grid figure:nth-child(1),.photo-grid figure:nth-child(5) { grid-row:span 2; }
  .photo-grid figure:nth-child(5) { grid-column:2; }
  .area-grid { columns:2; }
  .place { padding:55px 20px; display:block; }
  .place a { display:inline-block; margin-top:25px; }
  .place-info { padding:75px 20px; }
  .place-info-head { display:block; }
  .place-info-head>a { display:inline-block; margin-top:25px; }
  .place-stats { grid-template-columns:1fr 1fr; }
  .place-stats>div:nth-child(2) { border-right:0; }
  .place-links { grid-template-columns:1fr 1fr; }
  .place-links a:nth-child(2) { border-right:0; }
  footer { display:block; padding:50px 20px; }
  footer>a { display:block; margin-top:25px; font-size:22px; }
  .float { position:fixed; z-index:80; left:10px; right:10px; bottom:10px; display:flex; justify-content:space-between; align-items:center; padding:14px 18px; background:var(--yellow); color:#090909; box-shadow:0 12px 35px #0008; }
  .local-hero { min-height:100svh; padding:130px 20px 95px; }
  .local-hero>div { width:100%; }
  .local-hero h1 { font-size:clamp(68px,21vw,105px); }
  .local-gallery { display:flex; flex-direction:column; }
  .local-gallery figure { height:330px; }
  .local-gallery figure:first-child { height:470px; }
  .note-hero { padding:130px 20px 60px; }
  .note-grid { grid-template-columns:1fr; }
  .note-grid article:nth-child(even) { margin-top:0; }
  .note-grid img { height:390px; }
}