* {
  -webkit-tap-highlight-color: transparent !important;
}
/* ==============================
   FONT
   ============================== */
@font-face {
  font-family:'Pretendard';
  font-weight:100;
  src:url('font/Pretendard-Thin.woff2') format('woff2');
}
@font-face {
  font-family:'Pretendard';
  font-weight:200;
  src:url('font/Pretendard-ExtraLight.woff2') format('woff2');
}
@font-face {
  font-family:'Pretendard';
  font-weight:300;
  src:url('font/Pretendard-Light.woff2') format('woff2');
}
@font-face {
  font-family:'Pretendard';
  font-weight:400;
  src:url('font/Pretendard-Medium.woff2') format('woff2');
}
@font-face {
  font-family:'Griffiths';
  src:url('font/Griffiths.woff2') format('woff2');
  font-weight:normal;
  font-style:normal;
}

/* ==============================
   RESET / BASE
   ============================== */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
html,body{
  height:100%;
  overflow: hidden;
}
body{
  font-family:'Pretendard',sans-serif;
  font-weight:200;
  line-height:1.3;
  color:#000;
  background:#fff;
}

/* ==============================
   LAYOUT (모바일 세로 기준)
   ============================== */
.folder-page{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  position:relative;
  padding-top:max(env(safe-area-inset-top), 8px);
}

/* ==============================
   TITLE
   ============================== */
.title-container {
  display: flex;
  align-items: center;
  justify-content: center;   /* 가운데 정렬 추가 */
  width: 100%;
  max-width: 450px;
  margin-top: 25px;
  margin-bottom:60px;
  padding: 0 30px;
}



.title-container h1.title {
  font-family: 'Griffiths', serif;
  font-size: 2em;
  font-weight: normal;
  color: transparent;
  -webkit-text-stroke: 0.5px #000;
  letter-spacing: 1px;
  flex-shrink: 0;
}



/* ==============================
   NOTICE
   ============================== */
.folder-notice{
  width:100%;
  max-width:450px;
  padding:0 30px;
  margin:0 0 26px 50px;
  display:flex;
  align-items:flex-start;
  gap:8px;
}

.notice-icon{
  width:20px;
  height:20px;
  flex-shrink:0;
  margin-top:2px;
}

.notice-text{
  font: size 1.5em;
  font-weight: 300;
  line-height:1.55;
  color:#444;
}

/* ==============================
   FOLDER LIST
   ============================== */
.folder-list{
  width:100%;
  max-width:400px;
  padding:0 30px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* 개별 다운로드 버튼 */
.folder-item{
  width:100%;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 18px;
  border:1px solid #dcdcdc;
  border-radius:12px;
  background:#fff;
  color:#000;
  text-decoration:none;
  transition:background-color .2s ease, box-shadow .2s ease, transform .1s ease;
}

.folder-item:hover{
  background:#f5f5f5;
  box-shadow:0 4px 10px rgba(0,0,0,0.03);
}

.folder-item:active{
  transform:translateY(1px);
}

.folder-name{
  font-size:14px;
  font-weight:300;
}

/* 다운로드 아이콘 이미지 */
.folder-download-icon{
  width:18px;
  height:18px;
  margin-left:8px;
  flex-shrink:0;
  object-fit:contain;
}

/* ==============================
   FOOTER (하단 고정 느낌)
   ============================== */
.folder-footer{
  position:absolute;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  font-size:11px;
  color:#b5b5b5;
  pointer-events:none;
}
/* ==============================
   좌하단 고정 글로벌 메뉴
   ============================== */

.global-fab{
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 2500;
  font-family:'Pretendard', sans-serif;
}

/* 동그란 버튼 */
.global-fab-btn{
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: transparent;
  background: #fff;
  box-shadow: 0 0px 24px rgba(0,0,0,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

/* 메뉴 아이콘 (이미지) */
.global-fab-icon-img{
  width: 15px;
  height: 15px;
  display: block;
}

/* 팝업 패널 */
.global-fab-panel{
  position: absolute;
  left: 0;
  bottom: 50px;

  padding: 10px 12px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 14px 28px rgba(0,0,0,0.16);
  border: 1px solid #ececec;

  display: none;
  flex-direction: column;
  gap: 6px;

  min-width: 110px; /* 🔥 가로폭 확 줄임 */
  width: fit-content;
}

.global-fab.open .global-fab-panel{
  display: flex;
}

.global-fab-panel a{
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 400;
  color:#222;
  padding: 2px 2px;
}

.global-fab-panel a:hover{
  color:#000;
}

/* 모바일에서 버튼 위치 조금만 위로 */
@media (max-width:480px){
  .global-fab{
    left: 14px;
    bottom: 14px;
  }
}



/* ==============================
   RESPONSIVE
   ============================== */
@media (max-width:480px){
  /* Notice도 동일하게 유지 */
  .folder-notice{
    padding:0 20px;
    margin-left:10px;   /* ← 이거 중요 */
    gap:12px;
  }

  /* 리스트도 20px 유지 */
  .folder-list{
    padding:0 20px;     /* ← 좌우 20px 고정 */
  }

  .folder-item{
    height:44px;
    padding:0 16px;
  }
}

@media (max-width:400px){
  .folder-notice{
    padding:0 20px;
    margin-left:10px;    /* ← 이거 유지 */
    gap:12px;
  }

  .folder-list{
    padding:0 20px;      /* ← 고정 */
  }

  .title-container h1.title{
    font-size:1.65em;
  }

  .folder-name{
    font-size:13.5px;
  }

  .notice-text{
    font-size:12.5px;
  }
}