/* =========================
   sSup MRI — PDF-like style
   Font: Noto Serif (SIL OFL, commercial OK)
   ========================= */

:root{
  --bg:#e6e6e6;
  --paper:#efefef;
  --ink:#111;
  --muted:#444;

  --line:#111;
  --shadow: 0 10px 24px rgba(0,0,0,.16);

  --pill-bg:#ededed;
  --pill-border:#111;

  --hl-yellow:#f6ef8a;
  --hl-cream:#f6e8bf;
  --hl-green:#cfe8c6;
  --hl-pink:#f3c4b7;

  --banner:#f6e8bf;
  --nav-gap: 34px;

  --maxw: 1320px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family: "Noto Serif", "Times New Roman", serif;
}

a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}

/* ---- helpers ---- */
.container{
  width:min(var(--maxw), calc(100% - 120px));
  margin:0 auto;
}
.hr{
  height:2px;
  background:var(--line);
  opacity:1;
  margin:18px 0 0;
}
.hl-yellow{background:var(--hl-yellow); padding:.06em .18em}
.hl-cream{background:var(--hl-cream); padding:.06em .18em}
.hl-green{background:var(--hl-green); padding:.06em .18em}
.hl-pink{background:var(--hl-pink); padding:.06em .18em}

.shadow{box-shadow:var(--shadow)}
.paper{
  background:#f7f4ee;
  border:1px solid rgba(0,0,0,.08);
}

/* =========================
   Top nav (index)
   ========================= */
.topbar{
  padding:28px 0 0;
}
.topbar-row{
  display:flex;
  align-items:center;
  gap:20px;
}

.since{
  margin-right:auto;   /* ✅ HOME(왼쪽) 고정 */
}

.nav-pills{
  margin-left:auto;    /* ✅ 버튼들 오른쪽 정렬 */
}
.since{
  font-size:22px;
  letter-spacing:.04em;
}
.nav-pills{
  display:flex;
  gap:var(--nav-gap);
  align-items:center;
  justify-content:flex-end;  /* ✅ 오른쪽으로 붙임 */
  flex:0;                    /* ✅ 가운데 넓게 먹는거 제거 */
  width:auto;
  margin-left:auto;          /* ✅ 오른쪽 끝으로 밀기 */
}
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-width:260px;     /* ✅ 가로 폭 축소 */
  height:46px;         /* ✅ 높이 줄이기 (중요) */
  padding:0 22px;      /* ✅ 내부 여백 축소 */

  border:2px solid var(--pill-border);
  border-radius:999px;
  background:var(--pill-bg);

  font-size:22px;      /* ✅ 글자 크기 다운 */
  line-height:1;
}
.pill:hover{transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.12)}
.pill.active{
  background:#f3f3f3;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}

/* =========================
   Index hero
   ========================= */
.hero{
  padding:40px 0 0;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.35fr 1fr;
  align-items:center;
  gap:64px;
  padding:40px 0 0;
}
.hero-title{
  font-size:108px;
  font-weight:500;
  letter-spacing:.01em;
}
.hero-card{
  width:360px;          /* 🔥 핵심: 카드 크기 줄이기 */
  margin-left:auto;
}
.hero-card img{
  width:100%;
  border-radius:2px;
  box-shadow:0 10px 24px rgba(0,0,0,.22);
  background:#fff;
}

.banner{
  margin-top:36px;
  padding:22px 0;
  background:#f7ebc3;              /* ✅ 노란 띠 확실히 */
  border-top:1px solid rgba(0,0,0,.15);
  border-bottom:1px solid rgba(0,0,0,.15);
}

.banner .quote{
  font-size:50px;
  text-align:center;
}

/* =========================
   Page header (About/Dev/More)
   ========================= */
.page{
  padding:34px 0 0;
}
.page-title{
  font-size:60px;
  font-weight:500;
}
.page-body{
  padding:26px 0 40px;
}

/* =========================
   Deck (PDF slide-like pages inside About/Dev/More)
   no scroll feeling: each slide is "screen"
   ========================= */
.deck{
  position:relative;
  margin-top:18px;
}
.deck-viewport{
  position:relative;
  height: calc(100vh - 190px); /* header + underline + controls */
  min-height: 680px;
  overflow:hidden;
}
.slide{
  position:absolute;
  inset:0;
  padding:26px 0 0;
  opacity:0;
  pointer-events:none;
  transform: translateX(12px);
  transition: opacity .18s ease, transform .18s ease;
}
.slide.is-active{
  opacity:1;
  pointer-events:auto;
  transform: translateX(0);
}

/* deck controls */
.deck-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-top:14px;
  user-select:none;
}
.btn{
  border:2px solid #111;
  background:#efefef;
  padding:10px 16px;
  border-radius:999px;
  font-size:18px;
  cursor:pointer;
}
.btn:active{transform:translateY(1px)}
.dots{
  display:flex;
  gap:10px;
  align-items:center;
}
.dot{
  width:10px;height:10px;border-radius:999px;
  background:#bdbdbd;
  border:1px solid rgba(0,0,0,.35);
  cursor:pointer;
}
.dot.active{background:#111}

/* =========================
   About slides — speech bubbles / film strip / profiles
   ========================= */
.about-grid-1{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:44px;
  align-items:center;
  padding-top:8px;
}
.bubble-oval{
  border:4px solid #111;
  border-radius:999px;
  background:transparent;
  padding:22px 34px;
  display:inline-block;
  font-size:44px;
  font-weight:700;
  width:max-content;
}
.bubble-top{
  position:relative;
  border:10px solid #333;
  border-radius:999px;
  padding:18px 26px;
  background:#f7f7f7;
  font-size:26px;
  font-weight:600;
  max-width:620px;
  margin:0 auto 18px;
}
.bubble-top:after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-26px;
  transform:translateX(-50%);
  width:0;height:0;
  border:18px solid transparent;
  border-top-color:#333;
}
.speech-big{
  position:relative;
  background:#fff;
  border-radius:18px;
  border:6px solid #222;
  padding:20px 22px;
  font-size:20px;
  line-height:1.32;
}
.speech-big:after{
  /* 기존: bottom -30px / border 22px */
  bottom:-22px;
  border:16px solid transparent;
  border-top-color:#222;
}
.speech-big:before{
  /* 기존: bottom -22px / border 18px */
  bottom:-16px;
  border:13px solid transparent;
  border-top-color:#fff;
}
.doc-card{
  width:420px;
  margin-left:auto;
  background:#fff;
  box-shadow:var(--shadow);
  border-radius:2px;
  overflow:hidden;
}
.doc-card img{width:100%}

/* about slide 2 (motto + film) */
.motto{
  text-align:center;
  padding-top:40px;
}
.motto .line{
  font-size:52px;
  font-style:italic;
  font-weight:800;
  letter-spacing:.01em;
  margin:18px 0;
}
.filmstrip{
  margin-top:44px;
  background:#111;
  padding:18px 0;
  border-top:10px solid #111;
  border-bottom:10px solid #111;
}
.filmstrip-inner{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:28px;
  align-items:center;
  width:min(var(--maxw), calc(100% - 120px));
  margin:0 auto;
}
.film-img{
  background:#fff;
  height:210px;
  box-shadow:0 10px 20px rgba(0,0,0,.24);
  overflow:hidden;
}
.film-img img{width:100%;height:100%;object-fit:cover}

/* sprocket holes */
.filmstrip:before, .filmstrip:after{
  content:"";
  display:block;
  height:10px;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 36px,
      #fff 36px 80px,
      transparent 80px 120px);
  opacity:.95;
}
.filmstrip:before{margin-bottom:12px}
.filmstrip:after{margin-top:12px}

/* profiles */
/* profiles — FIXED (텍스트 축소) */
.profile{
  display:grid;
  grid-template-columns: 440px 1fr;
  gap:40px;                 /* 기존 56px ↓ */
  align-items:center;
  padding-top:8px;
}

.profile .name{
  font-size:36px;           /* 52px → 36px */
  font-style:italic;
  margin:0 0 6px;
}

.profile .role{
  font-size:56px;           /* 92px → 56px 🔥 */
  font-weight:800;
  letter-spacing:.01em;
  color:#1e2234;
  margin:0 0 10px;
}

.profile .bullets{
  font-size:16px;           /* 28px → 16px 🔥 */
  line-height:1.35;
  color:#222;
  padding-left:22px;
}

.profile .bullets li{
  margin:4px 0;
}
.profile .photo{
  width:440px;
  height:440px;
  background:#fff;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.profile .photo img{
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: center top; /* 얼굴 쪽 보존 */
}

/* =========================
   Development slides (layouts)
   ========================= */
.chapter-title{
  text-align:center;
  padding-top:20px;
}
.chapter-title h2{
  margin:0;
  font-size:56px;
  font-style:italic;
  font-weight:800;
}
.chapter-title p{
  margin:8px 0 0;
  font-size:38px;
  font-style:italic;
  font-weight:700;
}

.dev-two{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:46px;
  align-items:center;
  padding-top:34px;
}
.thought{
  position:relative;
  width:max-content;
  background:#fff;
  border:3px solid #111;
  border-radius:999px;
  padding:18px 26px;
  font-size:34px;
  margin:0 auto 18px;
}
.thought:before{
  content:"";
  position:absolute;
  left:70px;
  bottom:-22px;
  width:18px;height:18px;
  border:3px solid #111;
  background:#fff;
  border-radius:999px;
}
.thought:after{
  content:"";
  position:absolute;
  left:48px;
  bottom:-44px;
  width:12px;height:12px;
  border:3px solid #111;
  background:#fff;
  border-radius:999px;
}
.dev-para{
  text-align:center;
  font-size:32px;
  line-height:1.35;
}
.overlap-stack{
  position:relative;
  width:760px;
  max-width:100%;
  margin:0 auto;
  height:420px;
}
.overlap-stack img{
  position:absolute;
  background:#fff;
  box-shadow:var(--shadow);
}
.overlap-stack img.a{left:0; top:110px; width:300px}
.overlap-stack img.b{left:160px; top:40px; width:560px}

/* centered big image */
.center-figure{
  width:min(980px, 92%);
  margin:34px auto 0;
  box-shadow:var(--shadow);
  background:#fff;
}

/* Why MRI layout */
.why-row{
  padding-top:20px;
}
.why-label{
  display:inline-block;
  font-size:56px;
  font-style:italic;
  font-weight:800;
  background:var(--hl-yellow);
  padding:.08em .18em;
  margin:10px 0 18px;
}
.why-topimgs{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:36px;
  align-items:end;
  width:min(1000px, 95%);
  margin:0 auto 18px;
}
.small-cap{
  text-align:center;
  font-size:20px;
  letter-spacing:.08em;
  margin-bottom:8px;
}
.why-img{
  height:160px;
  background:#fff;
  box-shadow:0 10px 18px rgba(0,0,0,.14);
  overflow:hidden;
}
.why-img img{width:100%;height:100%;object-fit:contain;background:#fff}
.why-text{
  width:min(1180px, 96%);
  margin:0 auto;
  font-size:28px;
  line-height:1.6;
  text-align:center;
}

/* Business model / leasing two-col */
.biz-grid{
  display:grid;
  grid-template-columns: .9fr 1.1fr;
  gap:44px;
  align-items:center;
  padding-top:26px;
}
.biz-hl{
  display:inline-block;
  font-size:54px;
  font-style:italic;
  font-weight:800;
  background:var(--hl-yellow);
  padding:.08em .18em;
  margin:0 0 18px;
}
.biz-left p{
  font-size:18px;
  line-height:1.75;
  text-align:center;
}
.biz-left h3{
  font-size:44px;
  font-weight:700;
  margin:10px 0 14px;
  text-align:center;
}
.table-img{
  width:100%;
  background:#fff;
  box-shadow:var(--shadow);
}

/* =========================
   More slides
   ========================= */
.big-word{
  font-size:140px;
  font-weight:500;
  margin:40px 0 10px;
}
.heart{
  width:240px;
  height:220px;
  background:#f2c3b8;
  clip-path: path("M120 210 C20 150, 0 95, 35 60 C65 30, 105 40, 120 70 C135 40, 175 30, 205 60 C240 95, 220 150, 120 210 Z");
}
.more-support{
  display:grid;
  grid-template-columns: 1fr 300px;
  gap:30px;
  align-items:start;
  padding-top:40px;
}
.more-text{
  font-size:30px;
  line-height:1.35;
  margin-top:14px;
}
.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:40px;
  align-items:center;
  padding-top:40px;
}
.icon-row{
  display:flex;
  align-items:center;
  gap:26px;
  margin:28px 0;
}
.icon{
  width:110px;
  height:110px;
}
.contact-text{
  font-size:42px;
}
.youtube-box{
  display:flex;
  flex-direction:column;
  gap:18px;
  align-items:flex-start;
}
.youtube-icon{
  width:180px;
  height:130px;
}

/* =========================
   Responsive tweaks
   ========================= */
@media (max-width: 1100px){
  .container{width:min(var(--maxw), calc(100% - 48px))}
  .pill{min-width:220px; font-size:22px; height:52px}
  .hero-title{font-size:78px;/* 🔥 PDF 느낌 크기 */}
  .banner .quote{font-size:48px}
  .hero-grid{grid-template-columns: 1fr}
  .hero-card{margin:0}
  .deck-viewport{height:auto; min-height:0; overflow:visible}
  .slide{position:relative; opacity:1; pointer-events:auto; transform:none}
  .deck-controls{display:none}
  /* On small screens, allow natural scroll inside page */
}

/* ===== About Us 잘림 FIX (About만 스크롤 허용) ===== */

/* 1) About 페이지에서만 화면 고정/잘림을 풀기 */
body.about-page{
  overflow-y: auto !important;
}

/* 2) About 페이지 wrapper/viewport가 100vh + hidden이면 풀기 */
body.about-page .page,
body.about-page .stage,
body.about-page .screen,
body.about-page .viewport,
body.about-page .wrapper{
  height: auto !important;
  min-height: 100vh !important;
  overflow: visible !important;
}

/* 3) About 메인 레이아웃도 아래로 늘어나게 */
body.about-page .about-container,
body.about-page .about-grid,
body.about-page .about-row{
  height: auto !important;
  overflow: visible !important;
  align-items: flex-start !important;
}

/* 4) 카드/오른쪽 이미지가 내부에서 잘리는 경우까지 방지 */
body.about-page .about-left,
body.about-page .about-right,
body.about-page .about-card,
body.about-page .proof-wrap,
body.about-page .reg-wrap{
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

body.about-page img{
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* ===== Keep slide navigation, only fix sizing for About ===== */

/* 덱 뷰포트가 너무 낮아서 잘리는 게 핵심 → 높이 늘리기 */
.deck-viewport{
  height: calc(100vh - 120px);  /* 기존 190px였으면 너무 작음 */
  overflow: hidden;
}

/* 상단 바 높이가 실제로 더 작다면 여기 값을 더 줄일수록(=120→100) 뷰포트가 커짐 */
@media (max-width: 920px){
  body.about-page .deck-viewport{
    height: calc(100vh - 96px);
  }
}

/* About 슬라이드에서만 전체를 살짝 축소해서 한 화면에 다 들어오게 */
body.about-page .slide-inner{
  transform: scale(0.88);
  transform-origin: top center;
}

/* 축소하면 아래 공간이 남는 느낌이 들어서 약간 위로 올림 */
body.about-page .slide-inner{
  margin-top: -12px;
}

/* ===== About: speech bubble border refine (thin & clean) ===== */
body.about-page .speech-big{
  border-width: 3px;        /* ⬅ 핵심: 기존 5~8px → 3px */
  padding: 14px 16px;       /* 테두리 얇아졌으니 여백도 같이 줄임 */
  font-size: 18px;          /* 이미 맞춰둔 값 유지 */
}

/* 꼬리(삼각형)도 같이 얇게 */
body.about-page .speech-big:after{
  border-width: 10px;       /* 외곽 */
  bottom: -14px;
}

body.about-page .speech-big:before{
  border-width: 8px;        /* 안쪽(흰색) */
  bottom: -11px;
}

/* 오른쪽 위 말풍선(bubble-top) 테두리 얇게 */
body.about-page .bubble-top{
  border-width: 4px;
  padding: 14px 18px;
  font-size: 20px;
}

body.about-page .bubble-top:after{
  bottom:-16px;
  border-width: 12px;
  border-top-color:#333;
}

/* =========================
   About - Slide 2 only (motto + filmstrip)
   Fix slight bottom clipping while keeping slide (no scroll)
   ========================= */

/* (선택) about 페이지에서만 뷰포트 조금 더 확보 */
.about-page .deck-viewport{
  height: calc(100vh - 170px); /* 기존 190px → 170px로 20px 여유 */
}

/* about.html에서 slide2는 두 번째 article.slide */
.about-page .deck[data-key="deck:about"] .deck-viewport > .slide:nth-child(2){
  padding-top: 10px; /* 기존 slide padding-top 26px보다 더 타이트하게 */
}

/* 큰 슬로건(3줄) 전체 크기 다운 */
.about-page .deck[data-key="deck:about"] .deck-viewport > .slide:nth-child(2) .motto{
  padding-top: 18px; /* 기존 40px ↓ */
}

.about-page .deck[data-key="deck:about"] .deck-viewport > .slide:nth-child(2) .motto .line{
  font-size: clamp(34px, 3.1vw, 46px); /* 기존 52px ↓ + 화면에 따라 자동 */
  margin: 10px 0;                      /* 기존 18px ↓ */
  line-height: 1.05;
}

/* 필름스트립도 살짝 압축 */
.about-page .deck[data-key="deck:about"] .deck-viewport > .slide:nth-child(2) .filmstrip{
  margin-top: 22px;     /* 기존 44px ↓ */
  padding: 12px 0;      /* 기존 18px ↓ */
  border-top: 8px solid #111;   /* 기존 10px ↓ */
  border-bottom: 8px solid #111;/* 기존 10px ↓ */
}

/* 스프로킷 줄 두께/여백 조금 다운 */
.about-page .deck[data-key="deck:about"] .deck-viewport > .slide:nth-child(2) .filmstrip:before,
.about-page .deck[data-key="deck:about"] .deck-viewport > .slide:nth-child(2) .filmstrip:after{
  height: 8px; /* 기존 10px ↓ */
}
.about-page .deck[data-key="deck:about"] .deck-viewport > .slide:nth-child(2) .filmstrip:before{ margin-bottom: 8px; }
.about-page .deck[data-key="deck:about"] .deck-viewport > .slide:nth-child(2) .filmstrip:after{ margin-top: 8px; }

/* 내부 간격/이미지 높이 다운 */
.about-page .deck[data-key="deck:about"] .deck-viewport > .slide:nth-child(2) .filmstrip-inner{
  gap: 18px; /* 기존 28px ↓ */
}

.about-page .deck[data-key="deck:about"] .deck-viewport > .slide:nth-child(2) .film-img{
  height: 180px; /* 기존 210px ↓ */
}

/* ===== Team member slide: text compacting fix ===== */

/* 이름 */
.team-info .team-name {
  font-size: 38px;      /* 기존보다 줄임 */
  margin-bottom: 8px;
}

/* 직책 (CEO, CPO 등) */
.team-info .team-role {
  font-size: 64px;      /* 이게 제일 컸음 */
  margin-bottom: 18px;
}

/* 경력 리스트 전체 */
.team-info ul {
  font-size: 15px;      /* 핵심: 많이 줄임 */
  line-height: 1.35;    /* 줄간격 압축 */
}

/* bullet 하나하나 간격 */
.team-info ul li {
  margin-bottom: 6px;
}

/* ===== Development: screenshot slides (PDF 캡쳐 그대로 보여주기) ===== */
.dev-page .slide{
  padding: 18px 0 0; /* 기본 26px보다 살짝 줄여서 공간 확보 */
}

.dev-page .pdf-shot{
  width: min(1200px, 96%);
  height: calc(100vh - 260px);  /* 헤더/타이틀/컨트롤 감안 */
  margin: 14px auto 0;
  display: block;

  object-fit: contain;  /* ✅ 안 잘리게 */
  background: #fff;
  box-shadow: var(--shadow);
}