@charset "UTF-8";
/*@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);*/
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400&display=swap');
/*
 * 2021.01.01 새해맞이 초안 작성
 * Designed by NUGA
 */

/** 테마 세팅 **/
html {
    --bg-color: #fdfdfd;
    /* --profile-bg: #F4F0EC; */
    --profile-image: url(/assets/images/profile/nuga_2026_char2.jpeg);
    --text-color: #676a6c;
    --link-color: #000;
    --banner-url: url(/assets/images/banner/banner_2021.png);
    --app-box-shadow: 12px 12px 16px 0 rgba(0, 0, 0, 0.25), -8px -8px 12px 0 rgba(255, 255, 255, 0.3);
    --welcome-bar-shadow: 0 0 5px #aaaaaa;
    --sns-link: #c5c5c5;
    --sns-link-hover: #717171;
    --webkit-filter-email: grayscale(100%) contrast(0.5) brightness(1.5);
    --webkit-filter-youtube: grayscale(100%) contrast(0.5) brightness(1.7);
    --webkit-filter-instagram: grayscale(100%) contrast(0.3) brightness(1.5);
    --webkit-filter-memory: grayscale(100%);
}
html.dark {
    --bg-color: #24282D;
    /* --profile-bg: #1a1b1f; */
    --profile-image: url(/assets/images/profile/nuga_2026_char2_dark.png);
    --text-color: #AFBAC6;
    --link-color: #bbb;
    --banner-url: url(/assets/images/banner/banner_2021_light.png);
    --app-box-shadow: 12px 12px 16px 0 rgba(0, 0, 0, 0.25), -8px -8px 12px 0 rgba(0, 0, 0, 0.3);
    --welcome-bar-shadow: 0 0 5px #464646;
    --sns-link: #626367;
    --sns-link-hover: #bbbbbb;
    --webkit-filter-email: grayscale(100%) contrast(0.7) brightness(0.7);
    --webkit-filter-youtube: grayscale(100%) contrast(0.5) brightness(0.9);
    --webkit-filter-instagram: grayscale(100%) contrast(0.3) brightness(0.7);
    --webkit-filter-memory: grayscale(100%) contrast(0.7) brightness(0.5);
}

/** 폰트 **/
@font-face {font-family: 'Pretendard'; font-weight: 45 920; font-style: normal; font-display: swap; src: local('Pretendard Variable'), url('../webfonts/PretendardVariable.woff2') format('woff2-variations')}
@font-face {font-family: 'KoreanFrenchTypewriter'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2102-01@1.0/KoreanFrenchTypewriter.woff') format('woff'); font-weight: normal; font-style: normal}

/** 기본 요소 **/
html,body { height:100%; width:100%; background: var(--bg-color); }
body {
  color: var(--text-color); 
  font-family:'Pretendard',sans-serif; 
  font-size:15px; 
  overflow-x: hidden;
  overflow-y: auto;
  -ms-overflow-style: none;
  position: relative;
}
body::-webkit-scrollbar { display:none; }
h1 { margin:0; padding:0 }
p { font-size:35px; color:#000000; font-weight:700; margin:0; padding:0; margin-bottom: 20px; }
footer {margin:10px 0 200px;}
footer p {text-align:center; padding-bottom:20px; margin-bottom:0; color:#ddd; font-size: 0.9em; letter-spacing: -0.3px;font-weight: 400;}

/* body의 after 가상요소 제거하고 대신 gradient-overlay 클래스 추가 */
.gradient-overlay {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background: linear-gradient(
    to bottom,
    rgba(253, 253, 253, 0) 0%,
    rgba(253, 253, 253, 0.3) 30%,
    rgba(253, 253, 253, 0.8) 45%,
    var(--bg-color) 50%,
    var(--bg-color) 100%
  );
  pointer-events: none;
  z-index: 150;
}

html.dark .gradient-overlay {
  background: linear-gradient(
    to bottom,
    rgba(36, 40, 45, 0) 0%,
    rgba(36, 40, 45, 0.3) 30%,
    rgba(36, 40, 45, 0.8) 45%,
    var(--bg-color) 50%,
    var(--bg-color) 100%
  );
}

/** 테마 토글 버튼 **/
.theme-toggle-wrapper {
  position: absolute;
  right: 0px;
  opacity: 0.8;
  transition: opacity 0.3s;
}

.theme-toggle-wrapper:hover {
  opacity: 1;
}

.theme-toggle {
  position: relative;
  background: var(--bg-color);
  padding: 4px;
  border-radius: 12px;
  display: flex;
  gap: 4px;
  box-shadow: var(--app-box-shadow);
}

.theme-toggle-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  border: none;
  background: none;
  color: var(--text-color);
  cursor: pointer;
  position: relative;
  z-index: 1;
  border-radius: 8px;
  padding: 0;
  outline: none;
}

.theme-toggle-btn:focus {
  outline: none;
}

.theme-toggle-btn.active {
  color: var(--bg-color);
}

.theme-toggle-slider {
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--text-color);
  transition: transform 0.3s;
  left: 4px;
}

/** 프로필 이미지 **/
.middle-box { 
  max-width: 400px; 
  z-index: 1; 
  margin: 0 auto; 
  padding-top: 70px; 
  text-align: center;
  position: relative;
  pointer-events: none;
  min-height: 100vh;
  background: var(--bg-color);
  overflow: hidden;
}

.middle-box * {
  pointer-events: auto;
}

.banner_img {width:180px; height:40px; background-image: var(--banner-url); background-size: cover; margin: 0 auto }
/* .profile { position: relative; background-color: var(--profile-bg); background-image: url(/assets/images/profile/nuga_memoji_2024_trans.png); background-size: cover; ... } */
.profile { position: relative; background-image: var(--profile-image); background-size: cover; background-repeat: no-repeat; background-position: center; width: 200px; height: 200px; border-radius: 25px; margin: auto; margin-top: 30px; margin-bottom: 30px; box-shadow: 0 3.4px 2.7px rgba(0, 0, 0, 0.037), 0 8.7px 6.9px rgba(0, 0, 0, 0.053), 0 17.7px 14.2px rgba(0, 0, 0, 0.067), 0 16.5px 9.2px rgba(0, 0, 0, 0.083), 0 40px 20px rgba(0, 0, 0, 0.12); }
.profile .profile-cover {  position: absolute; height: 100%; width: 100%; z-index:999; }
.profile .content{ position: absolute; top:75%; left:10%; width:230px; display:flex; }
.profile .content span { font-size:24px; font-weight: 600; color: white; z-index: 3; text-align: center; text-shadow: 0 0 6px grey; }

/** 앱 목록 **/
.app-line { display: none; margin-top: 15px; }
.app-line .app-icons { display: inline-flex; margin-top: 10px; }
/* .app-line .app-icons .icon { display: block; height: 65px; width: 65px; margin: 0 10px; -webkit-background-composite: #fff; background-color: #fff; background-size: cover; border-radius: 15px; padding-top: 65px; z-index: 2; text-decoration:none; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.037), 0 1px 2px rgba(0, 0, 0, 0.053), 0 17.7px 14.2px rgba(0, 0, 0, 0.067), 0 10px 10px rgba(0, 0, 0, 0.083), 0 100px 80px rgba(0, 0, 0, 0.12); } */
.app-line .app-icons .icon { display: block; height: 65px; width: 65px; margin: 0 10px; -webkit-background-composite: #fff; background-color: #fff; background-size: cover; border-radius: 15px; padding-top: 65px; z-index: 2; text-decoration:none; box-shadow: var(--app-box-shadow); }
.app-line .app-icons .icon span{ display:block; font-size:14px; font-weight: 400; color:var(--link-color); margin-top:5px;}
.app-line .app-icons .icon-none { background: none; box-shadow: none; }
.app-line .app-icons #cloud { background-image: url(/assets/images/icons/icon_cloud_circle.png); }
.app-line .app-icons #wiki{ background-image: url(/assets/images/icons/icon_wiki.png); }
.app-line .app-icons #wiki_white{ background-image: url(/assets/images/icons/icon_wiki_white.png); background-color: #272b35; }
.app-line .app-icons #nugabox2020 { background-image: url(/assets/images/icons/icon_nugabox_2020.png); }
.app-line .app-icons #portfolio { background-image: url(/assets/images/icons/icon_portfolio.png); }
.app-line .app-icons #github { background-image: url(/assets/images/icons/icon_github.png); }
.app-line .app-icons #velog { background-image: url(/assets/images/icons/icon_velog.png); background-color: #26C898; }
.app-line .app-icons #blog { background-image: url(/assets/images/icons/icon_codenuga.png); }
.app-line .app-icons #terminal { background-image: url(/assets/images/icons/icon_terminal.png); background-color: #404040; }
.app-line .app-icons #devlabs { background-image: url(/assets/images/icons/icon_dev2.png);  }
.app-line .app-icons #nuflix { background-image: url(/assets/images/icons/icon_nuflix.png); background-color: #222222; }
.app-line .app-icons #cyworld { background-image: url(/assets/images/icons/icon_cyworld.png); }
.app-line .app-icons #design { background-image: url(/assets/images/icons/icon_design.png); background-color: #001e36; }
.app-line .app-icons #soundcloud { background-image: url(/assets/images/icons/icon_soundcloud-grad.png); }
.app-line .app-icons #comin { background-image: url(/assets/images/icons/icon_comin_logo_white.png); background-color: #B7363C; }
.app-line .app-icons #siiru { background-image: url(/assets/images/icons/icon_comin_logo_red.png); }
.app-line .app-icons #apple { background-image: url(/assets/images/icons/icon_apple.png); }
.app-line .app-icons #bowling { background-image: url(/assets/images/icons/icon_bowling2.png); }
.app-line .app-icons #soundcloud span{ font-size:13px; letter-spacing: -0.8px; }
.app-line .app-icons #plex { background-image: url(/assets/images/icons/icon_plex2.png); background-color: #282828; }
.app-line .app-icons #nugabox2021 { background-image: url(/assets/images/icons/icon_nugabox_2021.png); }
.app-line .app-icons #tools { background-image: url(/assets/images/icons/icon_nugabox_tools_light.png); background-color: #272b35; }
.app-line .app-icons #devtools { background-image: url(/assets/images/icons/icon_nugabox_tools_dev_light.png); background-color: #272b35; }
.app-line .app-icons #devlog { background-image: url(/assets/images/icons/icon_devlog.png); background-color: #272b35; }
.app-line .app-icons #kakao { background-image: url(/assets/images/icons/icon_kakao.png) }
.app-line .app-icons #kakaotalk { background-image: url(/assets/images/icons/icon_kakao_talk.png) }
.app-line .app-icons #think { background-image: url(/assets/images/icons/icon_think.png); background-color: #FDF8FE; }
.app-line .app-icons #mark { background-image: url(/assets/images/icons/icon_mark.png) }
.app-line .app-icons #note { background-image: url(/assets/images/icons/icon_nuganote_dark.png); background-color: #272b35; }
.app-line .app-icons #naver { background-image: url(/assets/images/icons/icon_naver.png) }
.app-line .app-icons #clock { background-image: url(/assets/images/icons/icon_clock.png); background-color: #272b35; }
.app-line .app-icons #set { background-image: url(/assets/images/icons/icon_set.png); background-color: #272b35; }
.app-line .app-icons #developer { background-image: url(/assets/images/icons/icon_developer.png)}
.app-line .app-icons #love { background-image: url(/assets/images/icons/icon_love.png)}
.app-line .app-icons #ha { background-image: url(/assets/images/icons/icon_ha.png)}
.app-line .app-icons #tesla { background-image: url(/assets/images/icons/icon_tesla.png); background-color: #e31937; }
.app-line .app-icons #cmdcenter { background-image: url(/assets/images/icons/icon_cmdcenter.png);}
.app-line .app-icons #gitlab { background-image: url(/assets/images/icons/icon_gitlab.png);}
.app-line .app-icons #gitlab_black { background-image: url(/assets/images/icons/icon_gitlab_black.png);}
.app-line .app-icons #cyworld { background-image: url(/assets/images/icons/icon_cyworld.png);}
.app-line .app-icons #support { background-image: url(/assets/images/icons/icon_support.png);}
.app-line .app-icons #marrifin { background-image: url(/assets/images/icons/icon_marrifin.png);}
.app-line .app-icons #trip { background-image: url(/assets/images/icons/icon_trip.png);}
.app-line .app-icons #backup { background-image: url(/assets/images/icons/icon_backup.png); background-color: #272b35;}
.app-line .app-icons #todaytome { background-image: url(/assets/images/icons/icon_todaytome.png); background-color: #272b35;}


/** 인사말 텍스트 **/
.welcome { margin:40px 0 10px 0; }
.welcome p{ font-size:18px; color:#bbbbbb; cursor:default;}
.welcome #welcome-text { height:56px; }
.welcome #welcome-text.font-han { font-size:22px; }
.welcome .font-eng { font-family: 'Playfair Display', serif; font-weight: 400}
.welcome .font-han { font-family: 'KoreanFrenchTypewriter', serif; padding-top:15px; font-weight:400}
.welcome .insta-gradient { background:linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.welcome .arrow-icon { flex:right; background-color: transparent; width: 2.8em; display: block; padding: 0.5em; margin: 1em auto; position: relative; cursor: pointer; border-radius: 4px; }
.welcome .arrow-icon .left-bar { position: absolute; background-color: transparent; top: 0; left: 0; width: 20px; height: 5px; display: block; transform: rotate(35deg); float: right; border-radius: 2px; }
.welcome .arrow-icon .right-bar { position: absolute; background-color: transparent; top: 0; left: 12px; width: 20px; height: 5px; display: block; transform: rotate(-35deg); float: right; border-radius: 2px; }
.welcome .arrow-icon .left-bar:after { content: ""; background-color: white; width: 20px; height: 5px; display: block; float: right; border-radius: 6px 10px 10px 6px; transition: all 0.5s cubic-bezier(0.25, 1.7, 0.35, 0.8); z-index: -1; box-shadow: var(--welcome-bar-shadow)}
.welcome .arrow-icon .right-bar:after { content: ""; background-color: white; width: 20px; height: 5px; display: block; float: right; border-radius: 10px 6px 6px 10px; transition: all 0.5s cubic-bezier(0.25, 1.7, 0.35, 0.8); z-index: -1; box-shadow: var(--welcome-bar-shadow)}

/** SNS 링크 **/
.sns-link {display: inline-flex; margin:auto}
.sns-link a {display: flex; justify-content: center; align-items: center; color: var(--sns-link); width: 35px; height: 35px; font-size: 23px; line-height: 35px; border-radius: 10px; background-color: transparent; }
.sns-link a:hover {color: var(--sns-link-hover)}
.sns-link a ion-icon {pointer-events: none}
/*.sns-link a { display: block; margin: 8px 6px 0; color:#cccccc; background-size: contain; background-repeat: no-repeat; font-size:30px; z-index: 1;}*/
/*.sns-link #email { -webkit-filter: var(--webkit-filter-email); background-image: url(/assets/images/icons/email.png); width: 30px; height: 30px;  }*/
/*.sns-link #youtube { -webkit-filter: var(--webkit-filter-youtube); background-image: url(/assets/images/icons/youtube.png); width: 33px; height: 33px; }*/
/*.sns-link #instagram { -webkit-filter: var(--webkit-filter-instagram); background-image: url(/assets/images/icons/instagram.png); width: 28px; height: 28px; margin-top:10px; }*/
/*.sns-link #memory { -webkit-filter: var(--webkit-filter-memory); background-image: url(/assets/images/icons/yellow_ribbon.png); width: 30px; height: 30px;  margin-left: 10px; margin-right:0;}*/
/*.sns-link #email:hover, #youtube:hover, #instagram:hover, #memory:hover{ -webkit-filter: grayscale(0%); filter: none;}*/
/*.sns-link #email:hover{ background:linear-gradient(315deg, #2a2a72 0%, #009ffd 74%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }*/
/*.sns-link #youtube:hover{ background:linear-gradient(147deg, #f71735 0%, #db3445 74%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }*/
/*.sns-link #instagram:hover{ background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }*/

/** 효과 **/
.shadowbox { box-shadow: 0 3.4px 2.7px rgba(0, 0, 0, 0.037), 0 8.7px 6.9px rgba(0, 0, 0, 0.053), 0 17.7px 14.2px rgba(0, 0, 0, 0.067), 0 36.5px 29.2px rgba(0, 0, 0, 0.083), 0 100px 80px rgba(0, 0, 0, 0.12); }
.neumorphism { box-shadow: 12px 12px 16px 0 rgba(0, 0, 0, 0.25), -8px -8px 12px 0 rgba(255, 255, 255, 0.3); }
.hover-ani { transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transition: all 0.3s ease-in-out; }
.hover-ani:hover{ cursor: pointer; transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transition: all 0.3s ease-in-out; }
.open .left-bar:after { transform-origin: center center; transform: rotate(-70deg); }
.open .right-bar:after { transform-origin: center center; transform: rotate(70deg); }

/* 기존 sakura-toggle 스타일 수정 */
.icon-toggle-btn a { 
  position: absolute; 
  background: none; 
  border: none; 
  font-size: 20px; 
  margin: 5px 5px 5px 20px;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

@media (min-width:768px) {
.icon-toggle-btn a {
    font-size: 30px;
  }
}

.snow {
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 3px 3px #fff;
  height: .3vw;
  position: absolute;
  width: .5vw;
}

/* sakura 요소 관련 스타일 추가 */
.sakura-container {
  pointer-events: none !important;
  position: fixed !important;
  z-index: 10;
}

.sakura {
  pointer-events: none !important;
  z-index: 10;
}

/* top-bar 스타일 추가 */
.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 10px 0px;
  z-index: 200;
  pointer-events: none;  /* 기본적으로 이벤트 무시 */
}

.top-bar * {
  pointer-events: auto;  /* 자식 요소들은 이벤트 허용 */
}