:root { --bg: #0F172A; --text: #F8FAFC; --accent: #38BDF8; --stage-bg: #1E293B; }
body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif; background: var(--bg); color: var(--text); margin: 0; padding: 30px 15px; display: flex; flex-direction: column; align-items: center; min-height: 90vh; }

header { text-align: center; margin-bottom: 35px; margin-top: 10px;}
header h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; margin: 0 0 8px 0; }
header p { color: #94A3B8; font-size: 13px; margin: 0; }

.ios-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px 14px; max-width: 420px; width: 100%; margin: 0 auto; }
@media (max-width: 380px) { .ios-grid { grid-template-columns: repeat(3, 1fr); } }

.app-unit { display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.app-icon { width: 62px; height: 62px; border-radius: 15px; display: flex; justify-content: center; align-items: center; font-size: 28px; box-shadow: 0 8px 16px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.3); margin-bottom: 7px; transition: transform 0.15s; }
.app-unit:hover .app-icon { transform: scale(1.08); }
.app-label { font-size: 11px; font-weight: 500; color: #E2E8F0; text-align: center; max-width: 70px; word-break: keep-all; line-height: 1.2; }

.modal-bg { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.75); backdrop-filter: blur(8px); z-index: 100; justify-content: center; align-items: center; padding: 20px; }
.modal-sheet { background: #1E293B; width: 100%; max-width: 380px; border-radius: 24px; padding: 30px 24px; box-sizing: border-box; text-align: center; position: relative; border: 1px solid rgba(255,255,255,0.1); }
.modal-close { position: absolute; top: 20px; right: 20px; background: #334155; color: #94A3B8; width: 30px; height: 30px; border-radius: 50%; border: none; font-weight: bold; cursor: pointer; }
.m-icon-large { width: 70px; height: 70px; border-radius: 18px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-size: 36px; }
.m-title { font-size: 19px; font-weight: bold; margin: 0 0 16px; }
.m-textbox { background: #0F172A; border-radius: 16px; padding: 16px; text-align: left; margin-bottom: 24px; font-size: 13px; line-height: 1.5; color: #CBD5E1; }
.m-textbox strong { color: var(--accent); font-size: 11px; text-transform: uppercase; display: block; margin-bottom: 4px;}
.btn-launch { background: var(--accent); color: #0F172A; width: 100%; border: none; padding: 16px; border-radius: 14px; font-size: 16px; font-weight: 800; cursor: pointer; }

#workspace { display: none; width: 100%; max-width: 580px; margin: 0 auto; }
.btn-back { background: rgba(255,255,255,0.1); border: none; color: white; padding: 10px 18px; border-radius: 20px; font-size: 14px; font-weight: 600; cursor: pointer; margin-bottom: 20px; }
.tool-stage { background: var(--stage-bg); border-radius: 24px; padding: 30px; border: 1px solid rgba(255,255,255,0.05); text-align: center; }

.drop-area { border: 2px dashed #475569; border-radius: 16px; padding: 40px 20px; cursor: pointer; background: #0F172A; margin: 20px 0; display: block; transition: border-color 0.2s; }
.drop-area:hover { border-color: var(--accent); }
.preview-img { max-width: 100%; max-height: 250px; border-radius: 12px; margin: 15px auto; display: none; }
.control-panel { background: #0F172A; padding: 20px; border-radius: 16px; margin: 20px 0; text-align: left; display: none; }
.control-panel label { display: block; font-size: 13px; color: #94A3B8; margin-bottom: 8px; }
.control-panel input[type="range"] { width: 100%; accent-color: var(--accent); }
.control-panel select, .control-panel input[type="number"] { width: 100%; padding: 12px; border-radius: 8px; background: #1E293B; border: 1px solid #475569; color: white; box-sizing: border-box; margin-bottom: 10px; font-size: 14px;}
.action-btn { background: var(--accent); color: #0F172A; border: none; padding: 16px; width: 100%; font-size: 16px; font-weight: bold; border-radius: 12px; cursor: pointer; display: none; }
.file-info { font-size: 13px; color: #38BDF8; margin-bottom: 10px; font-weight: bold; }

#errorBlackbox { display: none; background: #7F1D1D; color: #FECACA; padding: 15px; border-radius: 10px; margin-top: 25px; font-size: 12px; text-align: left; line-height: 1.5; word-break: break-all; border: 1px solid #F87171; }
/* --- 애드센스 합격용 하단 SEO 본문 스타일 --- */
.seo-article { margin-top: 60px; border-top: 1px solid #334155; padding-top: 40px; text-align: left; color: #CBD5E1; line-height: 1.8; font-size: 15px; }
.seo-article h2 { color: #F8FAFC; font-size: 20px; margin-bottom: 15px; border-left: 4px solid var(--accent); padding-left: 10px; }
.seo-article h3 { color: #38BDF8; font-size: 17px; margin-top: 30px; margin-bottom: 10px; }
.seo-article p { margin-bottom: 15px; }
.seo-article strong { color: #E2E8F0; }
/* --- 메인 화면 하단 마스터 SEO 블록 스타일 --- */
.main-seo-container { max-width: 600px; margin: 60px auto 40px; padding: 40px 20px; border-top: 1px solid #334155; color: #94A3B8; font-size: 14px; line-height: 1.7; text-align: left; }
.main-seo-container h2 { color: #F8FAFC; font-size: 22px; margin-bottom: 20px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.4; }
.main-seo-container h3 { color: var(--accent); font-size: 17px; margin-top: 40px; margin-bottom: 12px; }
.main-seo-container p { margin-bottom: 15px; }
.main-seo-container ul { padding-left: 20px; margin-bottom: 15px; background: rgba(255,255,255,0.02); padding: 20px 20px 20px 40px; border-radius: 12px; }
.main-seo-container li { margin-bottom: 12px; }
.main-seo-container strong { color: #E2E8F0; }
/* --- [Milestone 4] 하단 푸터 행정 링크 디자인 영역 --- */
.site-footer { margin-top: 40px; padding: 30px 20px; text-align: center; border-top: 1px solid #1E293B; background: #0B0F19; }
.footer-links { margin-bottom: 12px; }
/* 링크 글씨 색상 및 밑줄 제거 효과 */
.footer-links a { color: #94A3B8; font-size: 13px; text-decoration: none; font-weight: 500; transition: color 0.2s; }
/* 마우스를 올렸을 때 액센트 컬러로 부드럽게 반짝이는 효과 */
.footer-links a:hover { color: var(--accent); }
/* 링크 사이의 구분선 세로 막대 기호 디자인 */
.footer-bar { color: #334155; margin: 0 10px; font-size: 12px; }
/* 저작권 표시 텍스트 문구 디자인 */
.footer-copy { color: #475569; font-size: 11px; margin: 0; }

/* --- 행정 문서 전용 내부 스크롤 텍스트 상자 디자인 --- */
.legal-text-container { text-align: left; color: #CBD5E1; font-size: 14px; line-height: 1.7; max-height: 400px; overflow-y: auto; padding-right: 10px; }
.legal-text-container h4 { color: #F8FAFC; font-size: 16px; margin-top: 20px; margin-bottom: 8px; font-weight: bold; }
.legal-text-container p { margin-bottom: 12px; }
/* 이메일 주소 등을 돋보이게 해주는 강조 하이라이팅 박스 */
.legal-contact-box { background: #1E293B; border: 1px solid #475569; padding: 15px; border-radius: 8px; margin-top: 15px; color: #38BDF8; font-family: monospace; font-size: 15px; text-align: center; }