/* ========================================================= HIGH TALE 통합 CSS (style.css & asubjectwrite.css 병합) ========================================================= */ /* ===== 1. 폰트 및 Tailwind 초기화 ===== */ /* 🚨 냥비서의 경고: FOUC 방지를 위해 HTML 에 직접 링크하라냥! */ /* @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css'); */ @font-face { font-family: 'ChosunGu'; src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@1.0/ChosunGu.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @tailwind base; @tailwind components; @tailwind utilities; /* ===== 2. 공통 요소 초기화 및 기본 레이아웃 ===== */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; overflow-x: hidden !important; background-color: #f8f9fa !important; } body, input, button, select, textarea, a { font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; letter-spacing: -0.02em; line-height: 1.6; } body { padding-top: 70px; color: #333; } button, input:not([type="checkbox"]), select, textarea { -webkit-appearance: none; appearance: none; border-radius: 0; outline: none; } ul, li { list-style: none !important; } a { text-decoration: none; color: inherit; } #maincontainer { width: 100%; min-height: 80vh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 50px 20px; } main.flex-grow { display: flex !important; flex-direction: column !important; justify-content: flex-start !important; flex-grow: 1; } /* ===== 3. 통합 헤더 (PC 기준) ===== */ #tale-header { width: 100%; height: 70px; position: fixed; top: 0; left: 0; right: 0; z-index: 10000; background-color: #ffffff; border-bottom: 1px solid #eaeaea; transition: all 0.4s ease; } #tale-header.scrolled { box-shadow: 0 4px 15px rgba(0,0,0,0.05); height: 60px; } .header-inner { width: 100%; max-width: 1600px; margin: 0 auto; padding: 0 40px; height: 100%; display: flex; align-items: center; justify-content: space-between; } /* 로고 영역 */ .header-left { display: flex; align-items: center; } #tale-header .logo { color: #000; font-size: 28px; font-weight: 900; letter-spacing: -1px; } #tale-header .logo-num { color: #E50914; } /* TALE78 시그니처 레드 */ /* PC 메인 메뉴 영역 */ .header-center { flex: 1; display: flex; justify-content: center; } .main-menu { display: flex; gap: 35px; align-items: center; } /* 메뉴 간격 넓게 */ .main-menu li { position: relative; } .main-menu li a { font-size: 18px; font-weight: 700; color: #333; display: block; padding: 10px 0; transition: color 0.3s ease; position: relative; } /* 🌟 심플 & 세련: 마우스 올리면 스르륵 생기는 레드 밑줄 애니메이션 */ .main-menu li a::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 3px; background-color: #E50914; transition: all 0.3s ease; transform: translateX(-50%); } .main-menu li a:hover { color: #000; } .main-menu li a:hover::after { width: 100%; } /* 우측 유저 정보 및 로그아웃 영역 */ .header-right { display: flex; align-items: center; } .user-info-box { display: flex; align-items: center; gap: 15px; } .user-info-box .user-nickname { font-size: 16px; color: #555; } .user-info-box .user-nickname strong { font-weight: 900; color: #000; } .logout-btn { padding: 6px 16px; border: 1.5px solid #ddd; border-radius: 20px; /* 둥글고 모던하게 */ font-size: 13px; font-weight: bold; cursor: pointer; color: #555; transition: all 0.3s ease; } .logout-btn:hover { background: #000; color: #fff; border-color: #000; } /* 모바일 전용 요소는 PC에서 완벽 숨김 */ @media screen and (min-width: 1025px) { .mobile-user-info { display: none !important; } #mobile-toggle { display: none !important; } } /* ===== 4. 공통 컴포넌트 (일반 아코디언, 표, 리스트) ===== */ .content-wrapper { max-width: 900px; margin: 40px auto; padding: 0 20px; } .page-title { font-family: 'Paperlogy-8ExtraBold', sans-serif; font-size: 2rem; color: #000; border-left: 8px solid #E50914; padding-left: 15px; margin-bottom: 40px; } /* 🌟 일반 페이지용 아코디언 (충돌 방지를 위해 기본 스타일 유지) */ .collapsible { background-color: #f8f8f8; color: #333; cursor: pointer; padding: 18px; width: 100%; border: 1px solid #ddd; text-align: left; outline: none; font-size: 18px; font-weight: bold; transition: 0.3s; margin-top: 10px; display: flex; justify-content: space-between; align-items: center; border-radius: 0; } .collapsible:after { content: '\002B'; font-size: 20px; } .collapsible.active:after { content: "\2212"; } .collapsible:hover { background-color: #ffff00; color: #000; } .content-box { padding: 0 18px; max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; background-color: #fff; border-left: 1px solid #ddd; border-right: 1px solid #ddd; } .text-inner { padding: 25px 0; line-height: 1.8; color: #444; } .text-inner h2 { color: #000; margin-bottom: 15px; } .link-table { width: 100%; border-collapse: collapse; margin: 20px 0; } .link-table td { border: 1px solid #000; padding: 15px; text-align: center; background: #fdfdfd; } .link-table a { color: #E50914; font-weight: bold; text-decoration: underline; } .topiccontentul { list-style: none; padding: 0; display: flex; flex-direction: column; align-items: center; } .topiccontent { display: flex; gap: 12px; text-align: justify; line-height: 1.8; margin-bottom: 15px; word-break: keep-all; width: 100%; max-width: 800px; } .topiccontent::before { content: "•"; color: black; font-weight: bold; flex-shrink: 0; margin-top: 1px; } /* 🌟 냥비서표 프리미엄 은은한 그림자 스타일냥! */ .frame-image { border-radius: 16px; border: 1px solid rgba(0, 0, 0, 0.1); /* 테두리도 살짝 더 진하게 잡아줬다냥 */ box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25); /* 💡 투명도를 8% -> 25%로 확! 올렸다냥! */ transition: transform 0.3s ease, box-shadow 0.3s ease; } /* 스크린샷에 마우스 올리면 진짜 화면 밖으로 튀어나오는 느낌! */ .frame-image:hover { transform: translateY(-5px); box-shadow: 0 25px 45px rgba(0, 0, 0, 0.4); /* 💡 마우스 올리면 40% 찐한 그림자 뽝! */ } /* ===== 5. 도서/컨텐츠 그리드 ===== */ #bookmainbox { display: grid; grid-template-columns: repeat(10, 100px); grid-auto-rows: 100px; gap: 10px; justify-content: center; max-width: 1100px; margin: 0 auto 50px auto; } .box { width: 95px; height: 95px; background-color: #fff; border: 2px solid #000; border-radius: 12px; display: flex; justify-content: center; align-items: center; text-align: center; font-size: 18px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; padding: 5px; } .box:hover { background-color: yellow; border-color: blue; border-width: 5px; transform: scale(1.15); z-index: 10; } .book-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 30px; max-width: 1200px; margin: 0 auto 50px auto; padding: 0 20px; } .book-card { cursor: pointer; transition: all 0.3s ease; text-align: center; } .book-img-wrapper { width: 100%; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 8px; margin-bottom: 12px; } .book-img-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; } .book-card:hover { transform: translateY(-10px); } .book-card:hover img { transform: scale(1.1); } .book-title { font-size: 16px; font-weight: bold; color: #333; transition: all 0.2s; } .book-card:hover .book-title { background-color: #ffff00; box-shadow: 0 0 5px #ffff00; } /* ===== 6. 세특/보고서 작성 페이지 전용 (asubjectwrite 통합) ===== */ #keywords { display: flex; flex-direction: column; align-items: center; width: 700px; padding: 20px 40px; background-color: #000; color: #fff; border-radius: 12px; border-bottom: 5px solid #E50914; margin-bottom: 15px; text-align: center; } #keywords h2 { font-family: 'ONE-Mobile-POP'; font-size: 24px; } #keywords p { font-size: 14px; color: #bbb; margin-top: 5px; } #filebox { width: 700px; margin-bottom: 40px; } /* 🌟 냥비서의 핵심 처방: FOUC 원인이었던 충돌 방지! #filebox 안의 아코디언만 검은색으로 동작하게 격리시켰다냥! */ #filebox .collapsible { background-color: #333; color: white; padding: 12px; width: 100%; border: none; text-align: center; font-size: 16px; font-family: 'ONE-Mobile-POP'; border-radius: 8px; border-bottom: 3px solid #E50914; justify-content: center; } #filebox .collapsible:after { display: none; } /* 플러스 마이너스 기호 제거 */ #filebox .collapsible.active, #filebox .collapsible:hover { background-color: #000; } .filecontent { padding: 0 18px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; background-color: #f4f4f4; border-radius: 0 0 12px 12px; display: flex; flex-direction: column; align-items: center; } .cover-textarea { width: 700px; min-height: 80px; height: auto; margin-top: 20px; border: 3px solid #000; border-radius: 15px; text-align: center; padding: 20px; font-size: 20px; font-weight: bold; outline: none; resize: none; overflow: hidden; font-family: 'Nanum Gothic', sans-serif; background: #fff; display: block; } fieldset { width: 755px; margin: 15px auto 35px auto; padding: 25px; border: 3px solid black; border-radius: 10px; } legend { font-size: 19px; color: red; font-weight: bold; padding: 0 15px; background: #fff; } .text { width: 100%; height: auto; min-height: 60px; font-size: 18px; line-height: 1.7; border: none; resize: none; text-align: justify; font-family: "Nanum Gothic", sans-serif; overflow: hidden; background: transparent; outline: none; } .guidebox { margin-top: 15px; border-top: 1.5px solid #ddd; padding-top: 12px; color: black; font-size: 18px; white-space: pre-line; } .pdfbutton-main, #jongSelect { width: 220px; height: 55px; border: 3px solid #000; border-radius: 8px; font-family: 'ONE-Mobile-POP'; font-size: 18px; font-weight: bold; cursor: pointer; transition: 0.2s; text-align: center; background-color: #fff; padding: 0 10px; } .pdfbutton-main { background-color: yellow; } .pdfbutton-main:hover { background-color: #E50914; color: #fff; } #jongSelect:hover { background-color: #f0f0f0; } .pdfbutton-cover { width: 250px; height: 70px; background-color: tomato; border: 4px solid yellow; border-radius: 12px; font-family: 'ONE-Mobile-POP'; font-size: 19px; font-weight: bold; cursor: pointer; transition: 0.2s; margin: 30px auto 25px auto; display: block; } .pdfbutton-cover:hover { background-color: #ff0; color: #000; transform: scale(1.03); } /* ===== 7. 모달 창 및 PDF 관련 요소 ===== */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); display: none; align-items: center; justify-content: center; z-index: 9999; } .modal-content { background: #fff; padding: 30px; border-radius: 20px; width: 95%; max-width: 1000px; max-height: 90vh; overflow-y: auto; position: relative; box-shadow: 0 10px 30px rgba(0,0,0,0.5); } .mini-infinity-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; background-color: #000; border: 3px solid #000; margin: 20px 0; } .mini-cell { background-color: #fff; min-height: 150px; padding: 15px; font-size: 15px; line-height: 1.6; display: flex; align-items: center; justify-content: center; text-align: justify; word-break: break-all; white-space: pre-wrap; } .mini-center { background-color: #fffcf0; font-size: 18px; font-weight: bold; color: #E50914; } .close-x-btn { position: absolute; top: 15px; right: 20px; font-size: 35px; font-weight: bold; color: #E50914; cursor: pointer; line-height: 1; transition: transform 0.2s, color 0.2s; user-select: none; z-index: 10001; } .close-x-btn:hover { color: #b20710; transform: scale(1.2); } #reportWrapper { display: none; } #report { position: relative; width: 21cm; height: 29.5cm; overflow: hidden; font-family: 'Malgun Gothic', sans-serif; background-image: url("https://i.ibb.co/6RHSxMQH/cover.jpg"); background-size: cover; background-position: center; } #titleOutput { position: absolute; top: 4cm; left: 0; right: 0; margin: 0 auto; max-width: 14cm; text-align: center; font-size: 35px; font-weight: bold; white-space: pre-wrap; } .section1 { position: absolute; top: 8cm; left: 50%; transform: translateX(-50%); font-size: 28px; } .section2 { position: absolute; top: 19cm; left: 50%; transform: translateX(-50%); font-size: 28px; font-weight: bold; line-height: 1.5; text-align: center; } #pdfContainer { font-family: 'Nanum Gothic', sans-serif; padding: 40px; display: none; } .pdf-section-title { font-size: 14pt; font-weight: 700; margin-top: 20px; } .pdf-content { margin-top: 10px; white-space: pre-wrap; word-break: break-all; text-align: left; } .page-break { page-break-after: always; } /* ===== 8. 푸터 ===== */ #tale-footer { width: 100%; background-color: #000; color: #fff; padding: 30px 0; border-top: 1px solid #222; margin-top: auto; } .footer-inner { width: 100%; max-width: 1600px; margin: 0 auto; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 15px; } .brand-name { font-weight: bold; color: red; } .footer-center { display: flex; align-items: center; gap: 15px; color: #999; font-size: 0.8rem; } .policy-link:hover { color: #ffff00; text-decoration: underline; } .social-text-links { display: flex; gap: 20px; font-size: 0.8rem; font-weight: bold; color: #777; } .sns-text:hover { color: #fff; text-decoration: underline; } /* ========================================================= */ /* ===== 9. 모바일 통합 반응형 (1024px 이하) 헤더 설정 ===== */ /* ========================================================= */ @media screen and (max-width: 1024px) { body { padding-top: 60px; } #tale-header { height: 60px; } .header-inner { padding: 0 20px; position: relative !important; } #tale-header .logo { font-size: 24px; } .header-right { display: none !important; } /* PC 우측 정보 숨김 */ /* 햄버거 메뉴 애니메이션 */ #mobile-toggle { display: flex !important; flex-direction: column; gap: 5px; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); z-index: 10001; cursor: pointer; } #mobile-toggle span { width: 26px; height: 3px; background: #000 !important; transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 3px; } #mobile-toggle.active span { background: #fff !important; } #mobile-toggle.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); } #mobile-toggle.active span:nth-child(2) { opacity: 0; } #mobile-toggle.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* 모바일 다크 모드 서랍장 네비게이션 */ .header-center { position: fixed !important; top: 0 !important; right: -100% !important; width: 75% !important; max-width: 320px; height: 100vh !important; background: #1a1a1a !important; flex-direction: column !important; padding: 80px 25px 30px 25px !important; transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; overflow-y: auto !important; z-index: 9999 !important; justify-content: flex-start !important; align-items: flex-start !important; box-shadow: -5px 0 15px rgba(0,0,0,0.5); } .header-center.mobile-nav-active { right: 0 !important; } /* 모바일 서랍장 내 유저 정보 */ .mobile-user-info { display: flex !important; flex-direction: column; gap: 12px; margin-bottom: 30px; width: 100%; border-bottom: 1px solid #333; padding-bottom: 20px; } .mobile-user-info .user-nickname { color: #aaa; font-size: 1.1rem; } .mobile-user-info .user-nickname strong { color: #fff; font-weight: 900; } .mobile-logout-btn { display: inline-block; width: max-content; padding: 6px 18px; background: #E50914; color: #fff !important; text-align: center; border-radius: 20px; font-size: 13px; font-weight: bold; border: none; text-decoration: none; } /* 모바일 서랍장 내 메뉴 리스트 */ .main-menu { flex-direction: column !important; width: 100% !important; gap: 0 !important; } .main-menu li { width: 100% !important; border-bottom: 1px solid #2a2a2a; } .main-menu li a { padding: 15px 0 !important; color: #ccc !important; font-size: 18px !important; font-weight: 600 !important; display: block; transition: color 0.2s; } .main-menu li a:hover { color: #fff !important; } .main-menu li a::after { display: none; } /* 모바일에서는 밑줄 애니메이션 제거 */ } /* ===== 모바일 인덱스 이미지 반응형 ===== */ #indexhomeimg { width: 900px; max-width: 100%; height: auto; display: block; } /* TALE TRACE 상세화면 갤러리 스타일 */ .taletrace-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 반응형 그리드: 화면 작으면 알아서 줄바꿈 */ gap: 20px; /* 카드 사이 간격 */ margin-top: 30px; margin-bottom: 20px; padding: 10px; } .gallery-item { background-color: #fff; border-radius: 12px; /* 모서리 둥글게 */ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* 은은한 그림자 */ overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid #eaeaea; } /* 마우스 올렸을 때 살짝 뜨는 효과 */ .gallery-item:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); } .img-wrap { width: 100%; height: auto; overflow: hidden; background-color: #f9f9f9; border-bottom: 1px solid #eee; } .gallery-item img { width: 100%; height: auto; display: block; object-fit: cover; /* 이미지 비율 유지 */ transition: transform 0.5s ease; } /* 마우스 올렸을 때 이미지 살짝 확대 */ .gallery-item:hover img { transform: scale(1.03); } .img-caption { padding: 15px; text-align: center; font-size: 15px; font-weight: 600; color: #333; background-color: #fff; letter-spacing: -0.5px; } /* 모바일 모드 보완: 화면이 너무 작을 때 그림자 너무 진하지 않게 */ @media screen and (max-width: 480px) { .taletrace-gallery { grid-template-columns: 1fr; /* 무조건 한 줄 */ gap: 15px; padding: 5px; } }