:root{
  /* 무채색 단일 스키마 — 오프화이트 배경 + 솔리드 블랙 */
  --bg:#eaeaea; --surface:#f2f1f0; --panel:#f7f6f5;
  --fg:#000000; --fg2:#1a1a1a; --muted:#585858; --faint:#8d8d8d;
  --line:#d7d6d4; --line2:#c2c1bf; --ph:#e0dfdd;
  --accent:#000000; --accent-soft:#dedddb;
  --pill:#dddddd;
  --shadow-1:0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.06);
  --shadow-2:0 2px 4px rgba(0,0,0,.07), 0 12px 26px rgba(0,0,0,.10);
  --shadow-3:0 2px 6px rgba(0,0,0,.05), 0 24px 60px rgba(0,0,0,.10);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#101010; --surface:#181818; --panel:#161616;
    --fg:#ffffff; --fg2:#f0f0f0; --muted:#a2a2a2; --faint:#747474;
    --line:#272727; --line2:#3a3a3a; --ph:#1a1a1a;
    --accent:#ffffff; --accent-soft:#262626;
    --pill:#242424;
    --shadow-1:0 1px 2px rgba(0,0,0,.5), 0 6px 18px rgba(0,0,0,.4);
    --shadow-2:0 2px 4px rgba(0,0,0,.55), 0 12px 26px rgba(0,0,0,.45);
    --shadow-3:0 2px 6px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --bg:#101010; --surface:#181818; --panel:#161616;
  --fg:#ffffff; --fg2:#f0f0f0; --muted:#a2a2a2; --faint:#747474;
  --line:#272727; --line2:#3a3a3a; --ph:#1a1a1a;
  --accent:#ffffff; --accent-soft:#262626;
  --pill:#242424;
  --shadow-1:0 1px 2px rgba(0,0,0,.5), 0 6px 18px rgba(0,0,0,.4);
  --shadow-2:0 2px 4px rgba(0,0,0,.55), 0 12px 26px rgba(0,0,0,.45);
  --shadow-3:0 2px 6px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,
              "Apple SD Gothic Neo","Helvetica Neue",Arial,sans-serif;
  line-height:1.65; -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale; word-break:keep-all;
  letter-spacing:-.008em;
  animation:pageIn .5s cubic-bezier(.22,.8,.28,1) both;
}
@keyframes pageIn{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
body.leaving{opacity:0; transition:opacity .26s ease}
@media (prefers-reduced-motion:reduce){
  body{animation:none} body.leaving{transition:none}
  *{transition-duration:.01ms !important; animation-duration:.01ms !important}
}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}

/* ── 원형 아이콘 버튼 ─────────────────── */
.ico{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line); background:var(--surface); color:var(--muted);
  display:inline-grid; place-items:center; cursor:pointer; flex:none;
  transition:color .15s, border-color .15s, transform .15s;
}
.ico:hover{color:var(--fg); border-color:var(--line2); transform:translateY(-1px)}
.ico svg{width:17px; height:17px; fill:none; stroke:currentColor;
         stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.ico-row{display:flex; gap:10px; flex-wrap:wrap}

/* ── 이미지 자리(더미) ─────────────────── */
.ph{
  aspect-ratio:var(--ar,16/10);
  background:var(--ph); border:1px dashed var(--line2); border-radius:10px;
  display:grid; place-content:center; align-content:center; gap:3px;
  text-align:center; padding:16px; width:100%;
}
.ph b{font-size:13px; font-weight:500; color:var(--muted)}
.ph small{font-size:11px; color:var(--faint)}

/* ══════════════════════════════════════
   HOME — 세로 카드 캐러셀
   ══════════════════════════════════════ */
body.home-page{overflow:hidden}
.home{position:relative; height:100vh; height:100dvh; overflow:hidden}

/* 좌측 아이덴티티 */
.identity{
  position:absolute; left:9vw; top:50%; transform:translateY(-50%);
  z-index:3; max-width:min(420px,40vw);
}
.identity h1{
  font-size:clamp(30px,3.4vw,46px); font-weight:700; letter-spacing:-.035em;
  margin:0; line-height:1.12;
}
.identity .role{
  font-size:clamp(20px,2.4vw,32px); font-weight:500; color:var(--faint);
  letter-spacing:-.03em; margin:8px 0 0; line-height:1.2;
}
.identity .intro{
  font-size:14px; color:var(--muted); margin:24px 0 0; line-height:1.65;
  max-width:25.7em;   /* 소개글이 3줄로, 줄 길이가 고르게 떨어지는 폭 (360px) */
}
.identity .ico-row{margin-top:24px}

/* 스퀘어클 아이콘 버튼 */
.ico{
  width:56px; height:56px; border-radius:17px;
  border:0; background:var(--surface); color:var(--fg);
  display:inline-grid; place-items:center; cursor:pointer; flex:none;
  box-shadow:var(--shadow-1);
  transition:transform .18s ease, box-shadow .18s ease;
}
.ico:hover{transform:translateY(-2px); box-shadow:var(--shadow-2)}
.ico svg{width:20px; height:20px; fill:none; stroke:currentColor;
         stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.ico-row{display:flex; gap:14px; flex-wrap:wrap}

/* 카드 스택 */
.stack{
  position:absolute; top:0; bottom:0; right:0; left:52%;
  display:grid; place-items:center; z-index:2;
}
.stack-card{
  /* 화면이 크면 같이 커지되, 위아래 카드가 보일 여백은 남기도록 높이 기준으로 제한 */
  position:absolute; width:min(720px, 30vw, 49vh); aspect-ratio:1/1.06;
  border-radius:calc(min(720px, 30vw, 49vh) * 0.098);   /* 430px 카드의 42px 과 같은 비율 */
  overflow:hidden; background:var(--surface);
  box-shadow:var(--shadow-3);
  transition:transform .55s cubic-bezier(.22,.8,.28,1), opacity .45s ease;
  will-change:transform, opacity;
}
.stack-card .shot{position:absolute; inset:0}
.stack-card .shot .ph{
  width:100%; height:100%; aspect-ratio:auto; border:0; border-radius:0;
  background:var(--ph);
}
.stack-card img{width:100%; height:100%; object-fit:cover}
.stack-card .label{
  position:absolute; left:28px; right:28px; bottom:26px; z-index:2;
  font-size:17px; font-weight:600; letter-spacing:-.02em; color:var(--fg);
}
.stack-card .veil{
  position:absolute; left:0; right:0; bottom:0; height:38%; z-index:1;
  background:linear-gradient(to top, color-mix(in srgb, var(--surface) 88%, transparent), transparent);
}
.stack-card[data-pos="0"]{cursor:pointer}
.stack-card:not([data-pos="0"]){pointer-events:none}

/* 우측 도트 인디케이터 */
.dots{
  position:absolute; right:30px; top:50%; transform:translateY(-50%); z-index:4;
  display:flex; flex-direction:column; gap:11px;
}
.dot{
  width:6px; height:6px; border-radius:50%; padding:0; border:0; cursor:pointer;
  background:var(--line2); opacity:.6; transition:all .3s ease;
}
.dot[aria-current="true"]{background:var(--fg); opacity:1; transform:scale(1.35)}

.scroll-hint{
  position:absolute; left:9vw; bottom:30px; z-index:3;
  display:inline-flex; align-items:center; gap:7px;
  margin:0; padding:8px 16px;
  background:var(--pill); border-radius:16px 16px 16px 0;
  font-size:12px; line-height:1.5; letter-spacing:0;
  color:var(--faint);
  /* 첫 카드에서만 노출 — 카드를 넘기면 물러나고, 맨 위로 돌아오면 다시 뜬다 */
  opacity:0; transform:translateY(6px); pointer-events:none;
  transition:opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1);
}
.scroll-hint.is-in{opacity:1; transform:none; pointer-events:auto}
.scroll-hint svg{
  width:13px; height:13px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
  opacity:.7;
}
.scroll-hint.is-in svg{
  animation:hint-nudge 2.6s cubic-bezier(.4,0,.2,1) .9s infinite;
}
@keyframes hint-nudge{
  0%,58%,100%{transform:translateY(0); opacity:.7}
  72%{transform:translateY(3.5px); opacity:1}
  86%{transform:translateY(1px); opacity:.85}
}
@media (prefers-reduced-motion:reduce){
  .scroll-hint{transition:none}
  .scroll-hint.is-in svg{animation:none}
}

@media (max-width:900px){
  body.home-page{overflow:auto}
  .home{height:auto; min-height:100dvh; padding:80px 0 96px}
  .identity{position:static; transform:none; max-width:none; padding:0 24px; margin-bottom:40px}
  .identity .ico-row{margin-top:24px}
  .ico{width:50px; height:50px; border-radius:15px}

  /* 카드 — 모바일에서는 가로 스택 스와이프
     (크기·투명도·전환 인터랙션은 데스크톱과 동일, 겹침 축만 세로→가로) */
  .stack{
    position:relative; left:0; right:auto; top:auto; bottom:auto; z-index:2;
    display:grid; place-items:center;
    height:calc(min(74vw,340px) * 1.06); margin:8px 0 40px;
    overflow:visible;   /* 카드 그림자가 잘리지 않도록 — 가로 넘침은 상위 .home이 클립 */
  }
  .stack-card{
    width:min(74vw,340px); border-radius:34px;
  }
  .stack-card .label{left:20px; right:20px; bottom:18px; font-size:15px}

  /* 도트 — 하단 중앙 가로 배치 */
  .dots{
    position:static; transform:none; right:auto; top:auto;
    flex-direction:row; justify-content:center; gap:9px; margin-top:20px;
  }
  .scroll-hint{display:none}
}

/* ══════════════════════════════════════
   고정 GNB
   ══════════════════════════════════════ */
.gnb{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:22px 30px; mix-blend-mode:normal;
}
.gnb.solid{
  background:color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);
  padding:16px 30px;
}
.wordmark{
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  white-space:nowrap; color:var(--fg);
}
.gnb nav{display:flex; gap:26px; align-items:center}
.gnb .mid{
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center;
}
.gnb .side{display:flex; gap:10px; align-items:center}

/* 링크 호버 — 밑줄이 좌→우로 그어짐 */
.nlink{
  position:relative; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); padding:2px 0; white-space:nowrap;
  transition:color .25s ease;
}
.nlink::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .32s cubic-bezier(.22,.8,.28,1);
}
.nlink:hover{color:var(--fg)}
.nlink:hover::after{transform:scaleX(1)}
.nlink[aria-current="page"]{color:var(--fg)}
.nlink[aria-current="page"]::after{transform:scaleX(1); opacity:.35}

/* GNB용 최소 아이콘 */
.gnb .ico{
  width:34px; height:34px; border-radius:10px; box-shadow:none;
  border:1px solid var(--line); background:transparent; color:var(--muted);
}
.gnb .ico:hover{color:var(--fg); border-color:var(--line2); transform:none; box-shadow:none}
.gnb .ico svg{width:16px; height:16px}
.info .ico{width:34px; height:34px; border-radius:10px; box-shadow:none;
           border:1px solid var(--line); background:transparent}
.info .ico svg{width:16px; height:16px}

@media (max-width:640px){
  .gnb{padding:16px 20px}
  .gnb .mid{display:none}
  .gnb nav{gap:18px}
  .nlink{letter-spacing:.1em}
}

/* ══════════════════════════════════════
   ABOUT
   ══════════════════════════════════════ */
.page{max-width:880px; margin:0 auto; padding:120px 30px 110px}
.about-hero{padding-bottom:44px; border-bottom:1px solid var(--line)}
.about-hero h1{font-size:clamp(28px,4.6vw,42px); letter-spacing:-.035em;
               font-weight:600; margin:0 0 18px; line-height:1.25}
.about-hero .lede{font-size:17px; color:var(--muted); margin:0; max-width:40em}
.about-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:44px; padding:44px 0}
@media (max-width:760px){ .about-grid{grid-template-columns:1fr; gap:26px} }
.about-grid p{margin:0 0 15px; font-size:15px}
.about-grid p:last-child{margin-bottom:0}
dl.facts{margin:0; display:grid; grid-template-columns:auto 1fr; gap:10px 20px; font-size:14px}
dl.facts dt{color:var(--faint)}
dl.facts dd{margin:0}

.sub{padding-top:44px; margin-top:0; border-top:1px solid var(--line)}
.sub + .sub{margin-top:44px}
.sub-head{font-size:12px; color:var(--faint); letter-spacing:.12em;
          text-transform:uppercase; font-weight:600; margin:0 0 22px}
.highlights{margin:0; padding:0; list-style:none; display:grid; gap:12px}
.highlights li{position:relative; padding-left:24px; font-size:15px; line-height:1.65}
.highlights li::before{content:"✓"; position:absolute; left:0; top:0;
                       color:var(--accent); font-weight:600; line-height:1.65}
.highlights li b{font-weight:600}
.cv{display:grid}
.cv-item{display:grid; grid-template-columns:190px 1fr; gap:24px;
         padding:18px 0; border-bottom:1px solid var(--line)}
.cv-item:last-child{border-bottom:0}
@media (max-width:700px){ .cv-item{grid-template-columns:1fr; gap:4px; padding:16px 0} }
.cv-when{font-size:13px; color:var(--faint); padding-top:2px}
.cv-when em{display:block; font-style:normal; color:var(--line2); font-size:12px; margin-top:2px}
@media (max-width:700px){ .cv-when em{display:inline; margin-left:8px} }
.cv-role{font-size:16px; font-weight:600; letter-spacing:-.015em; margin:0 0 4px}
.cv-org{font-size:14px; color:var(--muted); margin:0}
.cv-note{font-size:14px; color:var(--muted); margin:8px 0 0}
.cv-note b{color:var(--fg); font-weight:500}
.cv-tag{display:inline-block; font-size:11px; font-weight:600; letter-spacing:.04em;
        color:var(--fg); background:var(--accent-soft);
        border-radius:99px; padding:3px 9px; margin-left:8px; vertical-align:2px}
.pubs{margin:0; padding-left:20px}
.pubs li{font-size:14px; margin-bottom:10px}
.pubs li:last-child{margin-bottom:0}
.pubs span{color:var(--faint)}
.award{display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap;
       border:1px solid var(--line); border-radius:12px; background:var(--surface); padding:20px 22px}
.award .yr{font-size:20px; font-weight:600; color:var(--accent); letter-spacing:-.02em}
.award .txt b{display:block; font-size:15px; font-weight:600; margin-bottom:4px}
.award .txt span{font-size:14px; color:var(--muted)}
.contact-links{display:flex; flex-wrap:wrap; gap:12px}
.contact-links a{font-size:15px; border:1px solid var(--line); border-radius:10px;
                 padding:11px 18px; background:var(--surface)}
.contact-links a:hover{border-color:var(--accent); color:var(--accent)}

/* ══════════════════════════════════════
   PROJECT DETAIL — 갤러리
   ══════════════════════════════════════ */
.viewer{padding:96px 0 0; min-height:100vh; display:flex; flex-direction:column}
.stage{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:24px 84px 12px; gap:14px; position:relative; min-height:0;
}
@media (max-width:820px){ .stage{padding:16px 20px 8px} }
.slide{
  /* 남는 세로 공간에 맞춰 커지되, 원본 해상도(1920)를 넘지 않게 —
     빼는 값은 GNB·캡션·썸네일·하단 내비가 차지하는 높이(실측) */
  width:min(100%, 1920px, calc((100dvh - 378px) * 16 / 9));
  margin:0 auto; cursor:zoom-in;
  border-radius:12px; overflow:hidden; border:1px solid var(--line); background:var(--surface);
}
.slide .ph{border:0; border-radius:0}
.slide img{width:100%; height:auto}
/* 초광폭에서는 하단 내비가 더 높아져 여유가 더 필요 */
@media (min-width:2000px){
  .slide{ width:min(100%, 1920px, calc((100dvh - 414px) * 16 / 9)); }
}
.slide-cap{
  display:flex; align-items:center; justify-content:center; gap:14px;
  font-size:13px; color:var(--muted); text-align:center; max-width:900px;
}
.slide-cap .idx{color:var(--faint); font-variant-numeric:tabular-nums; white-space:nowrap}

.navbtn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line); background:var(--surface); color:var(--muted);
  display:grid; place-items:center; cursor:pointer; z-index:2;
}
.navbtn:hover{color:var(--fg); border-color:var(--line2)}
.navbtn:disabled{opacity:.3; cursor:default}
.navbtn.prev{left:20px} .navbtn.next{right:20px}
@media (max-width:820px){ .navbtn{display:none} }
.navbtn svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8;
            stroke-linecap:round; stroke-linejoin:round}

/* 썸네일 스트립 */
.strip{
  display:flex; gap:8px; overflow-x:auto; padding:18px 24px 28px;
  justify-content:flex-start; scrollbar-width:thin;
}
.strip-inner{display:flex; gap:8px; margin:0 auto}
.thumb{
  width:64px; height:48px; border-radius:6px; flex:none; cursor:pointer;
  border:1px solid var(--line); background:var(--ph);
  display:grid; place-items:center; font-size:10px; color:var(--faint);
  overflow:hidden; padding:0;
}
.thumb img{width:100%; height:100%; object-fit:cover}
.thumb[aria-current="true"]{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)}

/* 정보 패널 */
.info{
  position:fixed; top:0; right:0; bottom:0; width:min(460px,100%);
  background:var(--panel); border-left:1px solid var(--line);
  z-index:40; overflow-y:auto; padding:24px 28px 60px;
  transform:translateX(100%); transition:transform .28s cubic-bezier(.4,0,.2,1);
  box-shadow:-20px 0 50px rgba(0,0,0,.06);
}
.info.open{transform:translateX(0)}
.info-top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:22px}
.info-top p{margin:0; font-size:12px; color:var(--faint); letter-spacing:.12em; text-transform:uppercase; font-weight:600}
.info h1{font-size:24px; font-weight:600; letter-spacing:-.025em; margin:0 0 8px; line-height:1.32}
.info .org{font-size:14px; color:var(--accent); font-weight:600; margin:0 0 16px}
.info .lede{font-size:15px; color:var(--muted); margin:0 0 20px}
.info dl.meta{margin:0 0 26px; display:grid; grid-template-columns:auto 1fr;
              gap:8px 16px; font-size:13px; padding-bottom:22px; border-bottom:1px solid var(--line)}
.info dl.meta dt{color:var(--faint)}
.info dl.meta dd{margin:0}
.info h2{font-size:12px; color:var(--faint); letter-spacing:.1em; text-transform:uppercase;
         font-weight:600; margin:26px 0 12px}
.info h3{font-size:16px; font-weight:600; letter-spacing:-.018em; margin:0 0 10px; line-height:1.42}
.info p{font-size:14px; margin:0 0 12px}
.info ul{margin:0 0 12px; padding-left:18px}
.info li{font-size:14px; margin-bottom:8px}
.info .note{color:var(--muted); font-size:13px}
.results{display:grid; gap:10px; margin-top:4px}
.result{border:1px solid var(--line); border-radius:10px; padding:14px 16px; background:var(--bg)}
.result .num{display:block; font-size:19px; font-weight:600; color:var(--accent); letter-spacing:-.02em}
.result .cap{display:block; font-size:13px; color:var(--muted); margin-top:3px}
.scrim{position:fixed; inset:0; background:rgba(0,0,0,.28); z-index:35;
       opacity:0; pointer-events:none; transition:opacity .28s}
.scrim.open{opacity:1; pointer-events:auto}

/* 프로젝트 간 이동 */
.projnav{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
         border-top:1px solid var(--line); padding:22px 24px 40px; font-size:14px; color:var(--muted)}
.projnav a:hover{color:var(--accent)}

/* ══════════════════════════════════════
   LIGHTBOX (확대)
   ══════════════════════════════════════ */
.lightbox{
  position:fixed; inset:0; z-index:60; background:rgba(12,11,15,.94);
  display:none; align-items:center; justify-content:center; padding:64px 24px;
}
.lightbox.open{display:flex}
.lb-stage{max-width:100%; max-height:100%; overflow:hidden; cursor:zoom-in}
.lb-stage.zoomed{cursor:zoom-out}
.lb-inner{transition:transform .2s ease; transform-origin:center center}
.lb-stage.zoomed .lb-inner{transform:scale(2.2)}
.lb-inner img{max-width:min(1920px,92vw); max-height:88vh; width:auto; height:auto; border-radius:6px}
.lb-inner .ph{width:min(1100px,88vw); --ar:16/10; border-color:#4a4756; background:#1b1a22}
.lb-inner .ph b{color:#b9b5c2} .lb-inner .ph small{color:#7c7889}
.lb-bar{
  position:fixed; top:0; left:0; right:0; padding:16px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  color:#e8e6ef; font-size:13px;
}
.lb-bar .lb-cap{opacity:.82; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lb-btn{
  width:38px; height:38px; border-radius:50%; flex:none;
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.06);
  color:#e8e6ef; display:grid; place-items:center; cursor:pointer;
}
.lb-btn:hover{background:rgba(255,255,255,.14)}
.lb-btn svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7;
            stroke-linecap:round; stroke-linejoin:round}
.lb-nav{position:fixed; top:50%; transform:translateY(-50%)}
.lb-nav.prev{left:18px} .lb-nav.next{right:18px}
.lb-hint{position:fixed; bottom:18px; left:0; right:0; text-align:center;
         color:rgba(232,230,239,.5); font-size:12px}

/* ── 404 ───────────────────────────── */
.err{min-height:100vh; display:grid; place-content:center; text-align:center; gap:4px; padding:24px}
.err .code{font-size:64px; font-weight:600; letter-spacing:-.04em; margin:0}
.err p{color:var(--muted); margin:0 0 22px}
.err a{color:var(--accent); border-bottom:1px solid currentColor}

/* ══════════════════════════════════════
   모바일 좌우 패딩 20px 통일
   ══════════════════════════════════════ */
@media (max-width:900px){
  .gnb, .gnb.solid,
  .identity,
  .page,
  .stage,
  .strip,
  .projnav,
  .info,
  .lightbox,
  .lb-bar,
  .err{
    padding-left:20px;
    padding-right:20px;
  }
}