@font-face { font-family: 'NanumSquareAcB'; src: url('https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@master/NanumSquareAcB.woff2') format('woff2'); font-weight: 400; font-style: normal; } html, body, *, h1, h2, h3, h4, h5, h6, p, a, span, li, div { font-family: 'NanumSquareAcB', sans-serif; } /* ํ‚คํ‹ฐ์˜ ๐Ÿ’ก ์ฐธ๊ณ ์‚ฌํ•ญ: ๋กœ์ปฌ ํฐํŠธ ํŒŒ์ผ ๋Œ€์‹  CDN์œผ๋กœ ๋ณ€๊ฒฝํ•˜์—ฌ 404 ์˜ค๋ฅ˜ ํ•ด๊ฒฐ */ /* --- @font-face for NanumSquare - CDN --- */ /* ๐Ÿšฉ ํ•ต์‹ฌ ์ˆ˜์ • 1: [purple] ์ƒ‰์ƒ ๋ณ€๊ฒฝ! ๋Œ€๋น„์œจ์„ ๋†’์ด๊ธฐ ์œ„ํ•ด #9349ff์—์„œ #5F009F๋กœ ๋ณ€๊ฒฝํ–ˆ์Šต๋‹ˆ๋‹ค. */ [purple] { color: #5F009F; /* ๊ธฐ์กด #9349ff -> #5F009F */ } [blue] { color: #626DFF; } [red] { color: #ff3a4e; } /* ๐Ÿšฉ ํ•ต์‹ฌ ์ˆ˜์ • 2: [gray] ์ƒ‰์ƒ์„ ๋” ์ง„ํ•˜๊ฒŒ ๋ณ€๊ฒฝํ•˜์—ฌ ๋Œ€๋น„์œจ์„ ๋†’์˜€์Šต๋‹ˆ๋‹ค. */ [gray] { color: #6c757d; /* ๊ธฐ์กด #babfc4 -> #6c757d */ } [yellow] { color: #f9e000; } * { margin: 0; padding: 0; box-sizing: border-box; line-height: 1.5em; font-family: 'NanumSquareAcB', sans-serif; /* CDN์œผ๋กœ ๋ถˆ๋Ÿฌ์˜จ NanumSquare ์ ์šฉ */ outline: none; } body { color: #343a40; } body[lock] { height: 100vh; overflow: hidden; } a { color: #626DFF; text-decoration: none; } a:hover { /* [purple]์ด ๋ณ€๊ฒฝ๋˜์—ˆ์œผ๋ฏ€๋กœ ์ด ๋ถ€๋ถ„๋„ ์ž๋™์œผ๋กœ #5F009F๋กœ ๋ฐ˜์˜๋ฉ๋‹ˆ๋‹ค. */ color: #5F009F; /* ๊ธฐ์กด #9349ff -> #5F009F */ text-decoration: underline; } a span[count] { font-size: 0.9em; /* [purple]์ด ๋ณ€๊ฒฝ๋˜์—ˆ์œผ๋ฏ€๋กœ ์ด ๋ถ€๋ถ„๋„ ์ž๋™์œผ๋กœ #5F009F๋กœ ๋ฐ˜์˜๋ฉ๋‹ˆ๋‹ค. */ color: #5F009F; /* ๊ธฐ์กด #9349ff -> #5F009F */ } img { display: inline-block; width: 100%; } h2, h3, h4, h5, h6 { margin: 0.5em 0; } [pin] { font-size: 0.9em; } form { width: 100%; max-width: 600px; margin: auto; padding: 1em; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25); border-radius: 0.4em; } label, input, textarea, select, button { display: block; width: 100%; } label { margin-left: 0.5em; margin-bottom: 0.25em; font-size: 0.9em; color: #868e96; } input, textarea, select { font-size: 1em; border: none; -webkit-border-radius: 0; border-radius: 0.4em; } input, textarea, select { padding: 0.5em 1em; margin-bottom: 1em; -webkit-appearance: none; appearance: none; border: 1px solid #babfc4; color: #343a40; } input[type="password"] { font-family: 'NanumSquareAcB', sans-serif; } /* ๐Ÿšฉ ํ•ต์‹ฌ ์ˆ˜์ • 3: ํ”Œ๋ ˆ์ด์Šคํ™€๋” ์ƒ‰์ƒ๋„ ๋Œ€๋น„์œจ์„ ๋†’์˜€์Šต๋‹ˆ๋‹ค. */ input::placeholder { color: #868e96; /* ๊ธฐ์กด #babfc4 -> #868e96 */ font-size: 0.9em; } textarea { resize: none; height: 200px; } select { background: #fff; } button { margin-top: 2em; padding: 0.5em; cursor: pointer; /* [purple]์ด ๋ณ€๊ฒฝ๋˜์—ˆ์œผ๋ฏ€๋กœ ๊ทธ๋ผ๋ฐ์ด์…˜ ์‹œ์ž‘ ์ƒ‰์ƒ๋„ #5F009F๋กœ ๋ฐ˜์˜๋ฉ๋‹ˆ๋‹ค. */ background: linear-gradient(125deg, #5F009F, #ff3a4e); /* ๊ธฐ์กด #9349ff -> #5F009F */ background-size: 150% 150%; color: #fff; -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25); } button:hover { background-position: 50% 50%; } /* ๐Ÿšฉ ํ•ต์‹ฌ ์ˆ˜์ • 4: ๋น„ํ™œ์„ฑํ™” ๋ฒ„ํŠผ ํ…์ŠคํŠธ ์ƒ‰์ƒ๋„ ๋Œ€๋น„์œจ์„ ๋†’์˜€์Šต๋‹ˆ๋‹ค. */ button[type="submit"][disabled] { color: #adb5bd; /* ๊ธฐ์กด #babfc4 -> #adb5bd */ cursor: wait; } header { position: relative; padding: 1em; width: 100%; max-width: 1200px; margin: auto; } header a:hover { text-decoration: none; } header div[logo] { display: inline-block; margin-left: 1em; border-bottom: 1px solid rgba(255, 255, 255, 0); cursor: pointer; -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } header div[logo]:hover { border-bottom: 1px solid #ff3a4e; } header div[logo] div { display: inline-block; pointer-events: none; } header div[logo] div[svg-box] { width: 1.3em; } /* ๐Ÿšฉ ํ‚คํ‹ฐ์˜ ๐Ÿ’– ์ตœ์ข… ๋ณด์™„ ์ˆ˜์ •: div[data-title] - '์ „์ฒด์™€ ์กฐํ™”๋กญ๊ฒŒ' ๋”์šฑ ์„ ๋ช…ํ•˜๊ณ  ์„ธ๋ จ๋˜๊ฒŒ! */ div[data-title] { /* โœจ 'Pretendard'๋Š” ์„ธ๋ จ๋˜๋ฉด์„œ๋„ ๊ฐ€๋…์„ฑ์ด ๋›ฐ์–ด๋‚˜ ํ˜„๋Œ€ ์›น ๋””์ž์ธ์— ๋งค์šฐ ์ ํ•ฉํ•œ ํฐํŠธ์ž…๋‹ˆ๋‹ค. (๋ฐ˜๋“œ์‹œ HTML ๋ถ€๋ถ„์— CDN ๋งํฌ ์ถ”๊ฐ€ ํ•„์š”!) ๋งŒ์•ฝ 'NanumSquare'๋กœ ํ†ต์ผํ•˜๊ณ  ์‹ถ์œผ์‹œ๋ฉด ์•„๋ž˜ ์ฃผ์„ ์ฒ˜๋ฆฌ๋œ ๋ผ์ธ์„ ํ™œ์„ฑํ™”ํ•˜์„ธ์š”. */ font-family: 'NanumSquareAcB', sans-serif; /* ํฐํŠธ ๊ตต๊ธฐ๋ฅผ ๋‹ค์‹œ 'bold (700)'๋กœ ์„ค์ •ํ•˜์—ฌ ์ œ๋ชฉ์˜ ์กด์žฌ๊ฐ์„ ํ™•์‹คํžˆ ํ•˜๊ณ , ์„ ๋ช…ํ•œ ์ธ์ƒ์„ ์ค๋‹ˆ๋‹ค. */ font-weight: 700; /* ์กด์žฌ๊ฐ ์žˆ๋Š” ์ œ๋ชฉ์„ ์œ„ํ•ด ๋‹ค์‹œ 700 (bold)์œผ๋กœ ๋ณ€๊ฒฝ */ font-size: 26px; /* ํฐํŠธ ์‚ฌ์ด์ฆˆ๋ฅผ 24px์—์„œ 26px๋กœ ์•ฝ๊ฐ„ ํ‚ค์›Œ ์‹œ๊ฐ์  ๊ฐ•์กฐ! */ letter-spacing: 0.5px; /* ๊ธฐ์กด ๊ฐ„๊ฒฉ ์œ ์ง€ */ /* ๐ŸŽจ ์ƒ‰์ƒ ์กฐ์ •: ์ „์ฒด ๊ทธ๋ผ๋ฐ์ด์…˜(#5F009F - #ff3a4e)๊ณผ ์ž˜ ์–ด์šฐ๋Ÿฌ์ง€๋ฉด์„œ๋„ ๋ˆˆ์— ๋” ์ž˜ ๋“ค์–ด์˜ค๋„๋ก '๋ฏธ๋“œํ†ค์˜ ํผํ”Œ' ๊ณ„์—ด์„ ์„ ํƒํ–ˆ์Šต๋‹ˆ๋‹ค. ๋ฉ”์ธ ๊ทธ๋ผ๋ฐ์ด์…˜์˜ ์‹œ์ž‘ ์ƒ‰์ƒ์ธ #5F009F์™€ #626DFF (๋ธ”๋ฃจ) ์‚ฌ์ด์—์„œ ์กฐํ™”๋กญ๊ฒŒ ์—ฐ๊ฒฐ๋  ๊ฑฐ์˜ˆ์š”. */ color: #7A3AA9; /* ๊ธฐ์กด #4A0072๋ณด๋‹ค ๋ฐ์ง€๋งŒ ๊นŠ์ด ์žˆ๋Š” ํผํ”Œ๋กœ ๋ณ€๊ฒฝ, ๋” ์„ ๋ช…ํ•˜๊ณ  ์กฐํ™”๋กœ์šด ๋Š๋‚Œ */ /* ํ…์ŠคํŠธ ๊ทธ๋ฆผ์ž๋ฅผ ๋‹ค์‹œ ์•ฝ๊ฐ„ ๊ฐ•์กฐํ•˜์—ฌ ๊ธ€์”จ๊ฐ€ ๋ฐฐ๊ฒฝ์— ๋ฌปํžˆ์ง€ ์•Š๋„๋ก ํ•ฉ๋‹ˆ๋‹ค. */ text-shadow: 1px 1px 3px rgba(0,0,0,0.2); /* ๊ทธ๋ฆผ์ž ํšจ๊ณผ๋ฅผ ์•ฝ๊ฐ„ ๋” ์ฃผ์–ด ์ž…์ฒด๊ฐ ๋ถ€์—ฌ */ } /* ๐Ÿšฉ ํ•ต์‹ฌ ์ˆ˜์ • 5-2: ๋กœ๊ณ  SVG ์ˆ˜์ • (index.html์—์„œ ์˜ฎ๊ฒจ์˜ด) */ div[svg-box] svg { width: 100%; height: 100%; display: block; } /* header div[logo] div[title]์— ๊ทธ๋ผ๋ฐ์ด์…˜์ด ์ ์šฉ๋˜์–ด ์žˆ๋˜ ์›๋ž˜ ์Šคํƒ€์ผ (์ด์ œ [data-title]์ด ๋Œ€์‹ ํ•ฉ๋‹ˆ๋‹ค.) */ /* HTML ๊ตฌ์กฐ ์ƒ
์ด ์‚ฌ์šฉ๋˜๋ฏ€๋กœ ์ด ๋ถ€๋ถ„์€ ์ฃผ์„ ์ฒ˜๋ฆฌํ•ฉ๋‹ˆ๋‹ค. */ /* header div[logo] div[title] { font-size: 1.3em; background: linear-gradient(125deg, #5F009F, #ff3a4e); color: transparent; -webkit-background-clip: text; } */ header div[profile] { position: absolute; top: 1em; right: 1em; } header div[profile] img[thumb] { width: 50px; cursor: pointer; } header div[profile] a[signin] { display: inline-block; color: #f9e000; font-weight: 700; margin-top: 0.3em; } div[path] { width: 100%; max-width: 1200px; margin: auto; padding: 0 1em; font-weight: 300; } div[path] a { color: #626DFF; } /* ์ด ๋ถ€๋ถ„์€ ์œ„์ชฝ a:hover์™€ ์ค‘๋ณต๋ฉ๋‹ˆ๋‹ค. ์œ„์— ์ •์˜๋œ ๊ฒƒ์„ ๋”ฐ๋ฅด๋„๋ก ์œ ์ง€ํ•ฉ๋‹ˆ๋‹ค. */ /* a:hover { color: #5F009F; } */ /* ๐Ÿšฉ ํ•ต์‹ฌ ์ˆ˜์ • 6: ๊ฒฝ๋กœ ํ™”์‚ดํ‘œ ์ƒ‰์ƒ๋„ ๋Œ€๋น„์œจ์„ ๋†’์˜€์Šต๋‹ˆ๋‹ค. */ div[path] span[arrow] { font-size: 0.9em; color: #868e96; /* ๊ธฐ์กด #babfc4 -> #868e96 */ } main { padding: 1em; width: 100%; max-width: 1200px; margin: auto; } main section { padding: 1em; margin: 2em 0; border-radius: 0.4em; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25); } main section > h2 { display: inline-block; font-weight: 400; font-size: 1.4em; /* [purple]์ด ๋ณ€๊ฒฝ๋˜์—ˆ์œผ๋ฏ€๋กœ ๊ทธ๋ผ๋ฐ์ด์…˜ ์‹œ์ž‘ ์ƒ‰์ƒ๋„ #5F009F๋กœ ๋ฐ˜์˜๋ฉ๋‹ˆ๋‹ค. */ background: linear-gradient(125deg, #5F009F, #ff3a4e); /* ๊ธฐ์กด #9349ff -> #5F009F */ color: transparent; -webkit-background-clip: text; } main section[title] { padding: 5em 1em 4em; margin-top: 0; /* [purple]์ด ๋ณ€๊ฒฝ๋˜์—ˆ์œผ๋ฏ€๋กœ ๊ทธ๋ผ๋ฐ์ด์…˜ ์‹œ์ž‘ ์ƒ‰์ƒ๋„ #5F009F๋กœ ๋ฐ˜์˜๋ฉ๋‹ˆ๋‹ค. */ background: linear-gradient(125deg, #5F009F, #ff3a4e); /* ๊ธฐ์กด #9349ff -> #5F009F */ background-size: 150% 150%; border-radius: 0.4em; color: #fff; text-align: center; -webkit-animation: 10s introBg ease infinite; -moz-animation: 10s introBg ease infinite; animation: 10s introBg ease infinite; } main section[title] h1 { font-size: 1.5em; font-weight: 300; margin-bottom: 1em; } main section[title] h1[spot-page] { font-size: 1.4em; } main section[title] p { font-weight: 300; } main section[dateUpdated] { box-shadow: none; font-size: 0.8em; color: #868e96; } main section[list] { text-align: center; box-shadow: none; } /* ๐Ÿšฉ ์ถ”๊ฐ€: ์—…์†Œ ๋ชฉ๋ก ๊ทธ๋ฆฌ๋“œ ๊ฐ„๊ฒฉ ์ฆ๊ฐ€ */ main section[list] div[wrapper] { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 1.5em; /* ๊ธฐ์กด 1em์—์„œ 1.5em์œผ๋กœ ์ฆ๊ฐ€ */ } /* ๐Ÿšฉ ์ถ”๊ฐ€: ๊ฐ ์—…์†Œ ๋ชฉ๋ก ๋ฐ•์Šค ํฌ๊ธฐ ์ค„์ด๊ธฐ */ main section[list] div[wrapper] ul { display: block; padding: 1em; /* ๊ธฐ์กด 1.5em์—์„œ 1em์œผ๋กœ ์ค„์ž„ */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); border-radius: 8px; min-height: 150px; /* ๊ธฐ์กด 200px์—์„œ 150px๋กœ ์ค„์ž„ */ display: flex; flex-direction: column; justify-content: flex-start; align-items: center; } /* ๐Ÿšฉ ์ถ”๊ฐ€: ์—…์†Œ ๋ชฉ๋ก ์ œ๋ชฉ ํฌ๊ธฐ ์ฆ๊ฐ€ */ main section[list] div[wrapper] ul h3 { font-size: 1.2em; /* ๊ธฐ์กด 1.1em์—์„œ 1.2em์œผ๋กœ ์ฆ๊ฐ€ */ margin-top: 0; margin-bottom: 15px; /* ํ•˜๋‹จ ๋งˆ์ง„ ์ฆ๊ฐ€ */ padding-bottom: 8px; /* ํ•˜๋‹จ ํŒจ๋”ฉ ์ถ”๊ฐ€ */ border-bottom: 2px solid #f0f0f0; /* ๊ตฌ๋ถ„์„  ์ถ”๊ฐ€ */ } main section[list] div[wrapper] ul h3 a { border-bottom: 1px solid rgba(0, 0, 0, 0); /* [purple]์ด ๋ณ€๊ฒฝ๋˜์—ˆ์œผ๋ฏ€๋กœ ๊ทธ๋ผ๋ฐ์ด์…˜ ์‹œ์ž‘ ์ƒ‰์ƒ๋„ #5F009F๋กœ ๋ฐ˜์˜๋ฉ๋‹ˆ๋‹ค. */ background: linear-gradient(125deg, #5F009F, #ff3a4e); /* ๊ธฐ์กด #9349ff -> #5F009F */ color: transparent; -webkit-background-clip: text; } main section[list] div[wrapper] ul h3 a:hover { /* [purple]์ด ๋ณ€๊ฒฝ๋˜์—ˆ์œผ๋ฏ€๋กœ ์ด ๋ถ€๋ถ„๋„ ์ž๋™์œผ๋กœ #5F009F๋กœ ๋ฐ˜์˜๋ฉ๋‹ˆ๋‹ค. */ border-bottom: 1px solid #5F009F; /* ๊ธฐ์กด #9349ff -> #5F009F */ } main section[list] div[wrapper] ul h3[name] { /* [purple]์ด ๋ณ€๊ฒฝ๋˜์—ˆ์œผ๋ฏ€๋กœ ๊ทธ๋ผ๋ฐ์ด์…˜ ์‹œ์ž‘ ์ƒ‰์ƒ๋„ #5F009F๋กœ ๋ฐ˜์˜๋ฉ๋‹ˆ๋‹ค. */ background: linear-gradient(125deg, #5F009F, #ff3a4e); /* ๊ธฐ์กด #9349ff -> #5F009F */ color: transparent; -webkit-background-clip: text; } main section[list] div[wrapper] ul li { list-style-type: none; margin-bottom: 0.5em; } /* ๐Ÿšฉ ํ•ต์‹ฌ ์ˆ˜์ • 7: 'empty' ์ƒํƒœ ๋ชฉ๋ก ํ…์ŠคํŠธ ์ƒ‰์ƒ ๋Œ€๋น„์œจ์„ ๋†’์˜€์Šต๋‹ˆ๋‹ค. */ main section[list] div[wrapper] ul li[empty] { color: #868e96; /* ๊ธฐ์กด #babfc4 -> #868e96 */ } /* ๐Ÿšฉ ํ•ต์‹ฌ ์ˆ˜์ • 8: 'empty' ์ƒํƒœ ๋ชฉ๋ก ๋‚ด ๋งํฌ ํ…์ŠคํŠธ ์ƒ‰์ƒ ๋Œ€๋น„์œจ์„ ๋†’์˜€์Šต๋‹ˆ๋‹ค. */ main section[list] div[wrapper] ul li[empty] a[telegram] { color: #868e96; /* ๊ธฐ์กด #babfc4 -> #868e96 */ } main section[contents] { box-shadow: none; text-align: center; } main section[contents] div[information] { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 1em; } main section[contents] div[information] h2 { /* [purple]์ด ๋ณ€๊ฒฝ๋˜์—ˆ์œผ๋ฏ€๋กœ ๊ทธ๋ผ๋ฐ์ด์…˜ ์‹œ์ž‘ ์ƒ‰์ƒ๋„ #5F009F๋กœ ๋ฐ˜์˜๋ฉ๋‹ˆ๋‹ค. */ background: linear-gradient(125deg, #5F009F, #ff3a4e); /* ๊ธฐ์กด #9349ff -> #5F009F */ color: transparent; -webkit-background-clip: text; } main section[contents] div[information] ul { display: block; padding: 1em; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25); border-radius: 0.4em; list-style: none; } main section[contents] div[information] ul h3 { font-size: 1.1em; font-weight: 600; display: inline-block; /* [purple]์ด ๋ณ€๊ฒฝ๋˜์—ˆ์œผ๋ฏ€๋กœ ๊ทธ๋ผ๋ฐ์ด์…˜ ์‹œ์ž‘ ์ƒ‰์ƒ๋„ #5F009F๋กœ ๋ฐ˜์˜๋ฉ๋‹ˆ๋‹ค. */ background: linear-gradient(125deg, #5F009F, #ff3a4e); /* ๊ธฐ์กด #9349ff -> #5F009F */ color: transparent; -webkit-background-clip: text; } main section[contents] div[information] ul li { margin-bottom: 0.5em; font-size: 0.9em; } main section[map] { padding: 0; text-align: center; } main section[map] h2 { display: inline-block; /* [purple]์ด ๋ณ€๊ฒฝ๋˜์—ˆ์œผ๋ฏ€๋กœ ๊ทธ๋ผ๋ฐ์ด์…˜ ์‹œ์ž‘ ์ƒ‰์ƒ๋„ #5F009F๋กœ ๋ฐ˜์˜๋ฉ๋‹ˆ๋‹ค. */ background: linear-gradient(125deg, #5F009F, #ff3a4e); /* ๊ธฐ์กด #9349ff -> #5F009F */ color: transparent; -webkit-background-clip: text; } main section[map] p { margin-bottom: 1em; } main section[map] iframe { width: 100%; height: 500px; border: none; border-radius: 0.4em; } main section[article] { box-shadow: none; text-align: center; } main section[article] article { text-align: left; } main section[article] article > div { margin-bottom: 2em; } main section[article] article > div h3 { /* [purple]์ด ๋ณ€๊ฒฝ๋˜์—ˆ์œผ๋ฏ€๋กœ ๊ทธ๋ผ๋ฐ์ด์…˜ ์‹œ์ž‘ ์ƒ‰์ƒ๋„ #5F009F๋กœ ๋ฐ˜์˜๋ฉ๋‹ˆ๋‹ค. */ background: linear-gradient(125deg, #5F009F, #ff3a4e); /* ๊ธฐ์กด #9349ff -> #5F009F */ color: transparent; -webkit-background-clip: text; display: inline-block; } main section[article] article > div ol, main section[article] article > div ul { margin-left: 1.5em; } main section[article] article > div ol li, main section[article] article > div ul li { margin-bottom: 0.5em; } main section[article] article div[partials] { padding: 1em; } footer { margin-top: 5em; padding: 3em 1em; font-size: 0.9em; font-weight: 300; text-align: center; color: #868e96; box-shadow: 0 -4px 5px 0 rgba(0, 0, 0, 0.1); } div[modals] { position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow: scroll; padding: 1em; -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); background: rgba(32, 33, 36, 0.5); display: none; } div[modals][show] { display: block; } div[modals] div[modal] { position: relative; width: 100%; max-width: 700px; background: #fff; margin: 5em auto; padding: 2em 1em; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25); border-radius: 0.4em; } div[modals] div[modal] div[contents] div[loading] { font-size: 0.9em; color: #868e96; text-align: center; margin: 5em 0; } div[alert-wrapper] { position: fixed; top: 0; left: 0; right: 0; bottom: 0; -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); background: rgba(32, 33, 36, 0.5); display: none; } div[alert-wrapper][show] { -webkit-display: flex; -moz-display: flex; -ms-display: flex; -o-display: flex; display: flex; justify-content: center; align-items: center; } div[alert-wrapper] div[alert] { margin: 2em; padding: 2em 1em; width: 100%; max-width: 500px; background: #fff; text-align: center; border-radius: 0.4em; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25); } @-webkit-keyframes introBg { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @-moz-keyframes introBg { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes introBg { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @media (max-width: 500px) { main section[list] div[wrapper], main section[contents] div[information] { grid-template-columns: repeat(2, 1fr); } } /* ๐Ÿšฉ ์Šฌ๋ผ์ด๋“œ ์ปจํ…Œ์ด๋„ˆ ๋†’์ด๋„ ํ•จ๊ป˜ ์ค„์ด๊ธฐ */ .rotating-list-container { position: relative; height: 30px; overflow: hidden; margin-bottom: 10px; } .rotating-list-container li { position: absolute; top: 50%; /* ๋ฐ•์Šค์˜ ์„ธ๋กœ ์ค‘์•™ */ left: 100%; width: 100%; opacity: 0; display: block !important; transition: all 0.8s ease-in-out; pointer-events: none; padding: 8px 0; transform: translateY(-50%); /* ์ •ํ™•ํ•œ ์ค‘์•™ ์ •๋ ฌ์„ ์œ„ํ•ด */ } .rotating-list-container li.is-active { left: 0; opacity: 1; pointer-events: auto; top: 50%; /* ํ™œ์„ฑํ™” ์‹œ์—๋„ ๋™์ผํ•˜๊ฒŒ ์ค‘์•™ */ transform: translateY(-50%); /* ์ •ํ™•ํ•œ ์ค‘์•™ ์ •๋ ฌ์„ ์œ„ํ•ด */ } /* ๐Ÿšฉ ํ•ต์‹ฌ ์ถ”๊ฐ€ 10: ๊ทธ๋ ˆ์ด ๊ทธ๋ผ๋ฐ์ด์…˜ ์• ๋‹ˆ๋ฉ”์ด์…˜ ํšจ๊ณผ */ .gradient-text-animation { background: linear-gradient(90deg, #868e96, #adb5bd, #6c757d, #868e96); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradientShift 3s ease-in-out infinite; } @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ๐Ÿšฉ ํ•ต์‹ฌ ์ถ”๊ฐ€ 11: ์—…์†Œ๋ช…๊ณผ ์„ค๋ช…์˜ ์‹œ๊ฐ์  ์ฐจ์ด๋ฅผ ์œ„ํ•œ ์Šคํƒ€์ผ */ main section[list] ul li[itemprop="mainEntity"] [itemprop="name"] { font-weight: bold; font-size: 1.1em; /* ๊ธ€์”จ ํฌ๊ธฐ ์•ฝ๊ฐ„ ํ‚ค์›€ */ } /* ๐Ÿšฉ ํ•ต์‹ฌ ์ถ”๊ฐ€ 12: .business-description-section ๋ฐ ๊ด€๋ จ ์Šคํƒ€์ผ ์ถ”๊ฐ€ */ .business-description-section { padding: 25px; /* ๊ธฐ์กด 20px์—์„œ 25px๋กœ ํŒจ๋”ฉ ์ฆ๊ฐ€ */ background-color: #f5f5f5; border-radius: 10px; /* ๋ชจ์„œ๋ฆฌ ๋‘ฅ๊ธ€๊ธฐ ์ฆ๊ฐ€ */ margin-top: 40px; /* ์ƒ๋‹จ ๋งˆ์ง„ ์ฆ๊ฐ€๋กœ ๋” ์•„๋ž˜๋กœ ๋‚ด๋ฆผ */ box-shadow: 0 4px 8px rgba(0,0,0,0.15); /* ๊ทธ๋ฆผ์ž ๊ฐ•์กฐ */ } .business-description-section h2 { font-size: 26px; /* ๊ธฐ์กด 24px์—์„œ 26px๋กœ ํ‚ค์›€ */ color: #222; margin-bottom: 30px; /* ํ•˜๋‹จ ๋งˆ์ง„ ์ฆ๊ฐ€ */ text-align: center; font-weight: 700; } .business-description-section h3 { font-size: 22px; /* ๊ธฐ์กด 20px์—์„œ 22px๋กœ ํ‚ค์›€ */ color: #444; margin-top: 35px; /* ์ƒ๋‹จ ๋งˆ์ง„ ์ฆ๊ฐ€ */ margin-bottom: 20px; /* ํ•˜๋‹จ ๋งˆ์ง„ ์ฆ๊ฐ€ */ padding-bottom: 12px; /* ํŒจ๋”ฉ ์ฆ๊ฐ€ */ border-bottom: 3px solid #ddd; /* ์„  ๋‘๊ป˜ ์ฆ๊ฐ€ */ } .business-description-item { background-color: #ffffff; border: 2px solid #e0e0e0; /* ํ…Œ๋‘๋ฆฌ ๋‘๊ป˜ ์ฆ๊ฐ€ */ border-radius: 8px; /* ๋ชจ์„œ๋ฆฌ ๋‘ฅ๊ธ€๊ธฐ ์ฆ๊ฐ€ */ padding: 15px 18px; /* ํŒจ๋”ฉ ์ฆ๊ฐ€ */ margin-bottom: 15px; /* ํ•˜๋‹จ ๋งˆ์ง„ ์ฆ๊ฐ€ */ line-height: 1.6; /* ์ค„๊ฐ„๊ฒฉ ์ฆ๊ฐ€ */ color: #333; transition: all 0.3s ease-in-out; /* ํŠธ๋žœ์ง€์…˜ ์‹œ๊ฐ„ ์ฆ๊ฐ€ */ font-size: 1.05em; /* ๊ธ€์”จ ํฌ๊ธฐ ์•ฝ๊ฐ„ ์ฆ๊ฐ€ */ } .business-description-item:hover { box-shadow: 0 6px 12px rgba(0,0,0,0.2); /* ํ˜ธ๋ฒ„ ์‹œ ๊ทธ๋ฆผ์ž ๊ฐ•์กฐ */ transform: translateY(-3px); /* ํ˜ธ๋ฒ„ ์‹œ ์ด๋™ ๊ฑฐ๋ฆฌ ์ฆ๊ฐ€ */ } /* ๐Ÿšฉ ํ•ต์‹ฌ ์ˆ˜์ • 13: .business-description-item strong ์ƒ‰์ƒ ๋ฐ ์• ๋‹ˆ๋ฉ”์ด์…˜ */ .business-description-item strong { color: #5F009F; font-weight: 700; /* ๊ตต๊ธฐ ์ฆ๊ฐ€ */ font-size: 1.1em; /* ํฌ๊ธฐ ์ฆ๊ฐ€ */ animation: police-siren-blink 2s infinite; } @keyframes police-siren-blink { 0%, 100% { color: #5F009F; /* ๋ณ€๊ฒฝ๋œ ๋ณด๋ผ์ƒ‰ */ text-shadow: none; } 25% { color: #007bff; /* ๋ฐ์€ ํŒŒ๋ž€์ƒ‰ */ text-shadow: 0 0 8px rgba(0, 123, 255, 0.8); } 75% { color: #dc3545; /* ๋ฐ์€ ๋นจ๊ฐ„์ƒ‰ */ text-shadow: 0 0 8px rgba(220, 53, 69, 0.8); } } /*# sourceMappingURL=master.css.map */ /* Luxury Enhancement */ h1, h2, h3 { font-weight: 600 !important; letter-spacing: 0.6px !important; line-height: 1.32 !important; } p, li, span, a { font-weight: 400 !important; letter-spacing: 0.15px !important; line-height: 1.55 !important; } body { background-color: #fafafa !important; } /* === Luxury UI Upgrade === */ header div[data-title] { font-weight: 600 !important; font-size: 1.25rem !important; letter-spacing: 0.4px !important; } a { transition: opacity .25s ease, color .25s ease; } a:hover { opacity: .75; } button, .btn { border-radius: 14px !important; padding: 10px 18px !important; transition: background .25s ease, transform .2s ease, box-shadow .3s ease; box-shadow: 0 4px 12px rgba(0,0,0,0.06); } button:hover, .btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.12); } /* ALBAM09 TOP12 REAL NEAREST RESTORE */ #floating-top12-btn{position:fixed;right:12px;bottom:142px;z-index:9998;min-width:92px;padding:11px 14px;border-radius:999px;background:linear-gradient(135deg,#c9b6ff,#8d5cff);color:#fff;font-weight:800;font-size:13px;letter-spacing:.2px;text-align:center;box-shadow:0 10px 26px rgba(70,38,130,.42);border:1px solid rgba(255,255,255,.22);cursor:pointer;user-select:none;} #floating-top12-btn:hover{filter:brightness(1.05);transform:translateY(-1px);} #nearest-open-button{box-shadow:0 10px 26px rgba(70,38,130,.32)!important;} #nearest-panel,#top12-panel{box-sizing:border-box;} /* ===================================================================== ALBAM09 FONT / PREMIUM UI PATCH 2026-05-16 - ์™ธ๋ถ€ ํฐํŠธ ๋‹ค์šด๋กœ๋“œ ์—†์ด PC/๋ชจ๋ฐ”์ผ ๊ธฐ๋ณธ ๊ณ ๊ธ‰ ํ•œ๊ธ€ ํฐํŠธ ์Šคํƒ ์‚ฌ์šฉ - ๊ธฐ์กด NanumSquareAcB ๊ฐ•์ œ ์ ์šฉ์œผ๋กœ ์ƒ๊ธฐ๋˜ ์ดŒ์Šค๋Ÿฌ์šด/์–‡์€ ๋Š๋‚Œ ๋ณด์ • - ์ œ๋ชฉ, ์—…์†Œ๋ช…, ๋ฒ„ํŠผ, ๋ชฉ๋ก ์นด๋“œ ๊ฐ€๋…์„ฑ ๊ฐ•ํ™” ===================================================================== */ :root { --albam-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Pretendard Variable", "Pretendard", "SUIT", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", "๋ง‘์€ ๊ณ ๋”•", Arial, sans-serif; --albam-font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", "Pretendard Variable", "Pretendard", "SUIT", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", "๋ง‘์€ ๊ณ ๋”•", Arial, sans-serif; --albam-ink: #1f1b2d; --albam-muted: #6f687a; --albam-purple: #6d28d9; --albam-pink: #f23d8f; --albam-soft-line: rgba(109, 40, 217, .12); } html { font-family: var(--albam-font-sans) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body, body *:not(svg):not(path) { font-family: var(--albam-font-sans) !important; letter-spacing: -0.018em; } body { color: var(--albam-ink); font-weight: 500; word-break: keep-all; } h1, h2, h3, h4, h5, h6, header div[logo] div[title], header div[logo] div[data-title], main section[list] div[wrapper] ul h3 a, .place-hero h1, .place-card h2, .place-info dt, .place-btn, button { font-family: var(--albam-font-display) !important; font-weight: 850 !important; letter-spacing: -0.042em; } /* ๋กœ๊ณ /์ƒ๋‹จ ํƒ€์ดํ‹€: ๊ธฐ์กด ๊ธฐ๋ณธ ๊ธ€์”จ ๋Š๋‚Œ ์ œ๊ฑฐ */ header div[logo] { display: inline-flex !important; align-items: center; gap: 8px; } header div[logo] div[title], header div[logo] div[data-title] { font-size: clamp(1.18rem, 2.6vw, 1.72rem) !important; line-height: 1.15; font-weight: 900 !important; letter-spacing: -0.055em; color: transparent !important; background: linear-gradient(120deg, var(--albam-purple), var(--albam-pink)); -webkit-background-clip: text; background-clip: text; text-shadow: none !important; } /* ํžˆ์–ด๋กœ ์ œ๋ชฉ: ์–‡๊ณ  ํ—ˆ์ „ํ•œ ๋Š๋‚Œ ์ œ๊ฑฐ */ main section[title] h1 { font-size: clamp(2.05rem, 5.4vw, 4.1rem) !important; font-weight: 950 !important; line-height: 1.08; letter-spacing: -0.075em; margin-bottom: .42em; } main section[title] p { font-size: clamp(.98rem, 2vw, 1.12rem); line-height: 1.72; font-weight: 650; letter-spacing: -0.032em; opacity: .94; } main section > h2 { font-size: clamp(1.45rem, 2.3vw, 1.85rem) !important; font-weight: 950 !important; letter-spacing: -0.06em; line-height: 1.2; } /* ์—…์†Œ ๋ชฉ๋ก ์นด๋“œ: ํฐํŠธ๋งŒ ๋ฐ”๊พธ๋Š” ๊ฒŒ ์•„๋‹ˆ๋ผ ๊ธ€์”จ๊ฐ€ ์‚ด์•„ ๋ณด์ด๊ฒŒ ์นด๋“œ๋„ ์ •๋ˆ */ main section[list] div[wrapper] { gap: clamp(14px, 2vw, 24px) !important; } main section[list] div[wrapper] ul { border: 1px solid var(--albam-soft-line); border-radius: 18px !important; background: linear-gradient(180deg, #fff, #fffafd); box-shadow: 0 12px 28px rgba(28, 18, 45, .08) !important; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } main section[list] div[wrapper] ul:hover { transform: translateY(-3px); border-color: rgba(109, 40, 217, .22); box-shadow: 0 18px 36px rgba(28, 18, 45, .13) !important; } main section[list] div[wrapper] ul h3 { border-bottom: 0 !important; padding-bottom: 0 !important; margin: 10px 10px 12px !important; line-height: 1.18; } main section[list] div[wrapper] ul h3::after { content: ""; display: block; width: 42px; height: 2px; margin: 10px auto 0; border-radius: 999px; background: linear-gradient(90deg, rgba(109,40,217,.20), rgba(242,61,143,.36)); } main section[list] div[wrapper] ul h3 a, main section[list] div[wrapper] ul h3[name] { font-size: clamp(1.08rem, 2vw, 1.36rem) !important; font-weight: 900 !important; letter-spacing: -0.055em; line-height: 1.16; text-decoration: none !important; text-shadow: none !important; } main section[list] div[wrapper] ul li, main section[contents] div[information] ul li, .business-description-item, .place-desc p, .place-info dd { color: #2f2a3c; font-size: .98rem; line-height: 1.72; font-weight: 530; letter-spacing: -0.026em; } /* ์ง€์—ญ ๋ฉ”๋‰ด */ .area-list li a { font-weight: 800 !important; letter-spacing: -0.035em; border: 1px solid rgba(0,0,0,.05); } /* ์ƒ์„ธํŽ˜์ด์ง€ */ .place-hero h1 { font-size: clamp(2.15rem, 5vw, 3.8rem) !important; font-weight: 950 !important; letter-spacing: -0.075em; line-height: 1.05; } .place-hero p, .place-info dd, .place-desc p { word-break: keep-all; } .place-card h2 { font-size: 1.42rem !important; letter-spacing: -0.052em; } .place-info dt { color: var(--albam-purple) !important; font-size: .98rem; } button, .place-btn { font-weight: 900 !important; letter-spacing: -0.04em; text-shadow: none; } input, textarea, select { font-family: var(--albam-font-sans) !important; font-weight: 550; } @media (max-width: 640px) { body, body *:not(svg):not(path) { letter-spacing: -0.025em; } main { padding-left: 10px; padding-right: 10px; } main section[title] h1 { font-size: clamp(1.85rem, 9vw, 3.1rem) !important; } main section[list] div[wrapper] ul h3 a, main section[list] div[wrapper] ul h3[name] { font-size: 1.08rem !important; } } /* ========================================================= ALBAM09 PATCH: ๋ชจ๋ฐ”์ผ ๋กœ์ปฌ ์ธ์Šคํƒ€ ๊ฐ€์ด๋“œ 2์—ด compact ํ‘œ์‹œ - ์ „ ํŽ˜์ด์ง€ .insta-guide ๊ณตํ†ต ์ ์šฉ - ๊ฐ ํŽ˜์ด์ง€ ์•ˆ์ชฝ