/* ---------- Font: Paperlogy ---------- */
@font-face{
  font-family:'Paperlogy';
  font-weight:400;
  font-style:normal;
  font-display:swap;
  src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2');
}
@font-face{
  font-family:'Paperlogy';
  font-weight:600;
  font-style:normal;
  font-display:swap;
  src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2');
}
@font-face{
  font-family:'Paperlogy';
  font-weight:800;
  font-style:normal;
  font-display:swap;
  src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');
}

/* ---------- Tokens ---------- */
:root{
  --font:'Paperlogy','Apple SD Gothic Neo','Pretendard','Malgun Gothic',system-ui,sans-serif;

  --bg:#0a0a0b;
  --bg-card:#111113;
  --bg-card-hover:#141417;
  --ink:#f4f3f1;        /* 큰 제목·서비스 이름 전용 */
  --ink-soft:#cfcec9;   /* 강조 본문·링크 */
  --ink-body:#b9b8b3;   /* 본문·설명 */
  --ink-mute:#8a8a86;   /* 라벨 */
  --ink-faint:#5a5a57;
  --line:rgba(244,243,241,.10);
  --line-strong:rgba(244,243,241,.22);
  --line-section:rgba(244,243,241,.07);

  /* 주요 버튼·강조 색. 브랜드 색이 정해지면 이 값만 바꾸면 됩니다. */
  --accent:#f4f3f1;
  --accent-ink:#0a0a0b;

  --container:1240px;
  --gutter:clamp(20px, 5vw, 64px);
  --easing:cubic-bezier(.2,.7,.2,1);
  --radius:10px;
  --grid-size:64px;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{
  background:var(--bg);
  scroll-behavior:smooth;
}
body{
  color:var(--ink-body);
  font-family:var(--font);
  font-size:17px;
  line-height:1.7;
  letter-spacing:-0.005em;
  word-break:keep-all;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; height:auto; }
h1,h2,h3,p,dl,dd,ul{ margin:0; }
ul{ padding:0; list-style:none; }
button{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:4px; }

/* 배경 모눈: 화면에 고정된 한 장의 레이어라 스크롤 시 다시 그리지 않음 */
body::before{
  content:"";
  position:fixed; inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(244,243,241,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(244,243,241,.04) 1px, transparent 1px);
  background-size:var(--grid-size) var(--grid-size);
  background-position:center top;
  -webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 45%, #000 0%, rgba(0,0,0,.45) 55%, transparent 90%);
  mask-image:radial-gradient(ellipse 75% 65% at 50% 45%, #000 0%, rgba(0,0,0,.45) 55%, transparent 90%);
}
/* 필름 입자감: SVG 노이즈를 data URI로, 고정 레이어 */
body::after{
  content:"";
  position:fixed; inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

.wrap{
  max-width:var(--container);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

/* ---------- Reveal ---------- */
.js .reveal{
  opacity:0;
  transform:translateY(18px);
}
.js .reveal.in{
  animation:rise .9s var(--easing) forwards;
  animation-delay:var(--d, 0s);
}
@keyframes rise{
  to{ opacity:1; transform:translateY(0); }
}

/* ---------- Labels (공통) ---------- */
.label,
.fact dt,
.contact-foot,
.p-no,
.status,
.hero-scroll,
.hero-side{
  font-family:var(--font);
  font-weight:600;
  font-size:12px;
  letter-spacing:.08em;
  color:var(--ink-mute);
}
.label{ margin-bottom:22px; }
.label--words,
.label--num{
  display:flex; flex-wrap:wrap;
}
.label--words{ gap:6px 20px; }
.label--num{ gap:14px; }

/* ---------- Nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  border-bottom:1px solid transparent;
  transition:background .3s var(--easing), border-color .3s var(--easing);
}
.nav.scrolled{
  background:rgba(10,10,11,.82);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom-color:var(--line-section);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  height:72px;
}
/* 로고 PNG의 투명 여백이 커서(글자 영역: x 108–625, y 109–235 / 707×353) 글자 부분만 잘라 보여줌 */
.logo-crop{
  --h:24px;
  display:block;
  position:relative;
  overflow:hidden;
  height:var(--h);
  width:calc(var(--h) * 517 / 126);
}
.logo-crop img{
  position:absolute;
  max-width:none;
  height:calc(var(--h) * 353 / 126);
  width:auto;
  left:calc(var(--h) * -108 / 126);
  top:calc(var(--h) * -109 / 126);
}
.nav-right{
  display:flex; align-items:center;
  gap:clamp(16px, 3vw, 40px);
}
.menu{
  display:flex; align-items:center; gap:clamp(16px, 2.6vw, 36px);
}
.menu a{
  font-size:15px;
  font-weight:600;
  color:var(--ink-soft);
  padding:6px 0;
  position:relative;
  white-space:nowrap;
  transition:color .25s var(--easing);
}
.menu a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0;
  height:1px; background:var(--ink);
  transition:right .35s var(--easing);
}
.menu a:hover{ color:var(--ink); }
.menu a:hover::after{ right:0; }
.nav-cta{
  display:inline-flex; align-items:center;
  white-space:nowrap;
  font-size:14px;
  font-weight:600;
  line-height:1;
  padding:11px 18px;
  border-radius:999px;
  background:var(--accent);
  color:var(--accent-ink);
  transition:opacity .25s var(--easing), transform .25s var(--easing);
}
.nav-cta:hover{ opacity:.9; transform:translateY(-1px); }

/* ---------- Sections ---------- */
.section{
  position:relative;
  padding:clamp(120px, 16vw, 216px) 0;
  border-top:1px solid var(--line-section);
  scroll-margin-top:24px;
}
/* 섹션 경계의 옅은 항로 곡선 */
.section::before{
  content:"";
  position:absolute;
  left:0; right:0; top:-80px;
  height:160px;
  z-index:-1;
  pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'%3E%3Cpath d='M-20 138 C 380 18, 920 8, 1460 98' fill='none' stroke='rgba(244,243,241,0.075)' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M260 168 C 640 74, 1060 58, 1460 34' fill='none' stroke='rgba(244,243,241,0.045)' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
#about::before{ transform:scaleX(-1); }
.section-head{
  display:grid;
  grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr);
  gap:28px clamp(40px, 6vw, 96px);
  align-items:end;
  margin-bottom:clamp(40px, 5vw, 64px);
}
.section-title{
  font-weight:800;
  font-size:clamp(28px, 3.8vw, 48px);
  line-height:1.18;
  letter-spacing:-0.025em;
  color:var(--ink);
  text-wrap:balance;
}
.section-desc{
  font-size:clamp(16px, 1.3vw, 18px);
  line-height:1.8;
  color:var(--ink-body);
  max-width:30em;
}

/* ---------- Buttons ---------- */
.btn-primary,
.btn-go{
  display:inline-flex; align-items:center; gap:8px;
  white-space:nowrap;
  background:var(--accent);
  color:var(--accent-ink);
  font-weight:600;
  font-size:16px;
  line-height:1;
  padding:16px 26px;
  border-radius:999px;
  transition:transform .25s var(--easing), opacity .25s var(--easing);
}
.btn-go{ font-size:15px; padding:14px 22px; }
.btn-primary:hover,
.btn-go:hover{ transform:translateY(-2px); opacity:.92; }
.link-underline{
  white-space:nowrap;
  font-weight:600;
  font-size:15px;
  color:var(--ink-soft);
  padding-bottom:3px;
  border-bottom:1px solid var(--ink-faint);
  transition:color .25s var(--easing), border-color .25s var(--easing);
}
.link-underline:hover{ color:var(--ink); border-bottom-color:var(--ink); }
.hero .link-underline{ font-size:16px; }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  overflow:clip;
  min-height:100svh;
  display:flex; align-items:center;
  padding:140px 0 140px;
}
/* 오른쪽 위에서 번지는 아주 옅은 빛 */
.hero::before{
  content:"";
  position:absolute;
  top:-25%; right:-15%;
  width:80%; height:105%;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(closest-side, rgba(244,243,241,.075), rgba(244,243,241,.025) 50%, transparent 100%);
}
.hero .wrap{ width:100%; }
.hero-title{
  font-weight:800;
  font-size:clamp(36px, 9.5vw, 120px);
  line-height:1.12;
  letter-spacing:-0.03em;
  color:var(--ink);
}
.hero-title > span{
  display:block;
  text-wrap:balance;
}
.hero-desc{
  margin-top:clamp(28px, 3.5vw, 44px);
  max-width:34em;
  font-size:clamp(16px, 1.35vw, 19px);
  line-height:1.8;
  color:var(--ink-body);
}
.hero-actions{
  margin-top:clamp(36px, 4.5vw, 56px);
  display:flex; align-items:center; flex-wrap:wrap;
  gap:20px 32px;
}
.hero-scroll{
  position:absolute;
  left:50%; bottom:36px;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:12px;
  font-size:11px;
  letter-spacing:.14em;
  padding-left:.14em;
}
.hero-scroll i{
  position:relative;
  display:block;
  width:1px; height:44px;
  background:var(--line-strong);
  overflow:hidden;
}
.hero-scroll i::after{
  content:"";
  position:absolute; left:0; top:0;
  width:1px; height:40%;
  background:var(--ink);
  animation:scrollLine 2.4s var(--easing) infinite;
}
@keyframes scrollLine{
  0%{ transform:translateY(-100%); }
  100%{ transform:translateY(260%); }
}
.hero-side{
  position:absolute;
  right:calc(var(--gutter) * .5);
  bottom:36px;
  writing-mode:vertical-rl;
  font-size:11px;
  letter-spacing:.16em;
  color:var(--ink-faint);
}

/* ---------- Products slider ---------- */
.section-side{ align-self:end; }
.slider-ui{
  margin-top:28px;
  display:flex; align-items:center; justify-content:flex-end;
  gap:20px;
  max-width:30em;
}
/* 위치 진행 막대 */
.slider-progress{
  position:relative;
  width:clamp(88px, 10vw, 140px);
  height:2px;
  border-radius:2px;
  background:var(--line);
  overflow:hidden;
}
.slider-progress-fill{
  position:absolute; inset:0;
  background:var(--ink-soft);
  transform-origin:left center;
  transform:scaleX(0);
  transition:transform .18s linear;
}
.slider-arrows{ display:flex; gap:10px; }
.arrow-btn{
  width:48px; height:48px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  border:1px solid var(--line-strong);
  background:transparent;
  color:var(--ink-soft);
  font-size:18px;
  line-height:1;
  cursor:pointer;
  transition:background .25s var(--easing), color .25s var(--easing), border-color .25s var(--easing), opacity .25s var(--easing);
}
.arrow-btn:hover:not(:disabled){
  background:var(--accent);
  color:var(--accent-ink);
  border-color:var(--accent);
}
.arrow-btn:disabled{ opacity:.3; cursor:default; }

.slider{
  --edge:max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  --gap:16px;
  position:relative;
  display:flex;
  align-items:stretch;
  gap:var(--gap);
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--edge);
  padding:8px var(--edge) 28px;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
}
.slider::-webkit-scrollbar{ display:none; }
.slider:focus-visible{ outline-offset:-2px; border-radius:0; }
@media (pointer:fine){
  .slider{ cursor:grab; }
}
.slider.dragging{
  cursor:grabbing;
  scroll-snap-type:none;
  user-select:none;
  -webkit-user-select:none;
}
.slider.dragging a{ pointer-events:none; }

.p-card{
  --svc:var(--ink-mute);
  --svc-2:var(--svc);
  --svc-line:var(--svc);
  --svc-text:color-mix(in srgb, var(--svc) 55%, var(--ink));
  position:relative;
  isolation:isolate;
  flex:0 0 352px;
  scroll-snap-align:start;
  display:flex; flex-direction:column;
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  transition:border-color .3s var(--easing), transform .3s var(--easing), box-shadow .3s var(--easing);
}
/* 마우스를 올리면 서비스 색이 테두리와 배경에 스며듦 */
.p-card::before{
  content:"";
  position:absolute; inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(120% 90% at 100% 100%, color-mix(in srgb, var(--svc-2) 13%, transparent) 0%, transparent 70%),
    radial-gradient(110% 80% at 0% 100%, color-mix(in srgb, var(--svc) 10%, transparent) 0%, transparent 70%);
  transition:opacity .3s var(--easing);
}
@media (hover:hover) and (pointer:fine){
  .p-card:hover{
    transform:translateY(-3px);
    border-color:color-mix(in srgb, var(--svc) 48%, transparent);
    box-shadow:0 14px 36px -22px color-mix(in srgb, var(--svc) 55%, transparent);
  }
  .p-card:hover::before{ opacity:1; }
  .p-card:hover .p-media img{ transform:scale(1.03); filter:brightness(.95) saturate(1); }
  .p-card:hover .p-media--contain img{ filter:none; }
  .p-card:hover .p-media::before{ opacity:1; }
}
.p-card:has(:focus-visible){
  border-color:color-mix(in srgb, var(--svc) 48%, transparent);
}
.p-card:has(:focus-visible)::before{ opacity:1; }
.p-card--gradient{
  --svc-line:linear-gradient(90deg, var(--svc), var(--svc-2));
}

/* 이미지 띠: 이미지가 없으면 서비스 색 위에 큰 이름을 잘라 배치(타이포 포스터) */
.p-media{
  position:relative;
  container-type:inline-size;
  aspect-ratio:3 / 1;
  overflow:hidden;
  background:
    radial-gradient(110% 120% at 100% 0%, color-mix(in srgb, var(--svc) 30%, transparent) 0%, transparent 65%),
    radial-gradient(80% 90% at 0% 100%, color-mix(in srgb, var(--svc) 12%, transparent) 0%, transparent 70%),
    #121215;
  border-bottom:1px solid var(--line);
}
.p-media::after{
  content:"";
  position:absolute; top:0; left:0; right:0;
  height:2px;
  background:var(--svc-line);
  opacity:.85;
}
.p-card--gradient .p-media{
  background:
    radial-gradient(100% 120% at 100% 0%, color-mix(in srgb, var(--svc-2) 26%, transparent) 0%, transparent 62%),
    radial-gradient(90% 110% at 45% 0%, color-mix(in srgb, var(--svc) 20%, transparent) 0%, transparent 65%),
    #121215;
}
.p-media-name{
  position:absolute;
  left:5cqi;
  bottom:-0.2em;
  font-weight:800;
  font-size:21cqi;
  line-height:1;
  letter-spacing:-0.045em;
  white-space:nowrap;
  color:var(--ink);
  pointer-events:none;
}
.p-media:has(img) .p-media-name{ display:none; }
/* 사진: 띠를 꽉 채우고, 어두운 화면에 맞게 살짝 낮춘 밝기 */
.p-media img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter:brightness(.86) saturate(.92);
  transform-origin:50% 50%;
  transition:transform .3s var(--easing), filter .3s var(--easing);
  -webkit-user-drag:none;
}
/* 마우스를 올리면 사진 위에도 서비스 색이 옅게 번짐 */
.p-media::before{
  content:"";
  position:absolute; inset:0;
  z-index:1;
  pointer-events:none;
  opacity:0;
  background:
    linear-gradient(to top, color-mix(in srgb, var(--svc-2) 30%, transparent), transparent 75%),
    color-mix(in srgb, var(--svc) 12%, transparent);
  mix-blend-mode:screen;
  transition:opacity .3s var(--easing);
}
.p-media::after{ z-index:2; }
/* NightOff 썸네일: 전체가 보이도록 담고, 하단의 얇은 선(2px)만 잘라냄 */
.p-media--contain{ background:#fbf9ff; }
.p-media--contain img{
  object-fit:contain;
  clip-path:inset(0 0 1% 0);
  filter:none;
}
.p-media--contain::before{ display:none; }

.p-body{
  flex:1;
  display:flex; flex-direction:column;
  padding:18px 20px 20px;
}
.p-meta{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:10px;
}
.p-label{
  display:flex; flex-wrap:wrap;
  gap:3px 10px;
}
.p-no{ font-size:11px; }
.p-field{
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--svc-text);
}
.p-card--gradient .p-field{
  background:linear-gradient(90deg, color-mix(in srgb, var(--svc) 60%, var(--ink)), color-mix(in srgb, var(--svc-2) 60%, var(--ink)));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.status{
  flex:none;
  display:inline-flex; align-items:center; gap:7px;
  font-size:11.5px;
  letter-spacing:.02em;
  line-height:1.4;
  white-space:nowrap;
}
.status::before{
  content:"";
  width:5px; height:5px; border-radius:50%;
  background:var(--ink-faint);
}
.status--live{ color:var(--ink-soft); }
.status--live::before{
  background:var(--ink);
  box-shadow:0 0 0 3px rgba(244,243,241,.10);
}
.p-name{
  margin-top:12px;
  font-weight:800;
  font-size:22px;
  line-height:1.25;
  letter-spacing:-0.025em;
  color:var(--ink);
  overflow-wrap:normal;
}
.p-desc{
  margin-top:8px;
  font-size:14px;
  line-height:1.65;
  color:var(--ink-body);
}
.p-tags{
  margin-top:14px;
  display:flex; flex-wrap:wrap; gap:6px;
}
.p-tags li{
  font-size:11.5px;
  font-weight:600;
  line-height:1;
  padding:5px 8px;
  border-radius:3px;
  border:1px solid var(--line);
  color:var(--ink-body);
}
.p-foot{
  margin-top:auto;
  padding-top:16px;
}
.p-url{
  display:block;
  padding-top:12px;
  border-top:1px solid var(--line);
  font-size:13px;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--ink-soft);
  transition:color .25s var(--easing);
}
a.p-url:hover{ color:var(--ink); }
.p-url--soon{ color:var(--ink-faint); }
.p-actions{
  margin-top:12px;
  display:flex; align-items:center; flex-wrap:wrap;
  gap:10px 16px;
}
.p-actions .btn-go{ font-size:13px; padding:9px 14px; gap:6px; }
.p-actions .link-underline{ font-size:13px; padding-bottom:2px; }

/* ---------- About ---------- */
.facts{ border-bottom:1px solid var(--line); }
.fact{
  display:grid;
  grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr);
  gap:8px clamp(40px, 6vw, 96px);
  padding:24px 0;
  border-top:1px solid var(--line);
}
.fact dt{ padding-top:5px; }
.fact dd{
  font-size:17px;
  font-weight:600;
  color:var(--ink-soft);
}
.fact-items{
  display:flex; flex-wrap:wrap;
  gap:6px 24px;
}

/* ---------- Contact ---------- */
.contacts{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:20px;
}
.contact-card{
  display:flex; flex-direction:column;
  min-height:168px;
  padding:22px 24px;
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  transition:transform .35s var(--easing), border-color .35s var(--easing), background .35s var(--easing), opacity .35s var(--easing);
}
.contact-card:hover{
  transform:translateY(-3px);
  border-color:var(--line-strong);
  background:var(--bg-card-hover);
}
.contact-card--primary{
  background:var(--accent);
  color:var(--accent-ink);
  border-color:var(--accent);
}
.contact-card--primary:hover{
  background:var(--accent);
  border-color:var(--accent);
  opacity:.94;
}
.contact-title{
  font-weight:800;
  font-size:22px;
  letter-spacing:-0.02em;
  line-height:1.25;
  color:var(--ink);
}
.contact-card--primary .contact-title{ color:var(--accent-ink); }
.contact-desc{
  margin-top:8px;
  font-size:14px;
  color:var(--ink-body);
}
.contact-card--primary .contact-desc{ color:rgba(10,10,11,.68); }
.contact-foot{
  margin-top:auto;
  padding-top:28px;
  display:flex; align-items:center; justify-content:space-between;
}
.contact-foot span{
  font-size:16px;
  letter-spacing:0;
  color:var(--ink-soft);
  transition:transform .35s var(--easing);
}
.contact-card--primary .contact-foot{ color:rgba(10,10,11,.6); }
.contact-card--primary .contact-foot span{ color:var(--accent-ink); }
.contact-card:hover .contact-foot span{ transform:translateX(4px); }
.contact-mail{
  display:inline-block;
  margin-top:clamp(32px, 4vw, 48px);
  font-weight:600;
  font-size:clamp(18px, 1.9vw, 24px);
  letter-spacing:-0.01em;
  color:var(--ink-soft);
  padding-bottom:4px;
  border-bottom:1px solid var(--ink-faint);
  transition:color .25s var(--easing), border-color .25s var(--easing);
}
.contact-mail:hover{ color:var(--ink); border-bottom-color:var(--ink); }

/* ---------- Footer ---------- */
.footer{
  position:relative;
  overflow:clip;
  border-top:1px solid var(--line-section);
  padding:56px 0 0;
  font-size:13.5px;
  line-height:1.9;
  color:var(--ink-mute);
  background:var(--bg);
}
.footer-inner{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:32px 64px;
}
.footer-logo{ display:inline-block; margin-bottom:20px; }
.footer-logo .logo-crop{ --h:22px; opacity:.9; }
.footer-info{
  display:flex; flex-wrap:wrap;
  gap:2px 28px;
  max-width:780px;
}
.footer-info a:hover{ color:var(--ink); }
.footer-copy{
  margin-top:16px;
  color:var(--ink-faint);
}
.footer-links{
  display:flex; gap:28px;
  flex:none;
}
.footer-links a{
  font-size:14px;
  font-weight:600;
  color:var(--ink-soft);
  transition:color .25s var(--easing);
}
.footer-links a:hover{ color:var(--ink); }
/* 페이지 끝 대형 워드마크 (인트로 입자 글자와 같은 Paperlogy 800) */
.footer-mark-wrap{
  container-type:inline-size;
  margin-top:clamp(36px, 5vw, 64px);
}
.footer-mark{
  font-family:var(--font);
  font-weight:800;
  font-size:20cqi;
  line-height:.78;
  letter-spacing:-0.045em;
  white-space:nowrap;
  color:rgba(244,243,241,.045);
  margin-bottom:-0.06em;
  user-select:none;
  -webkit-user-select:none;
  pointer-events:none;
}

/* ---------- Responsive ---------- */
@media (max-width: 960px){
  .section-head{ grid-template-columns:1fr; align-items:start; }
  .fact{ grid-template-columns:160px minmax(0, 1fr); }
  .contacts{ grid-template-columns:1fr; }
  .contact-card{ min-height:0; }
  .contact-foot{ padding-top:20px; }
  .footer-inner{ flex-direction:column; }
}
@media (max-width: 720px){
  body{ font-size:16px; }
  .p-card{ flex-basis:62vw; }
  .slider{ --gap:12px; }
  .p-body{ padding:14px 14px 16px; }
  .p-name{ font-size:19px; }
  .p-actions{ gap:8px 12px; }
  .p-actions .btn-go{ padding:8px 12px; }
  .fact{ grid-template-columns:1fr; gap:8px; }
  .fact dt{ padding-top:0; }
  .footer-info{ display:block; }
  .label--words{ gap:6px 14px; }
}
@media (max-width: 480px){
  .nav-inner{ height:64px; }
  .logo-crop{ --h:19px; }
  .nav-right{ gap:14px; }
  .menu{ gap:12px; }
  .menu a{ font-size:13px; }
  .nav-cta{ font-size:12.5px; padding:9px 13px; }
  .hero{ padding:120px 0 150px; }
  .hero-side{ right:6px; bottom:28px; font-size:10px; }
  .hero-scroll{ bottom:28px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .js .reveal, .js .reveal.in{ opacity:1; transform:none; animation:none; }
  .hero-scroll i::after{ animation:none; transform:none; height:100%; opacity:.4; }
  .p-card:hover, .contact-card:hover{ transform:none !important; }
  *, *::before, *::after{ transition-duration:0s !important; }
}