@charset "UTF-8";

/* =========================================
   1. 기본 설정 (CORE)
   ========================================= */
:root {
  --bg-dark: #0f172a;       
  --bg-card: #1e293b;       
  --text-main: #f8fafc;     
  --text-sub: #94a3b8;      
  --accent: #38bdf8;        
  --border: rgba(255, 255, 255, 0.1); 
  --gradient: linear-gradient(135deg, #60a5fa 0%, #38bdf8 50%, #2dd4bf 100%);
  --header-height: 100px; /* 헤더 높이 변수 */
}

html {
  background-color: #0f172a; 
  -webkit-tap-highlight-color: rgba(15, 23, 42, 0); 
  height: 100%;
  /* 스크롤 시 헤더 높이만큼 여백 확보 (앵커 이동 시 가림 방지) */
  scroll-padding-top: var(--header-height);
}

* { 
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(15, 23, 42, 0) !important;
  -webkit-touch-callout: none !important;
}

*:focus, *:active, *:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

body {
  margin: 0;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
  background-color: var(--bg-dark);
  color: var(--text-main);
  line-height: 1.6;
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
}

/* 배경 패턴 */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: -9999;
  background-color: var(--bg-dark);
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    radial-gradient(circle at 50% 30%, #1e293b 0%, #0f172a 70%);
  background-size: 40px 40px, 40px 40px, 100% 100%;
  background-position: center top;
  pointer-events: none;
  will-change: transform;
}

a { text-decoration: none; color: inherit; transform: none; }
ul { list-style: none; padding: 0; margin: 0; }
img { width: 100%; height: 100%; object-fit: cover; }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

.container { max-width: 1280px; margin: 0 auto; padding: 0 20px; }


/* =========================================
   2. 헤더 (HEADER) - [수정] 가로선 제거 및 배경 강화
   ========================================= */
header {
  /* 배경을 더 진하게(0.9) 하여 본문 겹침 방지 */
  background: rgba(15, 23, 42, 0.9); 
  /* 블러 효과로 고급스러운 '말려 들어가는' 느낌 구현 */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  
  padding: 10px 0 20px; 
  position: sticky; 
  top: 0; 
  z-index: 1000;
  isolation: isolate;
  
  /* [수정] 불필요한 가로선(border-bottom) 제거 */
  border-bottom: none; 
}

.header-inner {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); 
  display: flex; justify-content: space-between; align-items: center;
  height: 70px; padding: 0 30px;
  transform: translate3d(0, 0, 0); will-change: transform; 
}

/* 로고 */
.logo-area { display: flex; align-items: center; gap: 10px; height: 100%; transition: opacity 0.3s; }
.logo-area:hover { opacity: 0.8; }
.logo-icon { position: relative; width: 32px; height: 32px; display: flex; align-items: flex-end; justify-content: center; }
.icon-layer { position: absolute; border-radius: 2px; transform: skewY(-10deg); transition: 0.3s; }
.layer-1 { bottom: 0; left: 0; width: 12px; height: 12px; background: #475569; }
.layer-2 { bottom: 8px; left: 8px; width: 12px; height: 12px; background: #94a3b8; z-index: 2; }
.layer-3 {
  bottom: 16px; left: 16px; width: 16px; height: 16px;
  background: linear-gradient(to top right, #38bdf8, #34d399);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.5); z-index: 3;
}
.logo-area:hover .layer-1 { background: rgba(56, 189, 248, 0.5); }
.logo-area:hover .layer-2 { background: #38bdf8; }
.logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo-main { font-family: 'Pretendard', sans-serif; font-size: 24px; font-weight: 800; color: #fff; letter-spacing: -0.5px; }

/* 숫자 '73' 그라데이션 */
.logo-gradient {
  background: linear-gradient(135deg, #60a5fa 0%, #38bdf8 50%, #2dd4bf 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: inherit; 
}

/* 네비게이션 */
nav { display: flex; align-items: center; gap: 0; }
nav a {
  font-family: 'Pretendard', sans-serif; font-size: 15px; font-weight: 500;
  color: #ffffff; padding: 0 20px; position: relative; line-height: 1;
  display: flex; align-items: center; height: 100%;
  background: transparent; outline: none; cursor: pointer;
  transition: color 0.2s;
  transform: translateZ(0);
}
nav a:not(:last-child)::after {
  content: "|"; position: absolute; right: 0;
  color: #ffffff; opacity: 0.4; font-weight: 300; font-size: 12px;
  transform: translateY(-1px); pointer-events: none;
}
nav a:hover, nav a.active { 
  color: #38bdf8; 
  font-weight: 500; /* 굵기 변화 없음 (움직임 방지) */
  /* 그림자로 굵기 효과 냄 */
  text-shadow: 0 0 0.5px #38bdf8, 0 0 0 #38bdf8, 0 0 8px rgba(56, 189, 248, 0.4);
}
nav a:active { color: #38bdf8; background: transparent !important; transition: none !important; }
nav a:last-child { padding-right: 0; }


/* =========================================
   3. 레이아웃 (PC Default 1025px ~)
   ========================================= */
.layout-wrapper {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 40px; 
  /* 상단 여백 제거 (헤더 Sticky 처리로 인해 자연스럽게 배치됨) */
  padding: 0 0 40px 0; 
  align-items: start;
}


/* =========================================
   4. 사이드바 (SIDEBAR) - [수정] 위치 조정
   ========================================= */
.sidebar {
  background: var(--bg-card);
  padding: 30px 20px 20px 20px; 
  border-radius: 16px; border: 1px solid var(--border);
  
  position: sticky; position: -webkit-sticky;
  
  /* [수정] 120px -> 100px로 변경하여 헤더 바로 아래에 위치시킴 (내려감 방지) */
  top: 100px; 
  
  height: calc(100vh - 120px);
  overflow-y: auto;
  z-index: 10;
  transform: translateZ(0);
}
.sidebar::-webkit-scrollbar { display: none; }

.profile-card { margin-bottom: 15px; text-align: center; }
.profile-dynamic-box {
  position: relative; width: 120px; height: 120px; margin: 0 auto 20px;
  background: var(--bg-dark); border-radius: 50%; padding: 4px;
  border: 2px solid rgba(56, 189, 248, 0.3);
  box-shadow: 0 0 30px rgba(56, 189, 248, 0.2);
}
.profile-inner-circle { width: 100%; height: 100%; border-radius: 50%; background: var(--bg-card); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.profile-spinner { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--accent); border-bottom-color: #34d399; animation: spin-slow 8s linear infinite; }
@keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* 로고 마크 등 */
.logo-mark-container { position: relative; width: 64px; height: 64px; margin-bottom: 8px; margin-right: 8px; display: flex; align-items: flex-end; justify-content: center; margin: 0 auto 10px; }
.mark-layer-1 { position: absolute; bottom: 0; left: 0; width: 24px; height: 24px; background: #475569; border-radius: 2px; transform: skewY(-10deg); }
.mark-layer-2 { position: absolute; bottom: 16px; left: 16px; width: 24px; height: 24px; background: #94a3b8; border-radius: 2px; transform: skewY(-10deg); }
.mark-layer-3 { position: absolute; bottom: 32px; left: 32px; width: 28px; height: 28px; background: linear-gradient(to top right, #38bdf8, #34d399); border-radius: 2px; transform: skewY(-10deg); box-shadow: 0 0 15px rgba(56, 189, 248, 0.5); display: flex; align-items: center; justify-content: center; }
.mark-pulse { width: 8px; height: 8px; background: #fff; border-radius: 50%; animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

.profile-badge { position: absolute; bottom: 0; right: 0; background: var(--accent); color: var(--bg-dark); padding: 6px; border-radius: 50%; border: 2px solid var(--bg-dark); z-index: 20; display: flex; }
.profile-badge svg { width: 16px; height: 16px; }
.profile-name { font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 5px; }
.profile-role { font-size: 14px; font-weight: 600; color: var(--accent); margin-bottom: 12px; }
.profile-quote { font-size: 13px; color: #fff; font-weight: 300; line-height: 1.6; }
.quote-highlight { font-weight: 700; color: var(--accent); }
.profile-divider { display: block; height: 1px; background: rgba(255, 255, 255, 0.3); width: calc(100% - 10px); margin: 20px auto 0; }

.menu-label { font-size: 15px; font-weight: 700; color: #ffffff; text-transform: uppercase; margin: 30px 0 10px 0; padding-left: 10px; pointer-events: none; }
.menu-label:first-child { margin-top: 10px; }
.sidebar-menu li:not(.menu-label) { margin-left: 10px; width: calc(100% - 10px); padding: 8px 12px; border-radius: 8px; margin-bottom: 2px; color: #cbd5e1; font-size: 14px; cursor: pointer; display: flex; align-items: center; gap: 12px; transition: color 0.2s, background-color 0.2s; }
.sidebar-menu li:not(.menu-label):hover { background: rgba(56, 189, 248, 0.1); color: #fff; transform: translateX(3px); transition: transform 0.2s, background-color 0.2s; }
.sidebar-menu li.active { background: linear-gradient(90deg, rgba(56, 189, 248, 0.15), transparent); border-left: 3px solid #38bdf8; color: #38bdf8; font-weight: 700; }
.sidebar-menu li:not(.menu-label):active { background-color: transparent !important; transform: none !important; }
.sidebar-menu li span { font-size: 16px; filter: grayscale(1); transition: 0.2s; }
.sidebar-menu li:hover span, .sidebar-menu li.active span { filter: grayscale(0); }


/* =========================================
   5. 메인 콘텐츠 (MAIN CONTENT)
   ========================================= */
.main-content { 
  display: flex; flex-direction: column; gap: 60px;
  min-width: 0; 
  overflow-x: hidden; 
}
.section-head { font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; border-left: 4px solid #38bdf8; padding-left: 12px; }
/* index.html 블록구조 변경을 위한 주석처리(25.12.15)
.post-list { display: flex; flex-direction: column; gap: 20px; } */
.post-item { background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(255, 255, 255, 0.2); transition: all 0.3s ease; min-height: 220px; }
.post-item:hover { transform: translateY(-5px); border-color: rgba(56, 189, 248, 0.6); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); }
.post-thumb-box { height: auto !important; position: relative; overflow: hidden; }
.post-thumb { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.post-item:hover .post-thumb { transform: scale(1.05); }
.post-text { flex: 1; padding: 30px; display: flex; flex-direction: column; justify-content: center; text-align: left; }
.post-tag { font-size: 12px; color: #38bdf8; font-weight: 700; text-transform: uppercase; margin-bottom: 8px; }
.post-title { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 10px; line-height: 1.4; }
.post-desc { font-size: 14px; color: #94a3b8; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card { border: 1px solid rgba(255, 255, 255, 0.2) !important; background: rgba(15, 23, 42, 0.6) !important; }
.card:hover { transform: translateY(-5px); border-color: rgba(52, 211, 153, 0.5); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); }
.card-thumb-box { width: 100%; height: 160px; overflow: hidden; }
.card-thumb { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.card:hover .card-thumb { transform: scale(1.1); }
.card-body { padding: 15px 20px; flex-grow: 1; }
.card-title { font-size: 16px; font-weight: 600; color: #fff; margin-bottom: 6px; }
.card-meta { font-size: 12px; color: #64748b; }

/* 푸터 */
footer { background: transparent; border-top: none; padding: 0 0 10px; }
.footer-inner { background: #1e293b; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; gap: 15px; }
.footer-logo { font-family: 'Pretendard', sans-serif; font-size: 24px; font-weight: 800; color: #fff; letter-spacing: -0.5px; line-height: 1; }
.footer-dot { background: linear-gradient(135deg, #60a5fa 0%, #38bdf8 50%, #2dd4bf 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-size: 28px; margin-left: 2px; }
.copyright { font-size: 13px; color: #94a3b8; font-weight: 400; opacity: 0.8; text-align: center; }
.sidebar-visit-status { margin-top: 15px; padding-top: 20px; border-top: 1px dashed rgba(255, 255, 255, 0.15); display: flex; flex-direction: column; gap: 6px; }
.status-row { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: #64748b; }
.status-num { color: #38bdf8; font-weight: 700; font-family: 'Courier New', monospace; }


/* =========================================
   7. 반응형 (MEDIA QUERIES) - 1024px 기준 통합
   ========================================= */

/* [1024px 이하] 태블릿 가로/세로, 스마트폰 가로/세로 */
@media (max-width: 1024px) {
  
  /* 1. 레이아웃: 1단 */
  .layout-wrapper { display: block; }
  
  /* 2. 사이드바: 상단 배치 (Static) */
  .sidebar { 
    position: static; 
    height: auto; 
    margin-bottom: 20px; 
    width: 100%;
    z-index: 1; 
  }

  .profile-card { display: none !important; }
  .sidebar-menu li:has(a[href*="digital-card"]) { display: none !important; }
  .sidebar-menu li:has(a[href*="proposals"]) { display: none !important; }
  .sidebar-menu li.menu-label { display: none !important; }

  .card-grid { grid-template-columns: 1fr; }

  header { padding: 10px 0; }
  
  /* [수정 1] 헤더 내부 좌우 여백을 넉넉하게(16px) 주어 우측에 딱 붙지 않게 함 */
  .header-inner { 
    height: 60px; 
    padding: 0 16px; 
  }
  
  .logo-text { display: none; }
  
  /* --- [수정된 네비게이션 스타일] --- */
  nav {
    gap: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    min-width: 0;
    
    /* [핵심] 메뉴들을 우측으로 밀어버림 */
    justify-content: flex-end; 
    flex-grow: 1; 
  }
  nav::-webkit-scrollbar { display: none; }
  
  nav a {
    /* 터치하기 좋으면서도 너무 넓지 않은 적정 간격 */
    padding: 0 12px; 
    font-size: 14px; 
    white-space: nowrap;
    letter-spacing: normal;
    flex-shrink: 0;
  }
  
  /* 맨 오른쪽 메뉴(상담)의 오른쪽 패딩을 살짝 줄여서(0)
     헤더 컨테이너의 여백(16px)과 합쳐져 자연스럽게 보이도록 설정 
     (원하시면 padding-right: 0 대신 12px 유지해도 무방) */
  nav a:last-child {
    padding-right: 5px;
  }
  
  nav a:not(:last-child)::after {
    content: "|"; 
    position: absolute; 
    right: 0; 
    top: 50%; 
    transform: translateY(-55%);
    font-size: 10px; 
    opacity: 0.3; 
    width: 1px;
  }
  /* --- [수정 끝] --- */
  
  nav a:hover, nav a.active {
    font-weight: 500 !important; /* 굵기 고정 */
    color: #38bdf8;
    /* 그림자로 굵기 효과 냄 */
    text-shadow: 
      0 0 0.5px #38bdf8, 
      0 0 0 #38bdf8, 
      0 0 10px rgba(56, 189, 248, 0.6); 
    transition: color 0.2s, text-shadow 0.2s;
  }
  
  .sidebar-menu li:has(a[href*="view.html"]) { display: none !important; }
  .post-text { padding: 20px; }

  /* 테이블 스타일 유지 */
  .post-text table, .prose-custom table {
    display: table;        
    width: 100%;
    overflow-x: visible;   
    border-collapse: collapse;
    table-layout: auto;    
  }

  .post-text th, .post-text td, .prose-custom th, .prose-custom td {
    min-width: auto;       
    white-space: normal;   
    word-break: keep-all;  
    padding: 8px 4px;
    font-size: 13px;
    vertical-align: middle;
  }

  .post-text table:has(td:nth-child(4)),
  .prose-custom table:has(td:nth-child(4)) {
    display: block;        
    overflow-x: auto;      
    white-space: nowrap;   
  }

  .post-text table:has(td:nth-child(4)) th,
  .post-text table:has(td:nth-child(4)) td {
    min-width: 110px;      
    white-space: normal;   
  }
}

/* 유틸리티 */
.text-gradient { background: linear-gradient(to right, #60a5fa, #34d399); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; font-weight: 800; }
.sidebar-menu li:has(a[href*="iaan-story.html"]), .sidebar-menu li:has(strong:contains("Works Portfolio")) { display: none !important; }
.sidebar-menu li:nth-child(9) { display: none !important; }


/* =========================================
   [추가] 모바일 전용 소셜 아이콘 (우측 정렬 & 회색톤)
   ========================================= */

/* 1. PC에서는 숨김 */
.mobile-social-icons { display: none; }

/* 2. 타이틀 그룹 정렬 (기존 아이콘과 텍스트가 안 찢어지게 묶음) */
.head-title-group {
  display: flex;
  align-items: center;
}

/* 3. 모바일/태블릿(1024px 이하) 설정 */
@media (max-width: 1024px) {
    
    /* 헤더 영역을 양쪽 끝으로 벌림 */
    .section-head {
        display: flex;
        justify-content: space-between; /* 좌우 끝 정렬 */
        align-items: center;
        width: 100%;
        /* 기존 border-left 등의 속성은 그대로 유지됨 */
    }

    /* 아이콘 컨테이너 보이기 */
    .mobile-social-icons {
        display: flex;
        gap: 12px;
        align-items: center;
        padding-right: 5px; /* 우측 끝 너무 딱 붙지 않게 여백 */
    }

    /* 아이콘 스타일 (기본: 회색) */
    .social-icon {
        width: 22px;   /* 크기 적당하게 */
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.2s, filter 0.2s;
    }

    .social-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        /* [핵심] 처음엔 회색조(Grayscale) + 약간 투명하게 하여 튀지 않게 함 */
        filter: grayscale(100%) opacity(0.7); 
        transition: filter 0.2s;
    }

    /* 눌렀을 때(Active) or 호버 시: 원래 색상 복구 */
    .social-icon:active img, .social-icon:hover img {
        filter: grayscale(0%) opacity(1); /* 원래 색상 짠! */
    }
    
    .social-icon:active {
        transform: scale(0.9); /* 꾹 누르는 느낌 */
    }
}