-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathinfo.html
More file actions
432 lines (388 loc) · 33.3 KB
/
Copy pathinfo.html
File metadata and controls
432 lines (388 loc) · 33.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title>Scentype — 향수 정보</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"/>
<style>
:root{--bg:#fff;--surface:#f8f8f8;--card:#f2f2f2;--border:#e8e8e8;--text:#1a1a1a;--text2:#444;--muted:#888;--pink:#eb9bb4;--pink-light:#fff5f8;--pink-mid:#ffe4ef;--floral:#e8a0b8;--woody:#c4966a;--citrus:#d4be50;--oriental:#c47040;--musky:#9898b0;}
*{margin:0;padding:0;box-sizing:border-box;}html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--text);font-family:'Pretendard',sans-serif;font-weight:400;overflow-x:hidden;}
a{text-decoration:none;color:inherit;}
.nav{position:fixed;top:0;left:0;right:0;z-index:200;background:#fff;border-bottom:1px solid var(--border);height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 48px;}
.nav-logo{font-size:1.3rem;font-weight:800;letter-spacing:-.02em;color:var(--text);}
.nav-logo span{color:var(--pink);}
.nav-menu{display:flex;align-items:center;gap:32px;list-style:none;}
.nav-menu a{font-size:.85rem;font-weight:500;color:var(--muted);transition:color .18s;}
.nav-menu a:hover,.nav-menu a.active{color:var(--text);font-weight:700;}
.nav-cta{padding:.55rem 1.4rem;background:var(--pink);color:#fff;font-size:.82rem;font-weight:600;border-radius:6px;transition:opacity .18s;}
.nav-cta:hover{opacity:.88;}
/* PAGE HERO */
.page-hero{padding:108px 80px 60px;background:#fff;border-bottom:1px solid var(--border);display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;}
.ph-kicker{display:flex;align-items:center;gap:6px;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pink);margin-bottom:12px;}
.ph-kicker-dot{width:6px;height:6px;border-radius:50%;background:var(--pink);}
.ph-title{font-size:clamp(2.2rem,4.5vw,3.6rem);font-weight:800;letter-spacing:-.03em;line-height:1.15;}
.ph-title .hl{color:var(--pink);}
.ph-desc{font-size:.95rem;line-height:1.85;color:var(--text2);margin-bottom:24px;}
/* QUICK TABS */
.quick-tabs{display:flex;gap:0;border:1.5px solid var(--border);border-radius:8px;overflow:hidden;width:fit-content;}
.qtab{font-size:.78rem;font-weight:600;padding:.65rem 1.2rem;color:var(--muted);border-right:1px solid var(--border);transition:all .18s;}
.qtab:last-child{border-right:none;}
.qtab:hover{background:var(--pink-light);color:var(--pink);}
/* SECTION */
.sec{padding:80px;}
.sec-white{background:#fff;}
.sec-gray{background:var(--surface);}
.sec-border{border-bottom:1px solid var(--border);}
.sec-kicker{display:flex;align-items:center;gap:6px;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pink);margin-bottom:10px;}
.sec-kicker-dot{width:5px;height:5px;border-radius:50%;background:var(--pink);}
.sec-title{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:800;letter-spacing:-.02em;margin-bottom:8px;}
.sec-sub{font-size:.88rem;line-height:1.8;color:var(--muted);margin-bottom:36px;max-width:560px;}
/* NOTE CARDS */
.note-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:56px;}
.note-card{background:#fff;border:1.5px solid var(--border);border-radius:14px;padding:28px 24px;transition:all .22s;}
.note-card:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.07);}
.note-card-top{border-color:var(--citrus);}
.note-card-mid{border-color:var(--floral);}
.note-card-base{border-color:var(--woody);}
.note-time-badge{display:inline-flex;align-items:center;gap:5px;font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.28rem .7rem;border-radius:100px;margin-bottom:14px;}
.note-card-top .note-time-badge{background:#fefde8;color:var(--citrus);}
.note-card-mid .note-time-badge{background:var(--pink-light);color:var(--floral);}
.note-card-base .note-time-badge{background:#fdf6ee;color:var(--woody);}
.note-title{font-size:1.3rem;font-weight:800;margin-bottom:10px;}
.note-desc{font-size:.83rem;line-height:1.8;color:var(--text2);margin-bottom:14px;}
.note-chips{display:flex;flex-wrap:wrap;gap:5px;}
.note-chip{font-size:.65rem;font-weight:600;padding:.22rem .6rem;background:var(--surface);color:var(--muted);border-radius:100px;}
/* CONC TABLE */
.conc-table{width:100%;border:1px solid var(--border);border-radius:10px;overflow:hidden;border-collapse:collapse;}
.conc-table th{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:14px 20px;text-align:left;border-bottom:1px solid var(--border);background:var(--surface);}
.conc-table td{font-size:.85rem;padding:16px 20px;border-bottom:1px solid var(--border);vertical-align:middle;}
.conc-table tr:last-child td{border-bottom:none;}
.conc-table tr:hover td{background:var(--pink-light);}
.conc-name{font-size:1rem;font-weight:800;color:var(--text);}
.conc-pct{font-size:.75rem;font-weight:700;color:var(--pink);margin-bottom:4px;}
.conc-bar-row{display:flex;align-items:center;gap:8px;}
.conc-bar{flex:1;height:4px;background:var(--surface);border-radius:2px;overflow:hidden;max-width:120px;}
.conc-bar-fill{height:100%;background:linear-gradient(90deg,var(--pink),#f0aec4);border-radius:2px;}
/* FAMILY PANELS */
.families-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.fam-panel{background:#fff;border:1.5px solid var(--border);border-radius:14px;padding:28px 24px;transition:all .22s;position:relative;overflow:hidden;}
.fam-panel:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.07);}
.fam-panel.musky{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:32px;}
.fam-panel::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;border-radius:2px 0 0 2px;}
.fam-panel.floral::before{background:var(--floral);}
.fam-panel.woody::before{background:var(--woody);}
.fam-panel.citrus::before{background:var(--citrus);}
.fam-panel.oriental::before{background:var(--oriental);}
.fam-panel.musky::before{background:var(--musky);}
.fam-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.fam-dot-lg{width:38px;height:38px;border-radius:10px;flex-shrink:0;}
.fam-panel.floral .fam-dot-lg{background:linear-gradient(135deg,#f4b8d0,#e890b0);}
.fam-panel.woody .fam-dot-lg{background:linear-gradient(135deg,#d4a870,#b88040);}
.fam-panel.citrus .fam-dot-lg{background:linear-gradient(135deg,#f0d860,#d4b830);}
.fam-panel.oriental .fam-dot-lg{background:linear-gradient(135deg,#d49070,#b06030);}
.fam-panel.musky .fam-dot-lg{background:linear-gradient(135deg,#b0b0c8,#8888a8);}
.fam-name{font-size:1.2rem;font-weight:800;}
.fam-en{font-size:.65rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;}
.fam-desc{font-size:.83rem;line-height:1.8;color:var(--text2);margin-bottom:14px;}
.fam-kws{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px;}
.fam-kw{font-size:.65rem;font-weight:600;padding:.22rem .6rem;background:var(--surface);color:var(--muted);border-radius:100px;}
.fam-reps{display:flex;flex-direction:column;gap:4px;}
.fam-rep{font-size:.78rem;color:var(--text2);}
.fam-rep strong{font-weight:700;color:var(--text);}
.fam-reps-label{font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
/* SCENT SIMULATOR */
.sim-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; background: #fff; border: 1.5px solid var(--border); border-radius: 16px; padding: 40px; margin-top: 24px; }
.sim-visual { position: relative; width: 100%; max-width: 300px; margin: 0 auto; }
.sim-svg { width: 100%; height: auto; display: block; opacity: 0.8; }
.sim-hotspot {
position: absolute; width: 16px; height: 16px; background: var(--pink);
border-radius: 50%; cursor: pointer; transform: translate(-50%, -50%);
box-shadow: 0 0 0 0 rgba(235, 155, 180, 0.7);
animation: pulseAnim 2s infinite cubic-bezier(0.66, 0, 0, 1);
transition: transform 0.2s;
}
.sim-hotspot:hover { transform: translate(-50%, -50%) scale(1.3); }
@keyframes pulseAnim {
to { box-shadow: 0 0 0 16px rgba(235, 155, 180, 0); }
}
/* 클릭 시 퍼지는 물결(Spray) 이펙트 */
.ripple {
position: absolute; width: 20px; height: 20px;
background: var(--pink); border-radius: 50%;
transform: translate(-50%, -50%) scale(1);
opacity: 0.8; pointer-events: none;
animation: rippleSpread 0.6s ease-out forwards;
}
@keyframes rippleSpread {
100% { transform: translate(-50%, -50%) scale(5); opacity: 0; }
}
/* 오른쪽 정보 패널 */
.sim-info { display: flex; flex-direction: column; justify-content: center; }
.sim-info-box { background: var(--surface); border-left: 4px solid var(--pink); padding: 32px 24px; border-radius: 0 12px 12px 0; transition: all 0.3s ease; }
.sim-info-box.active { background: var(--pink-light); transform: translateX(8px); }
.sim-icon { font-size: 2rem; margin-bottom: 12px; }
.sim-point-name { font-size: 1.3rem; font-weight: 800; color: var(--text); margin-bottom: 10px; }
.sim-point-desc { font-size: 0.9rem; line-height: 1.8; color: var(--text2); }
@media (max-width: 768px) {
.sim-wrapper { grid-template-columns: 1fr; padding: 24px; }
}
/* FAQ */
.faq-list{border:1px solid var(--border);border-radius:12px;overflow:hidden;}
.faq-item{border-bottom:1px solid var(--border);}
.faq-item:last-child{border-bottom:none;}
.faq-q{width:100%;background:transparent;border:none;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;text-align:left;transition:background .18s;}
.faq-q:hover{background:var(--pink-light);}
.faq-q-text{font-size:.92rem;font-weight:600;color:var(--text);}
.faq-icon{width:26px;height:26px;border:1.5px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .25s;color:var(--muted);}
.faq-item.open .faq-icon{background:var(--pink);border-color:var(--pink);transform:rotate(45deg);color:#fff;}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease,padding .3s;}
.faq-item.open .faq-a{max-height:400px;padding:0 24px 20px;}
.faq-a-inner{font-size:.85rem;line-height:1.9;color:var(--text2);border-left:3px solid var(--pink);padding-left:14px;}
.faq-a-inner strong{color:var(--text);font-weight:700;}
/* CTA */
.cta-bar{padding:60px 80px;background:var(--pink);display:flex;align-items:center;justify-content:space-between;gap:32px;}
.cta-bar-title{font-size:clamp(1.4rem,3vw,2rem);font-weight:800;color:#fff;letter-spacing:-.02em;}
.btn-cta-white{padding:.9rem 2.2rem;background:#fff;color:var(--pink);font-size:.9rem;font-weight:700;border-radius:8px;border:none;cursor:pointer;transition:all .2s;box-shadow:0 4px 16px rgba(0,0,0,.1);}
.btn-cta-white:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.14);}
.footer{padding:36px 80px;background:#fff;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;}
.footer-logo{font-size:1.1rem;font-weight:800;color:var(--text);}
.footer-logo span{color:var(--pink);}
.footer-links{display:flex;gap:24px;}
.footer-links a{font-size:.8rem;font-weight:500;color:var(--muted);transition:color .18s;}
.footer-links a:hover{color:var(--text);}
.footer-copy{font-size:.75rem;color:var(--muted);}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}
@media (max-width: 768px) {
.nav { padding: 0 20px; }
.nav-menu { display: none; }
.hero, .page-hero, .result-hero, .quiz-cta, .sec, .hiw, .families, .picks, .other-types, .perfumes, .main-area, .traits-section, .season-section {
padding: 60px 24px !important;
}
.hero, .result-hero, .quiz-cta, .sim-wrapper, .sm-container, .fam-panel.musky {
grid-template-columns: 1fr !important;
flex-direction: column !important;
text-align: center !important;
gap: 32px;
}
.families-grid, .picks-grid, .steps, .note-grid, .types-grid, .perfumes-grid, .trait-grid, .collection-grid, .hero-card-row {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
.hero-title, .ph-title, .rh-title, .sec-title, .qc-title, .intro-title {
font-size: 2.2rem !important;
text-align: center;
}
.hero-actions, .hero-meta, .rh-actions, .rh-tags, .stats-row, .intro-meta, .sm-actions {
justify-content: center !important;
flex-wrap: wrap;
}
.families-head, .picks-head, .perfumes-head {
flex-direction: column;
align-items: center;
text-align: center;
gap: 16px;
}
.sec-sub { margin: 0 auto 32px auto !important; text-align: center; }
.footer { flex-direction: column; gap: 16px; text-align: center; padding: 32px 24px; }
.conc-table th, .conc-table td { padding: 12px 8px; font-size: 0.75rem; }
.conc-bar-row { display: none; }
}
</style>
</head>
<body>
<nav class="nav">
<a class="nav-logo" href="index.html">Scent<span>ype</span></a>
<ul class="nav-menu">
<li><a href="index.html#families">향 계열</a></li>
<li><a href="index.html#picks">추천 향수</a></li>
<li><a href="info.html" class="active">Info</a></li>
<li><a href="collection.html">Collection</a></li>
</ul>
<a class="nav-cta" href="quiz.html">테스트 시작</a>
</nav>
<div class="page-hero">
<div>
<div class="ph-kicker"><span class="ph-kicker-dot"></span>Perfume Encyclopedia</div>
<h1 class="ph-title">향수를<br><span class="hl">알아가다</span></h1>
</div>
<div>
<p class="ph-desc">향수는 단순한 액세서리가 아닙니다. 노트의 구조, 향 계열의 언어, 올바른 사용법까지 — 향수를 제대로 즐기기 위한 모든 것을 담았습니다.</p>
<nav class="quick-tabs">
<a class="qtab" href="#note_guide">노트 가이드</a>
<a class="qtab" href="#families">향 계열 사전</a>
<a class="qtab" href="#faq">자주 묻는 질문</a>
</nav>
</div>
</div>
<!-- NOTE GUIDE -->
<section class="sec sec-white sec-border" id="note_guide">
<p class="sec-kicker reveal"><span class="sec-kicker-dot"></span>Fragrance Structure</p>
<h2 class="sec-title reveal">향수 노트 가이드</h2>
<p class="sec-sub reveal">향수는 시간이 지남에 따라 세 단계로 향이 펼쳐집니다. 처음 뿌렸을 때와 2시간 뒤의 향이 다른 이유가 바로 노트 구조 때문이에요.</p>
<div class="note-grid reveal">
<div class="note-card note-card-top">
<div class="note-time-badge">발향 직후 · 15~30분</div>
<h3 class="note-title">탑 노트</h3>
<p class="note-desc">향수를 뿌렸을 때 가장 먼저 느껴지는 향입니다. 휘발성이 강해 빠르게 증발하며, 첫인상을 결정합니다. 주로 상쾌하고 가벼운 향이 사용됩니다.</p>
<div class="note-chips"><span class="note-chip">레몬</span><span class="note-chip">베르가못</span><span class="note-chip">만다린</span><span class="note-chip">핑크페퍼</span><span class="note-chip">라임</span></div>
</div>
<div class="note-card note-card-mid">
<div class="note-time-badge">30분~2시간</div>
<h3 class="note-title">미들 노트</h3>
<p class="note-desc">탑 노트가 사라진 후 나타나는 향수의 핵심 향입니다. 하트 노트라고도 불리며, 향수의 전체적인 성격을 결정합니다. 가장 오래 지속됩니다.</p>
<div class="note-chips"><span class="note-chip">장미</span><span class="note-chip">재스민</span><span class="note-chip">피오니</span><span class="note-chip">라벤더</span><span class="note-chip">제라늄</span></div>
</div>
<div class="note-card note-card-base">
<div class="note-time-badge">2시간 이후 · 잔향</div>
<h3 class="note-title">베이스 노트</h3>
<p class="note-desc">가장 오래 남는 향으로, 향수의 깊이와 지속력을 결정합니다. 무거운 분자 구조를 가져 피부에 오래 남으며 탑·미들 노트와 조화를 이룹니다.</p>
<div class="note-chips"><span class="note-chip">샌달우드</span><span class="note-chip">앰버</span><span class="note-chip">머스크</span><span class="note-chip">바닐라</span><span class="note-chip">시더우드</span></div>
</div>
</div>
<p class="sec-kicker reveal"><span class="sec-kicker-dot"></span>Concentration</p>
<h3 class="sec-title reveal" style="font-size:1.5rem;margin-bottom:6px">향수 농도 차이</h3>
<p class="sec-sub reveal" style="margin-bottom:24px">같은 향이라도 농도에 따라 지속 시간과 느낌이 달라져요.</p>
<table class="conc-table reveal">
<thead><tr><th>종류</th><th>농도</th><th>지속 시간</th><th>특징</th><th>추천 상황</th></tr></thead>
<tbody>
<tr><td><div class="conc-name">Parfum</div></td><td><div class="conc-pct">20–30%</div><div class="conc-bar-row"><div class="conc-bar"><div class="conc-bar-fill" style="width:95%"></div></div></div></td><td>8~12시간</td><td>가장 진하고 풍부한 향</td><td>특별한 날, 저녁 약속</td></tr>
<tr><td><div class="conc-name">EDP</div><div style="font-size:.65rem;color:var(--muted)">Eau de Parfum</div></td><td><div class="conc-pct">15–20%</div><div class="conc-bar-row"><div class="conc-bar"><div class="conc-bar-fill" style="width:75%"></div></div></div></td><td>5~8시간</td><td>가장 대중적인 농도</td><td>일상, 데이트, 출근</td></tr>
<tr><td><div class="conc-name">EDT</div><div style="font-size:.65rem;color:var(--muted)">Eau de Toilette</div></td><td><div class="conc-pct">5–15%</div><div class="conc-bar-row"><div class="conc-bar"><div class="conc-bar-fill" style="width:52%"></div></div></div></td><td>3~5시간</td><td>가볍고 산뜻한 느낌</td><td>여름, 데일리, 운동 후</td></tr>
<tr><td><div class="conc-name">EDC</div><div style="font-size:.65rem;color:var(--muted)">Eau de Cologne</div></td><td><div class="conc-pct">2–5%</div><div class="conc-bar-row"><div class="conc-bar"><div class="conc-bar-fill" style="width:28%"></div></div></div></td><td>2~3시간</td><td>매우 가볍고 청량한 느낌</td><td>운동 직후, 여름 바캉스</td></tr>
</tbody>
</table>
</section>
<!-- FAMILIES -->
<section class="sec sec-gray sec-border" id="families">
<p class="sec-kicker reveal"><span class="sec-kicker-dot"></span>Scent Dictionary</p>
<h2 class="sec-title reveal">향 계열 사전</h2>
<p class="sec-sub reveal">향수는 크게 5가지 향 계열로 나뉩니다. 각 계열의 특징과 어울리는 상황을 알면 나에게 맞는 향수를 더 쉽게 찾을 수 있어요.</p>
<div class="families-grid reveal">
<div class="fam-panel floral" id="floral">
<div><div class="fam-head"><div class="fam-dot-lg"></div><span class="fam-name">🌸 플로럴</span></div><p class="fam-en">Floral</p><p class="fam-desc">꽃에서 추출한 향으로 구성된 향수 계열로, 가장 대중적이고 사랑받는 계열입니다. 로맨틱하고 여성스러운 분위기를 연출하며, 장미·재스민·피오니·라일락 등 다양한 꽃 향을 포함합니다.</p><div class="fam-kws"><span class="fam-kw">로맨틱</span><span class="fam-kw">우아한</span><span class="fam-kw">봄</span><span class="fam-kw">여성스러운</span></div></div>
<div><p class="fam-reps-label">대표 향수</p><div class="fam-reps"><p class="fam-rep"><strong>Chanel No.5</strong> — Chanel</p><p class="fam-rep"><strong>Peony & Blush Suede</strong> — Jo Malone</p><p class="fam-rep"><strong>Miss Dior</strong> — Dior</p></div></div>
</div>
<div class="fam-panel woody" id="woody">
<div><div class="fam-head"><div class="fam-dot-lg"></div><span class="fam-name">🌲 우디</span></div><p class="fam-en">Woody</p><p class="fam-desc">나무·뿌리·수지 등 자연에서 얻은 깊고 차분한 향입니다. 샌달우드·시더우드·베티버·파출리 등이 대표적이며, 성숙하고 지적인 인상을 줍니다.</p><div class="fam-kws"><span class="fam-kw">차분한</span><span class="fam-kw">깊은</span><span class="fam-kw">가을</span><span class="fam-kw">유니섹스</span></div></div>
<div><p class="fam-reps-label">대표 향수</p><div class="fam-reps"><p class="fam-rep"><strong>Santal 33</strong> — Le Labo</p><p class="fam-rep"><strong>Oud Wood</strong> — Tom Ford</p><p class="fam-rep"><strong>By the Fireplace</strong> — Maison Margiela</p></div></div>
</div>
<div class="fam-panel citrus" id="citrus">
<div><div class="fam-head"><div class="fam-dot-lg"></div><span class="fam-name">🍋 시트러스</span></div><p class="fam-en">Citrus</p><p class="fam-desc">레몬·오렌지·베르가못·자몽 등 과일 향이 중심이 되는 계열입니다. 상쾌하고 경쾌한 느낌으로 일상적으로 사용하기 좋습니다.</p><div class="fam-kws"><span class="fam-kw">청량한</span><span class="fam-kw">활기찬</span><span class="fam-kw">여름</span><span class="fam-kw">가벼운</span></div></div>
<div><p class="fam-reps-label">대표 향수</p><div class="fam-reps"><p class="fam-rep"><strong>Acqua di Giò</strong> — Armani</p><p class="fam-rep"><strong>Light Blue</strong> — D&G</p><p class="fam-rep"><strong>Lime Basil & Mandarin</strong> — Jo Malone</p></div></div>
</div>
<div class="fam-panel oriental" id="oriental">
<div><div class="fam-head"><div class="fam-dot-lg"></div><span class="fam-name">🏮 오리엔탈</span></div><p class="fam-en">Oriental</p><p class="fam-desc">앰버·바닐라·향신료·수지 등이 중심이 되는 관능적이고 신비로운 계열입니다. 따뜻하고 깊은 향이 특징이며, 지속력이 강합니다.</p><div class="fam-kws"><span class="fam-kw">관능적</span><span class="fam-kw">신비로운</span><span class="fam-kw">겨울</span><span class="fam-kw">강렬한</span></div></div>
<div><p class="fam-reps-label">대표 향수</p><div class="fam-reps"><p class="fam-rep"><strong>Black Opium</strong> — YSL</p><p class="fam-rep"><strong>Baccarat Rouge 540</strong> — MFK</p><p class="fam-rep"><strong>Shalimar</strong> — Guerlain</p></div></div>
</div>
<div class="fam-panel musky" id="musky">
<div><div class="fam-head"><div class="fam-dot-lg"></div><span class="fam-name">🌫 머스크</span></div><p class="fam-en">Musky</p><p class="fam-desc">동물성 머스크에서 유래한 향으로, 현재는 합성 향료로 재현됩니다. 피부에 스며드는 듯한 자연스럽고 따뜻한 체취를 연상시키며, 다른 계열과 잘 어우러져 베이스 노트로 자주 사용됩니다.</p><div class="fam-kws"><span class="fam-kw">포근한</span><span class="fam-kw">클린</span><span class="fam-kw">사계절</span><span class="fam-kw">은은한</span></div></div>
<div style="padding-top:.5rem"><p class="fam-reps-label">대표 향수</p><div class="fam-reps"><p class="fam-rep"><strong>For Her</strong> — Narciso Rodriguez</p><p class="fam-rep"><strong>Blanche</strong> — Byredo</p><p class="fam-rep"><strong>Warm Cotton</strong> — Clean Reserve</p></div></div>
</div>
</div>
</section>
<section class="sec sec-white sec-border" id="simulator">
<p class="sec-kicker reveal"><span class="sec-kicker-dot"></span>Scent Simulator</p>
<h2 class="sec-title reveal">어디에 뿌려야 할까요?</h2>
<p class="sec-sub reveal">인체 실루엣의 맥박 포인트를 클릭하여 부위별 발향 특징을 확인해보세요.</p>
<div class="sim-wrapper reveal">
<div class="sim-visual" id="simVisual">
<svg viewBox="0 0 300 400" xmlns="http://www.w3.org/2000/svg" class="sim-svg">
<path d="M150 40 C175 40 190 60 190 85 C190 110 175 130 150 130 C125 130 110 110 110 85 C110 60 125 40 150 40 Z" fill="var(--surface)" stroke="var(--border)" stroke-width="3"/>
<path d="M150 145 C190 145 230 160 250 200 L280 380 L230 380 L210 230 L190 400 L110 400 L90 230 L70 380 L20 380 L50 200 C70 160 110 145 150 145 Z" fill="var(--surface)" stroke="var(--border)" stroke-width="3"/>
</svg>
<div class="sim-hotspot" style="top: 28%; left: 42%;" data-point="ear"></div>
<div class="sim-hotspot" style="top: 48%; left: 50%;" data-point="chest"></div>
<div class="sim-hotspot" style="top: 72%; left: 78%;" data-point="wrist"></div>
<div class="sim-hotspot" style="top: 85%; left: 35%;" data-point="hem"></div>
</div>
<div class="sim-info">
<div class="sim-info-box" id="simInfoBox">
<div class="sim-icon">✨</div>
<h3 class="sim-point-name">포인트를 클릭해보세요</h3>
<p class="sim-point-desc">왼쪽의 핑크색 점동그라미를 클릭하면, 해당 부위의 발향 특징과 올바른 향수 사용 팁을 알려드립니다.</p>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section class="sec sec-white sec-border" id="faq">
<p class="sec-kicker reveal"><span class="sec-kicker-dot"></span>FAQ</p>
<h2 class="sec-title reveal">자주 묻는 질문</h2>
<p class="sec-sub reveal">향수를 처음 접하는 분들이 자주 궁금해하는 질문들을 모았습니다.</p>
<div class="faq-list reveal">
<div class="faq-item"><button class="faq-q" onclick="toggleFaq(this)"><span class="faq-q-text">향수는 어디에 뿌리는 게 좋을까요?</span><span class="faq-icon"><svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M5 1v8M1 5h8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></span></button><div class="faq-a"><p class="faq-a-inner">혈관이 가까이 지나는 <strong>맥박 포인트</strong>에 뿌리면 체온으로 인해 향이 더 잘 발산됩니다. 손목 안쪽, 목 옆쪽, 귀 뒤, 팔꿈치 안쪽이 대표적입니다. 뿌린 후에는 문지르지 않는 것이 좋아요. 문지르면 탑 노트가 빠르게 날아가 향의 구조가 망가집니다.</p></div></div>
<div class="faq-item"><button class="faq-q" onclick="toggleFaq(this)"><span class="faq-q-text">향수를 올바르게 보관하는 방법이 있나요?</span><span class="faq-icon"><svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M5 1v8M1 5h8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></span></button><div class="faq-a"><p class="faq-a-inner">향수는 <strong>빛·열·습기</strong>에 약합니다. 직사광선이 닿지 않는 서늘하고 건조한 곳에 보관하세요. 욕실은 온도·습도 변화가 커서 적합하지 않습니다. 이상적인 보관 장소는 서랍 안이나 박스입니다. 개봉 후에는 1~2년 내에 사용하는 것을 권장합니다.</p></div></div>
<div class="faq-item"><button class="faq-q" onclick="toggleFaq(this)"><span class="faq-q-text">향수를 레이어링하는 방법은 무엇인가요?</span><span class="faq-icon"><svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M5 1v8M1 5h8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></span></button><div class="faq-a"><p class="faq-a-inner">두 가지 이상의 향수를 함께 사용하는 것을 <strong>레이어링</strong>이라고 합니다. 기본 원칙은 무거운 향(오리엔탈, 우디)을 먼저 뿌리고, 가벼운 향(시트러스, 플로럴)을 위에 덧뿌리는 것입니다. 처음엔 바디로션 + 향수 조합부터 시작해보세요.</p></div></div>
<div class="faq-item"><button class="faq-q" onclick="toggleFaq(this)"><span class="faq-q-text">피부 타입에 따라 향이 다르게 느껴지나요?</span><span class="faq-icon"><svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M5 1v8M1 5h8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></span></button><div class="faq-a"><p class="faq-a-inner"><strong>지성 피부</strong>는 피지가 향의 지속을 도와 더 오래 유지됩니다. <strong>건성 피부</strong>는 향이 빨리 날아가는 경향이 있어, 무향 바디로션을 먼저 바른 후 향수를 뿌리면 지속력을 높일 수 있습니다. 개인의 체온과 피부 pH에 따라 같은 향수도 조금씩 다르게 발향됩니다.</p></div></div>
<div class="faq-item"><button class="faq-q" onclick="toggleFaq(this)"><span class="faq-q-text">향수를 처음 구매할 때 어떻게 고르면 좋을까요?</span><span class="faq-icon"><svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M5 1v8M1 5h8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></span></button><div class="faq-a"><p class="faq-a-inner">처음엔 <strong>시트러스나 플로럴 계열</strong>의 가볍고 대중적인 향부터 시작하는 것을 추천합니다. 매장에서는 한 번에 3~4가지 이상 시향하지 마세요. 시향 후 바로 구매하기보다, 30분 이상 발향된 후 느낌을 확인하세요. 온라인 구매 전에는 소용량 샘플을 먼저 경험해보는 것이 좋습니다.</p></div></div>
<div class="faq-item"><button class="faq-q" onclick="toggleFaq(this)"><span class="faq-q-text">향수의 유통기한은 얼마나 되나요?</span><span class="faq-icon"><svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M5 1v8M1 5h8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></span></button><div class="faq-a"><p class="faq-a-inner">미개봉 상태에서는 보통 <strong>3~5년</strong>을 보증합니다. 개봉 후에는 1~2년 이내 사용을 권장합니다. 향이 시큼하게 변하거나 색이 많이 어두워진 경우 변질된 신호입니다.</p></div></div>
</div>
</section>
<!-- CTA -->
<div class="cta-bar">
<h2 class="cta-bar-title">이제 나의 향을 찾아볼까요?</h2>
<button class="btn-cta-white" onclick="location.href='quiz.html'">테스트 시작하기 →</button>
</div>
<footer class="footer">
<span class="footer-logo">Scent<span>ype</span></span>
<div class="footer-links"><a href="quiz.html">Quiz</a><a href="info.html">Info</a><a href="collection.html">Collection</a></div>
<span class="footer-copy">© 2026 Scentype — 프로그래밍 언어의 이해 2조</span>
</footer>
<script>
function toggleFaq(btn){const item=btn.closest('.faq-item');const isOpen=item.classList.contains('open');document.querySelectorAll('.faq-item.open').forEach(el=>el.classList.remove('open'));if(!isOpen)item.classList.add('open');}
const obs=new IntersectionObserver(entries=>{entries.forEach((e,i)=>{if(e.isIntersecting){setTimeout(()=>e.target.classList.add('visible'),i*70);obs.unobserve(e.target);}});},{threshold:.07});
document.querySelectorAll('.reveal').forEach(el=>obs.observe(el));
// 발향 시뮬레이터 데이터
const SIM_DATA = {
ear: {
icon: "👂",
name: "귀 뒤 / 목덜미",
desc: "맥박이 뛰고 체온이 높은 곳입니다. 향이 머리카락에 은은하게 배어, 고개를 돌리거나 바람이 불 때마다 매력적인 잔향을 남기기 가장 좋은 포인트입니다."
},
chest: {
icon: "🫀",
name: "가슴 / 심장 부근",
desc: "체온이 가장 높은 곳 중 하나입니다. 향수 본연의 미들(Middle)과 베이스 노트(Base Note)가 깊고 풍부하게 발향되며, 나 자신도 향을 가장 잘 즐길 수 있는 위치입니다."
},
wrist: {
icon: "🖐️",
name: "손목 안쪽",
desc: "대표적인 맥박 포인트입니다. 탑 노트(Top Note)가 가장 화려하게 피어납니다. 단, 양 손목을 비비면 향 분자가 깨져 향이 변질될 수 있으니 가볍게 톡톡 두드려주세요."
},
hem: {
icon: "👗",
name: "옷단 / 치마 자락",
desc: "피부 체온이 직접 닿지 않아 베이스 노트(Base Note)가 변질 없이 원래의 향 그대로 가장 오래 지속됩니다. 걸을 때마다 공기를 타고 향이 자연스럽게 흩날립니다."
}
};
// 핫스팟 클릭 이벤트 등록
document.querySelectorAll('.sim-hotspot').forEach(spot => {
spot.addEventListener('click', function(e) {
const pointKey = this.getAttribute('data-point');
const data = SIM_DATA[pointKey];
// 1. 파문(Spray) 이펙트 생성
const ripple = document.createElement('div');
ripple.className = 'ripple';
ripple.style.top = this.style.top;
ripple.style.left = this.style.left;
document.getElementById('simVisual').appendChild(ripple);
// 이펙트 애니메이션 종료 후 요소 제거
setTimeout(() => { ripple.remove(); }, 600);
// 2. 정보 패널 내용 업데이트 및 애니메이션
const infoBox = document.getElementById('simInfoBox');
infoBox.classList.remove('active'); // 애니메이션 리셋
setTimeout(() => {
infoBox.querySelector('.sim-icon').textContent = data.icon;
infoBox.querySelector('.sim-point-name').textContent = data.name;
infoBox.querySelector('.sim-point-desc').textContent = data.desc;
infoBox.classList.add('active'); // 애니메이션 트리거
}, 50);
});
});
</script>
</body>
</html>