-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathrecommend.html
More file actions
556 lines (514 loc) · 55.9 KB
/
Copy pathrecommend.html
File metadata and controls
556 lines (514 loc) · 55.9 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
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
<!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;--type-color:#e8a0b8;--type-light:#fff5f8;}
*{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 */
.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-actions{display:flex;gap:10px;}
.btn-nav{padding:.52rem 1.2rem;font-size:.8rem;font-weight:600;border-radius:6px;border:1.5px solid var(--border);color:var(--muted);background:transparent;cursor:pointer;transition:all .18s;}
.btn-nav:hover{border-color:var(--text);color:var(--text);}
.btn-nav.pink{background:var(--pink);border-color:var(--pink);color:#fff;}
.btn-nav.pink:hover{opacity:.88;}
/* RESULT HERO */
.result-hero{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:60px;padding:100px 80px 60px;background:#fff;position:relative;overflow:hidden;}
.result-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 60% at 70% 40%,var(--type-light) 0%,transparent 65%);pointer-events:none;transition:background .6s;}
/* left */
.rh-kicker{display:inline-flex;align-items:center;gap:6px;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--type-color);background:var(--type-light);padding:.32rem .85rem;border-radius:100px;margin-bottom:20px;opacity:0;animation:fadeUp .6s .2s forwards;}
.rh-kicker-dot{width:6px;height:6px;border-radius:50%;background:var(--type-color);}
.rh-typename{font-size:clamp(1.2rem,2.2vw,1.6rem);font-weight:700;color:var(--text);margin-bottom:14px;opacity:0;animation:fadeUp .6s .4s forwards;white-space:nowrap;}
.rh-title{font-size:clamp(2.4rem,5vw,4rem);font-weight:800;line-height:1.15;letter-spacing:-.03em;margin-bottom:8px;opacity:0;animation:fadeUp .7s .3s forwards;}
.rh-title .hl{color:var(--type-color);}
.rh-desc{font-size:.95rem;line-height:1.85;color:var(--text2);max-width:440px;margin-bottom:22px;opacity:0;animation:fadeUp .7s .5s forwards;}
.rh-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:28px;opacity:0;animation:fadeUp .7s .6s forwards;}
.rh-tag{font-size:.7rem;font-weight:600;padding:.28rem .75rem;border-radius:100px;background:var(--type-light);color:var(--type-color);}
.rh-actions{display:flex;gap:10px;opacity:0;animation:fadeUp .7s .7s forwards;}
.btn-share{padding:.78rem 1.5rem;font-size:.82rem;font-weight:600;border-radius:8px;border:1.5px solid var(--border);color:var(--muted);background:transparent;cursor:pointer;transition:all .18s;display:inline-flex;align-items:center;gap:6px;}
.btn-share:hover{border-color:var(--text);color:var(--text);}
.btn-retry{padding:.78rem 1.8rem;font-size:.82rem;font-weight:700;border-radius:8px;background:var(--pink);color:#fff;border:none;cursor:pointer;transition:all .2s;box-shadow:0 4px 14px rgba(235,155,180,.22);}
.btn-retry:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(235,155,180,.28);}
/* right — profile card */
.rh-right{opacity:0;animation:fadeIn .9s .8s forwards;}
.profile-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:32px;box-shadow:0 4px 24px rgba(0,0,0,.06);}
.profile-card-title{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:20px;}
.score-rows{display:flex;flex-direction:column;gap:12px;}
.score-row{display:flex;align-items:center;gap:12px;}
.score-lbl{font-size:.68rem;font-weight:600;text-transform:uppercase;color:var(--muted);width:60px;flex-shrink:0;}
.score-track{flex:1;height:6px;background:var(--surface);border-radius:3px;overflow:hidden;}
.score-fill{height:100%;border-radius:3px;width:0%;transition:width 1.1s cubic-bezier(.4,0,.2,1);}
.score-fill.floral{background:linear-gradient(90deg,#f4b8d0,#e890b0);}
.score-fill.woody{background:linear-gradient(90deg,#d4a870,#b88040);}
.score-fill.citrus{background:linear-gradient(90deg,#f0d860,#d4b830);}
.score-fill.oriental{background:linear-gradient(90deg,#d49070,#b06030);}
.score-fill.musky{background:linear-gradient(90deg,#b0b0c8,#8888a8);}
.score-val{font-size:.72rem;font-weight:700;color:var(--text);width:30px;text-align:right;flex-shrink:0;}
/* PERFUMES */
.perfumes{padding:80px;background:var(--surface);}
.perfumes-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:40px;}
.sec-kicker{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pink);margin-bottom:8px;display:flex;align-items:center;gap:5px;}
.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;}
.perfumes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.p-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:28px;transition:all .22s;position:relative;overflow:hidden;}
.p-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.08);}
.p-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--type-color);transform:scaleX(0);transform-origin:left;transition:transform .35s;}
.p-card:hover::before{transform:scaleX(1);}
.p-rank{font-size:2.8rem;font-weight:800;color:var(--border);line-height:1;margin-bottom:14px;}
.p-brand{font-size:.65rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:4px;}
.p-name{font-size:1.2rem;font-weight:800;color:var(--text);margin-bottom:18px;line-height:1.2;}
.p-note-rows{display:flex;flex-direction:column;gap:7px;margin-bottom:14px;}
.p-note-row{display:flex;align-items:center;gap:8px;}
.p-note-lbl{font-size:.6rem;font-weight:600;color:var(--muted);width:28px;flex-shrink:0;}
.p-note-track{flex:1;height:4px;background:var(--surface);border-radius:2px;overflow:hidden;}
.p-note-fill{height:100%;background:var(--type-color);border-radius:2px;opacity:.7;}
.p-note-text{font-size:.62rem;color:var(--muted);white-space:nowrap;}
.p-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px;}
.p-tag{font-size:.6rem;font-weight:600;padding:.2rem .55rem;border-radius:100px;background:var(--pink-light);color:var(--pink);}
.p-desc{font-size:.82rem;line-height:1.8;color:var(--text2);border-top:1px solid var(--border);padding-top:14px;}
/* OTHER TYPES */
.other-types{padding:80px;background:#fff;}
.types-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:32px;}
.type-card{background:#fff;border:1.5px solid var(--border);border-radius:12px;padding:22px 18px;cursor:pointer;transition:all .22s;display:block;color:inherit;text-decoration:none;}
.type-card:hover{border-color:var(--pink);transform:translateY(-3px);box-shadow:0 10px 28px rgba(235,155,180,.10);}
.type-dot{width:36px;height:36px;border-radius:10px;margin-bottom:12px;}
.type-name{font-size:.95rem;font-weight:700;margin-bottom:3px;}
.type-ko{font-size:.72rem;color:var(--muted);}
.traits-section { padding: 80px; background: #fff; border-bottom: 1px solid var(--border); }
.trait-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 24px; }
.trait-item { background: var(--type-light); border-radius: 12px; padding: 20px; border: 1px solid var(--border); transition: transform 0.2s; }
.trait-item:hover { transform: translateY(-2px); }
.trait-icon { font-size: 1.5rem; margin-bottom: 8px; }
.trait-title { font-size: 0.95rem; font-weight: 700; color: var(--type-color); margin-bottom: 6px; }
.trait-desc { font-size: 0.82rem; line-height: 1.6; color: var(--text2); }
.season-section { padding: 80px; background: var(--surface); border-bottom: 1px solid var(--border); }
.season-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.season-tag { font-size: 0.75rem; font-weight: 600; padding: 0.4rem 1rem; border-radius: 100px; background: #fff; border: 1px solid var(--border); color: var(--text2); }
/* TOAST */
.toast{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(60px);background:#1a1a1a;color:#fff;font-size:.75rem;font-weight:500;padding:.75rem 1.6rem;border-radius:8px;z-index:999;transition:transform .3s;white-space:nowrap;}
.toast.show{transform:translateX(-50%) translateY(0);}
/* FOOTER */
.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(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.reveal{opacity:0;transform:translateY(22px);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>
<div class="nav-actions">
<button class="btn-nav" onclick="shareResult()">공유하기</button>
<a class="btn-nav pink" href="quiz.html">다시 테스트</a>
</div>
</nav>
<section class="result-hero">
<div class="rh-left">
<div class="rh-kicker"><span class="rh-kicker-dot"></span><span id="badgeText">당신의 향 유형</span></div>
<h1 class="rh-title" id="resultHeadline">결과 로딩 중…</h1>
<p class="rh-typename" id="typeName"></p>
<p class="rh-desc" id="resultDesc"></p>
<div class="rh-tags" id="resultTags"></div>
<div class="rh-actions">
<button class="btn-share" onclick="shareResult()">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="11" cy="2.5" r="1.5" stroke="currentColor" stroke-width="1"/><circle cx="11" cy="11.5" r="1.5" stroke="currentColor" stroke-width="1"/><circle cx="3" cy="7" r="1.5" stroke="currentColor" stroke-width="1"/><path d="M4.3 6.2l5.4-2.8M4.3 7.8l5.4 2.8" stroke="currentColor" stroke-width="1"/></svg>
결과 공유하기
</button>
<a class="btn-retry" href="quiz.html">다시 테스트하기 →</a>
</div>
</div>
<div class="rh-right">
<div class="profile-card">
<p class="profile-card-title">나의 향 프로필</p>
<div class="score-rows">
<div class="score-row"><span class="score-lbl">Floral</span><div class="score-track"><div class="score-fill floral" id="sFloral"></div></div><span class="score-val" id="vFloral">0%</span></div>
<div class="score-row"><span class="score-lbl">Woody</span><div class="score-track"><div class="score-fill woody" id="sWoody"></div></div><span class="score-val" id="vWoody">0%</span></div>
<div class="score-row"><span class="score-lbl">Citrus</span><div class="score-track"><div class="score-fill citrus" id="sCitrus"></div></div><span class="score-val" id="vCitrus">0%</span></div>
<div class="score-row"><span class="score-lbl">Oriental</span><div class="score-track"><div class="score-fill oriental" id="sOriental"></div></div><span class="score-val" id="vOriental">0%</span></div>
<div class="score-row"><span class="score-lbl">Musk</span><div class="score-track"><div class="score-fill musky" id="sMusky"></div></div><span class="score-val" id="vMusky">0%</span></div>
</div>
</div>
</div>
</section>
<section class="perfumes">
<div class="perfumes-head reveal">
<div>
<p class="sec-kicker"><span class="sec-kicker-dot"></span>Recommended for You</p>
<h2 class="sec-title" id="perfumesTitle">추천 향수</h2>
</div>
</div>
<div class="perfumes-grid" id="perfumesGrid"></div>
</section>
<section class="traits-section" id="traitsSection" style="display:none;">
<div class="reveal">
<p class="sec-kicker"><span class="sec-kicker-dot"></span>Personality Traits</p>
<h2 class="sec-title"><span id="traitTitleMbti" style="color:var(--type-color)">MBTI</span> 특성을 가진 당신</h2>
</div>
<div class="trait-grid" id="traitGrid"></div>
</section>
<section class="season-section" id="seasonSection" style="display:none;">
<div class="reveal">
<p class="sec-kicker"><span class="sec-kicker-dot"></span>Recommendations</p>
<h2 class="sec-title">이럴 때 뿌려보세요</h2>
<p class="p-desc" id="mbtiSeasonDesc" style="margin-top:14px; border-top:none; padding-top:0; font-size:0.88rem;"></p>
<div class="season-tags" id="seasonTags"></div>
</div>
</section>
<section class="other-types">
<div class="reveal">
<p class="sec-kicker"><span class="sec-kicker-dot"></span>Explore More</p>
<h2 class="sec-title">다른 향 유형 보기</h2>
</div>
<div class="types-grid reveal" id="typesGrid"></div>
</section>
<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>
<div class="toast" id="toast"></div>
<script>
const typeData={
floral:{
color:'#e8a0b8',light:'#fff4f8',ko:'숲속 산책자형',
headline:'<span style="color:var(--type-color)">꽃향기를</span> 품은 사람',
desc:'당신은 섬세하고 로맨틱한 감성을 가진 플로럴 타입입니다. 부드럽고 우아한 향을 통해 자신의 내면을 표현하며, 봄날의 정원처럼 사람들에게 따뜻함과 편안함을 줍니다.',
tags:['로맨틱','우아한','섬세한','봄','플로럴'],
perfumes:[
{brand:'Jo Malone London',name:'Peony & Blush Suede',price:'중고가',concentration:'EDP',notes:{top:['레드 애플',75],mid:['피오니, 장미',92],base:['스웨이드',60]},tags:['플로럴','파우더리','우아한'],desc:'피오니의 풍성한 여성스러움에 스웨이드의 따뜻한 온기가 더해진 향수. 봄날 꽃밭에 서 있는 듯한 낭만적 감각을 선사합니다.'},
{brand:'Dior',name:'Miss Dior Blooming Bouquet',price:'중고가',concentration:'EDT',notes:{top:['피오니, 만다린',80],mid:['로즈, 화이트 플로럴',88],base:['화이트 머스크',62]},tags:['플로럴','프레시','경쾌한'],desc:'청초하고 경쾌한 플로럴 향. 피오니와 장미가 어우러져 발랄하면서도 우아한 분위기를 연출합니다.'},
{brand:'Guerlain',name:'Mon Guerlain',price:'중고가',concentration:'EDP',notes:{top:['라벤더, 베르가못',70],mid:['쿠마린, 재스민',85],base:['바닐라, 샌달우드',72]},tags:['플로럴','구르망','로맨틱'],desc:'프로방스의 라벤더 밭과 달콤한 바닐라가 조화를 이루는 향수. 자유롭고 감성적인 여성을 위한 따뜻하고 매혹적인 향입니다.'},
{brand:'Chanel',name:'Chance Eau Tendre',price:'고가',concentration:'EDP',notes:{top:['자몽, 퀸스',82],mid:['재스민, 화이트 머스크',78],base:['앰버, 화이트 머스크',65]},tags:['플로럴','프루티','봄'],desc:'상큼한 자몽과 우아한 재스민이 만나는 샤넬의 텐더 라인. 젊고 경쾌하지만 세련된 여성을 위한 향수입니다.'},
{brand:'Gucci',name:'Bloom',price:'중고가',concentration:'EDP',notes:{top:['화이트 플로럴',85],mid:['투베로즈, 재스민',90],base:['샌달우드',60]},tags:['플로럴','파워풀','여름'],desc:'투베로즈를 중심으로 한 강렬하고 풍성한 화이트 플로럴 향수. 정원이 통째로 담긴 듯한 풍성함이 특징입니다.'},
{brand:'Marc Jacobs',name:'Daisy',price:'중저가',concentration:'EDT',notes:{top:['딸기, 바이올렛 잎',78],mid:['가드니아, 바이올렛',80],base:['화이트 머스크, 바닐라',70]},tags:['플로럴','프레시','입문'],desc:'향수 입문자에게 가장 추천되는 클래식. 상큼하고 순수한 플로럴로 봄날의 설렘을 담았습니다.'},
{brand:'Parfums de Marly',name:'Delina',price:'하이엔드',concentration:'EDP',notes:{top:['루바브, 베르가못',72],mid:['터키 로즈, 라넌큘러스',95],base:['머스크, 시더우드',68]},tags:['플로럴','파우더리','니치'],desc:'니치 플로럴의 교과서라 불리는 향수. 터키 로즈와 파우더리한 무스크가 환상적인 균형을 이룹니다.'},
{brand:'Frederic Malle',name:'Une Fleur de Cassie',price:'하이엔드',concentration:'EDP',notes:{top:['아카시아, 미모사',68],mid:['카시아 꽃, 재스민',88],base:['머스크, 앰버',72]},tags:['플로럴','파우더리','니치'],desc:'향수계의 거장 도미니크 로피시에의 작품. 아카시아의 분말 같은 향이 독특하고 기억에 남습니다.'},
{brand:'Byredo',name:'Gypsy Water',price:'하이엔드',concentration:'EDP',notes:{top:['베르가못, 레몬',75],mid:['재스민, 오리스',85],base:['샌달우드, 바닐라, 앰버',78]},tags:['플로럴','우디','니치'],desc:'스칸디나비안 감성의 니치 하우스 바이레도의 시그니처. 재스민과 우디 베이스의 절묘한 조화가 중독적입니다.'},
{brand:'Maison Margiela',name:'Replica – Flower Market',price:'중고가',concentration:'EDT',notes:{top:['페퍼, 레몬',70],mid:['로즈, 가드니아',88],base:['머스크, 시더',65]},tags:['플로럴','프레시','데일리'],desc:'파리 꽃 시장의 이른 아침을 담은 향수. 신선하게 꺾은 꽃다발 같은 생생한 플로럴 향이 일상을 특별하게 만들어줍니다.'}
]
},
woody:{
color:'#c4966a',light:'#fdf6ee',ko:'깊은 숲 탐험가형',
headline:'<span style="color:var(--type-color)">대지를</span> 닮은 사람',
desc:'당신은 차분하고 신뢰감 있는 우디 타입입니다. 깊고 자연스러운 나무 향처럼, 흔들리지 않는 단단함과 편안한 포근함을 함께 지닌 사람입니다.',
tags:['차분한','자연스러운','신뢰감','가을','우디'],
perfumes:[
{brand:'Le Labo',name:'Santal 33',price:'하이엔드',concentration:'EDP',notes:{top:['카다몸, 바이올렛',68],mid:['샌달우드, 아이리스',95],base:['앰버우드, 파파이어',80]},tags:['우디','스모키','유니섹스'],desc:'서부의 야생과 자유를 담은 향수. 풍부한 샌달우드와 부드러운 앰버가 성별을 초월한 강렬한 존재감을 줍니다.'},
{brand:'Tom Ford',name:'Oud Wood',price:'하이엔드',concentration:'EDP',notes:{top:['로즈우드, 카다몸',72],mid:['아가우드, 샌달우드',90],base:['바닐라, 앰버',78]},tags:['우디','오리엔탈','럭셔리'],desc:'희귀한 아가우드와 샌달우드가 중심이 되는 깊고 관능적인 향수. 럭셔리한 인상을 원하는 사람에게 완벽합니다.'},
{brand:'Maison Margiela',name:'Replica – By the Fireplace',price:'중고가',concentration:'EDT',notes:{top:['오렌지플라워, 핑크페퍼',65],mid:['체스트넛, 귀아악',88],base:['바닐라, 머스크',82]},tags:['우디','웜','코지'],desc:'벽난로 앞의 포근하고 아늑한 순간을 담은 향수. 스모키한 나무 향과 달콤한 바닐라가 겨울밤의 온기를 떠올리게 합니다.'},
{brand:'Hermès',name:"Terre d'Hermès",price:'고가',concentration:'EDP',notes:{top:['오렌지, 자몽',80],mid:['페퍼, 제라늄',75],base:['베티버, 플린트, 오크',88]},tags:['우디','어시','유니섹스'],desc:'대지와 돌의 미네랄 느낌을 담은 에르메스의 아이콘. 강렬한 베티버와 오크의 건조한 우디 향이 지성미를 풍깁니다.'},
{brand:'Diptyque',name:'Tam Dao',price:'고가',concentration:'EDP',notes:{top:['시더, 스파이스',72],mid:['샌달우드, 미르',92],base:['화이트 머스크',70]},tags:['우디','미니멀','니치'],desc:'순수한 샌달우드의 아름다움에 집중한 향수. 크리미하고 따뜻한 나무 향이 피부에 스며들듯 지속됩니다.'},
{brand:'Creed',name:'Aventus',price:'하이엔드',concentration:'EDP',notes:{top:['파인애플, 베르가못, 블랙커런트',85],mid:['버치, 패출리, 자작나무',80],base:['오크모스, 앰버그리스, 머스크',88]},tags:['우디','프루티','파워풀'],desc:'현대 남성 향수의 전설. 파인애플의 상큼함과 자작나무 스모키함의 조합이 자신감과 성공의 이미지를 만들어냅니다.'},
{brand:'Amouage',name:'Interlude Man',price:'하이엔드',concentration:'EDP',notes:{top:['오레가노, 페퍼, 시더',78],mid:['오리스, 파출리, 인센스',88],base:['오크모스, 앰버, 샌달',85]},tags:['우디','스파이시','니치'],desc:'오만의 럭셔리 향수 하우스 아무아쥬의 걸작. 스파이스와 인센스가 깊은 우디 베이스 위에 복잡하게 펼쳐집니다.'},
{brand:'Dior',name:'Sauvage',price:'고가',concentration:'EDP',notes:{top:['칼라브리아 베르가못',88],mid:['시쪼넌 페퍼, 라벤더',80],base:['앰버그리스, 시더',85]},tags:['우디','프레시','대중적'],desc:'현대 남성 향수의 베스트셀러. 베르가못의 청량함과 앰버그리스의 우디한 깊이가 만나 폭넓은 매력을 발산합니다.'},
{brand:'Maison Francis Kurkdjian',name:'Grand Soir',price:'하이엔드',concentration:'EDP',notes:{top:['베르가못, 스파이스',72],mid:['앰버, 통카빈',90],base:['벤조인, 바닐라, 머스크',85]},tags:['우디','앰버','니치'],desc:'저녁의 우아한 시간을 위한 향수. 따뜻한 앰버와 벤조인이 깊고 관능적인 우디 향을 만들어냅니다.'},
{brand:'Serge Lutens',name:'Feminité du Bois',price:'하이엔드',concentration:'EDP',notes:{top:['자두, 복숭아',75],mid:['시더, 오렌지 블라섬',88],base:['샌달우드, 바닐라, 시나몬',82]},tags:['우디','프루티','니치'],desc:'과일과 나무의 혁신적인 조합으로 니치 향수계에 혁명을 일으킨 작품. 달콤한 자두와 크리미한 시더의 조화가 독보적입니다.'}
]
},
citrus:{
color:'#d4be50',light:'#fefde8',ko:'도시 탐험가형',
headline:'<span style="color:var(--type-color)">햇살을</span> 담은 사람',
desc:'당신은 활기차고 자유로운 시트러스 타입입니다. 상쾌한 레몬과 베르가못처럼, 어디서든 에너지와 생동감을 불어넣는 밝고 긍정적인 존재입니다.',
tags:['청량한','활기찬','자유로운','여름','시트러스'],
perfumes:[
{brand:'Giorgio Armani',name:'Acqua di Giò',price:'중고가',concentration:'EDT',notes:{top:['시칠리안 레몬, 만다린',88],mid:['로즈마리, 피치',72],base:['화이트 머스크, 앰버',58]},tags:['시트러스','아쿠아틱','청량한'],desc:'지중해 바닷바람과 상쾌한 시트러스 향이 어우러진 클래식. 깨끗하고 자연스러운 청량감으로 오랫동안 사랑받습니다.'},
{brand:'Chanel',name:'Chance Eau Fraîche',price:'고가',concentration:'EDT',notes:{top:['시트론, 워터 히야신스',82],mid:['재스민, 티크 우드',75],base:['시더우드, 머스크',60]},tags:['시트러스','프레시','우아한'],desc:'상쾌하고 여성스러운 에너지가 넘치는 샤넬의 찬스 라인. 활기찬 시트론과 우아한 재스민이 어우러집니다.'},
{brand:'Jo Malone London',name:'Lime Basil & Mandarin',price:'중고가',concentration:'EDC',notes:{top:['라임, 만다린',90],mid:['바질, 화이트 타임',78],base:['앰버, 머스크',55]},tags:['시트러스','그린','허브'],desc:'라임의 상큼함과 바질의 허브향이 만나 생동감 넘치는 향을 만들어냅니다. 조말론의 시그니처 컬렉션입니다.'},
{brand:'Dolce & Gabbana',name:'Light Blue',price:'중저가',concentration:'EDT',notes:{top:['시칠리아 레몬, 사과',85],mid:['재스민, 대나무',72],base:['시더, 머스크, 앰버',60]},tags:['시트러스','프레시','입문'],desc:'입문자에게 가장 추천되는 시트러스 향수 중 하나. 레몬과 사과의 상큼함이 지중해의 여름을 떠올리게 합니다.'},
{brand:'Maison Margiela',name:'Replica – Under the Lemon Trees',price:'중고가',concentration:'EDT',notes:{top:['레몬, 시칠리아 레몬',92],mid:['로즈마리, 티 트리',78],base:['머스크, 코튼',65]},tags:['시트러스','프레시','데일리'],desc:'레몬나무 아래의 상쾌한 공기를 담은 향수. 마치 갓 꺾은 레몬 껍질 향 같은 생생한 시트러스가 특징입니다.'},
{brand:'Creed',name:'Silver Mountain Water',price:'하이엔드',concentration:'EDP',notes:{top:['베르가못, 만다린',80],mid:['블랙커런트, 그린 티',75],base:['머스크, 샌달우드, 베티버',70]},tags:['시트러스','아쿠아틱','니치'],desc:'스위스 알프스의 청정한 공기를 담은 크리드의 걸작. 베르가못과 그린 티의 우아한 조화가 압도적입니다.'},
{brand:'Atelier Cologne',name:'Orange Sanguine',price:'고가',concentration:'Parfum',notes:{top:['블러드 오렌지, 베르가못',92],mid:['오렌지 블라섬, 재스민',80],base:['베티버, 통카빈',65]},tags:['시트러스','플로럴','니치'],desc:'블러드 오렌지의 새콤달콤한 향을 가장 생생하게 담은 향수. 아틀리에 콜로뉴의 시그니처 퍼퓸 콜로뉴 포맷으로 독특한 지속력을 자랑합니다.'},
{brand:'Parfums de Marly',name:'Perseus',price:'하이엔드',concentration:'EDP',notes:{top:['베르가못, 레몬, 만다린',88],mid:['시더, 제라늄, 앰브록산',80],base:['머스크, 베티버, 패출리',75]},tags:['시트러스','우디','니치'],desc:'시트러스와 우디의 완벽한 균형으로 2024년 가장 화제가 된 향수 중 하나. 쉽게 중독되는 매력적인 향입니다.'},
{brand:'Clinique',name:'Happy',price:'중저가',concentration:'EDP',notes:{top:['자몽, 오렌지, 베르가못',88],mid:['루바브, 망고',75],base:['머스크, 시더',62]},tags:['시트러스','프루티','입문'],desc:'이름처럼 기분을 밝게 만들어주는 향수. 자몽과 오렌지의 발랄함이 하루를 상쾌하게 시작하게 해줍니다.'},
{brand:'Acqua di Parma',name:'Colonia',price:'고가',concentration:'EDC',notes:{top:['레몬, 베르가못, 라임',90],mid:['로즈마리, 라벤더, 카다몸',78],base:['베티버, 오크모스, 앰버',70]},tags:['시트러스','아로마틱','클래식'],desc:'1916년부터 이어온 이탈리아 향수의 전설. 간결하고 고귀한 시트러스 향이 이탈리아 장인 정신을 고스란히 담았습니다.'}
]
},
oriental:{
color:'#c47040',light:'#fef4ec',ko:'신비로운 야행성형',
headline:'<span style="color:var(--type-color)">밤을</span> 닮은 사람',
desc:'당신은 신비롭고 강렬한 오리엔탈 타입입니다. 깊고 관능적인 향신료와 앰버처럼, 쉽게 잊히지 않는 강한 존재감과 매혹적인 매력을 지닌 사람입니다.',
tags:['신비로운','강렬한','관능적','겨울','오리엔탈'],
perfumes:[
{brand:'Yves Saint Laurent',name:'Black Opium',price:'고가',concentration:'EDP',notes:{top:['핑크페퍼, 오렌지',80],mid:['커피, 재스민',88],base:['바닐라, 파출리',92]},tags:['오리엔탈','구르망','관능적'],desc:'블랙 커피와 달콤한 바닐라, 화이트 플라워의 놀라운 조합. 밤의 에너지와 도시의 세련됨이 담긴 향수입니다.'},
{brand:'Maison Francis Kurkdjian',name:'Baccarat Rouge 540',price:'하이엔드',concentration:'EDP',notes:{top:['재스민, 사프란',85],mid:['앰버우드, 이집션 재스민',95],base:['시더우드, 머스크',78]},tags:['오리엔탈','우디','니치'],desc:'달콤하고 따뜻한 앰버우드와 재스민이 완벽한 균형을 이루는 현대적 오리엔탈 향수. 향수 마니아들의 성배입니다.'},
{brand:'Guerlain',name:'Shalimar',price:'고가',concentration:'EDP',notes:{top:['베르가못, 레몬',70],mid:['장미, 재스민, 아이리스',82],base:['바닐라, 통카빈, 레더',88]},tags:['오리엔탈','파우더리','클래식'],desc:'1925년 탄생한 전설적인 오리엔탈 향수. 풍성한 바닐라와 부드러운 레더 베이스가 시간을 초월한 우아함을 선사합니다.'},
{brand:'Tom Ford',name:'Black Orchid',price:'하이엔드',concentration:'EDP',notes:{top:['트러플, 가르데니아',78],mid:['블랙 오키드, 스파이스',90],base:['패출리, 바닐라, 샌달우드',88]},tags:['오리엔탈','플로럴','럭셔리'],desc:'다크하고 섹시한 오리엔탈의 정점. 블랙 트러플과 블랙 오키드의 이국적인 향이 강렬하고 신비로운 인상을 남깁니다.'},
{brand:'Chanel',name:'Coco Mademoiselle',price:'고가',concentration:'EDP',notes:{top:['오렌지, 베르가못',78],mid:['미도즈위트, 로즈',85],base:['패출리, 베티버, 바닐라',82]},tags:['오리엔탈','플로럴','파워풀'],desc:'자유롭고 당당한 현대 여성을 위한 샤넬의 베스트셀러. 오렌지와 패출리의 대담한 조화가 독보적인 매력을 발산합니다.'},
{brand:'Viktor & Rolf',name:'Flowerbomb',price:'고가',concentration:'EDP',notes:{top:['티, 베르가못',72],mid:['재스민, 프리지아, 오키드',90],base:['패출리, 머스크',80]},tags:['오리엔탈','플로럴','달콤한'],desc:'꽃의 폭탄이라는 이름처럼 농밀하고 달콤한 플로럴 오리엔탈. 강렬하고 중독적인 향이 특별한 날을 더 빛나게 합니다.'},
{brand:'Lancôme',name:'La Vie est Belle',price:'중고가',concentration:'EDP',notes:{top:['블랙커런트, 배',75],mid:['이리스, 재스민, 오렌지블라섬',88],base:['파출리, 통카빈, 바닐라',90]},tags:['오리엔탈','구르망','입문'],desc:'삶은 아름답다는 이름의 향수. 통카빈과 바닐라의 달콤함에 이리스의 파우더리함이 더해져 행복한 온기를 줍니다.'},
{brand:'Amouage',name:'Jubilation XXV',price:'하이엔드',concentration:'EDP',notes:{top:['블랙베리, 미르',80],mid:['로즈, 오키드, 인센스',90],base:['오크모스, 올리바넘, 앰버',88]},tags:['오리엔탈','스파이시','니치'],desc:'아무아쥬의 25주년 기념 향수. 복잡하고 풍성한 스파이스와 오리엔탈 향이 레이어드 되어 끊임없이 변화합니다.'},
{brand:'Comme des Garçons',name:'Wonderwood',price:'고가',concentration:'EDP',notes:{top:['시더우드, 쥬니퍼',75],mid:['구아야쿰, 캐시미어우드',88],base:['샌달우드, 베티버',82]},tags:['오리엔탈','우디','니치'],desc:'열 가지 우드 노트로만 구성된 독특한 향수. 깊고 건조한 나무 향이 모던하게 재해석된 아방가르드한 작품입니다.'},
{brand:'Serge Lutens',name:'Ambre Sultan',price:'하이엔드',concentration:'EDP',notes:{top:['오레가노, 허브',72],mid:['코리안더, 파출리',85],base:['라브다넘, 앰버, 바닐라',92]},tags:['오리엔탈','앰버','니치'],desc:'앰버 향수의 궁극적인 표현. 허브와 레진의 자연스러운 향이 풍성한 앰버 베이스로 이어지는 깊이 있는 향수입니다.'}
]
},
musky:{
color:'#9898b0',light:'#f4f4f8',ko:'고요한 사색가형',
headline:'<span style="color:var(--type-color)">공기를</span> 닮은 사람',
desc:'당신은 부드럽고 차분한 머스크 타입입니다. 깨끗하고 포근한 화이트 머스크처럼, 가까이 다가올 때 비로소 느껴지는 깊은 매력을 가진 사람입니다.',
tags:['포근한','차분한','깨끗한','사계절','머스크'],
perfumes:[
{brand:'Narciso Rodriguez',name:'For Her',price:'중고가',concentration:'EDP',notes:{top:['로즈우드, 오스만투스',72],mid:['머스크, 플럼',95],base:['앰버, 베티버',80]},tags:['머스크','플로럴','관능적'],desc:'현대적인 머스크 향의 교과서. 풍부하고 부드러운 머스크가 피부에 스며드는 듯한 자연스럽고 관능적인 향수입니다.'},
{brand:'Clean Reserve',name:'Warm Cotton',price:'중저가',concentration:'EDP',notes:{top:['오존, 시트러스',75],mid:['화이트 머스크, 코튼',90],base:['머스크, 앰버',85]},tags:['머스크','클린','입문'],desc:'막 다림질한 면 셔츠의 따뜻하고 청결한 향을 담은 향수. 부담 없이 언제 어디서나 뿌릴 수 있는 클린 머스크의 정수입니다.'},
{brand:'Byredo',name:'Blanche',price:'하이엔드',concentration:'EDP',notes:{top:['알베히 머스크, 핑크페퍼',78],mid:['화이트 로즈, 바이올렛',85],base:['샌달우드, 앰버',70]},tags:['머스크','플로럴','니치'],desc:'스칸디나비안 미니멀리즘이 담긴 순백의 향수. 순수하고 깨끗한 화이트 플로럴과 머스크가 조용하지만 인상적인 존재감을 남깁니다.'},
{brand:'Issey Miyake',name:"L'Eau d'Issey",price:'중저가',concentration:'EDT',notes:{top:['시클라멘, 로즈우드, 유주',80],mid:['카네이션, 리그넘 비테',78],base:['머스크, 앰버',75]},tags:['머스크','아쿠아틱','클래식'],desc:'물처럼 투명하고 깨끗한 향수의 대명사. 1992년 출시 이후 30년 넘게 사랑받는 클린 머스크의 클래식입니다.'},
{brand:'Diptyque',name:"Orphéon",price:'고가',concentration:'EDP',notes:{top:['쥬니퍼 베리',75],mid:['시더, 재스민, 플로럴',88],base:['머스크, 통카빈',85]},tags:['머스크','우디','니치'],desc:'파리의 전설적인 나이트클럽에서 영감받은 향수. 머스키하면서도 우디한 복합적인 향이 피부에 오래도록 남습니다.'},
{brand:'Maison Margiela',name:'Replica – Jazz Club',price:'중고가',concentration:'EDT',notes:{top:['핑크페퍼, 레몬',72],mid:['클라리 세이지, 룸',80],base:['바닐라, 머스크',88]},tags:['머스크','스파이시','따뜻한'],desc:'재즈 클럽의 밤을 담은 향수. 따뜻한 럼과 바닐라의 달콤함에 머스크가 더해져 관능적이면서도 편안한 향을 만듭니다.'},
{brand:'Juliette Has a Gun',name:'Not A Perfume',price:'고가',concentration:'EDP',notes:{top:['암브록산',100],mid:['암브록산',100],base:['암브록산',100]},tags:['머스크','미니멀','니치'],desc:'단 하나의 분자, 암브록산으로만 만들어진 혁신적인 향수. 피부 위에서 각자 다른 향으로 변하는 개성적인 머스크입니다.'},
{brand:'Chloé',name:'Chloé EDP',price:'중고가',concentration:'EDP',notes:{top:['피오니, 리치',78],mid:['로즈, 마그놀리아, 릴리',85],base:['머스크, 시더, 앰버',78]},tags:['머스크','플로럴','데일리'],desc:'로즈와 머스크의 완벽한 조화. 여성스럽고 부드러우면서도 자연스러운 향이 일상을 우아하게 만들어줍니다.'},
{brand:'Commodity',name:'Moss',price:'중고가',concentration:'EDP',notes:{top:['베르가못, 페퍼민트',72],mid:['아이리스, 클라리 세이지',80],base:['오크모스, 머스크, 패출리',88]},tags:['머스크','그린','니치'],desc:'자연의 초록빛 이끼를 담은 향수. 차갑고 신선한 그린 머스크가 숲 속 산책의 고요함을 선물합니다.'},
{brand:'Escentric Molecules',name:'Molecule 01',price:'중고가',concentration:'EDT',notes:{top:['이소 E 슈퍼',100],mid:['이소 E 슈퍼',100],base:['이소 E 슈퍼',100]},tags:['머스크','미니멀','니치'],desc:'이소 E 슈퍼 단일 분자로만 이루어진 향수. 착용자의 피부와 반응해 독자적인 향을 만들어내는 마법 같은 머스크입니다.'}
]
}
};
const otherInfo=[{key:'floral',dot:'linear-gradient(135deg,#f4b8d0,#e890b0)',name:'플로럴',ko:'숲속 산책자형'},{key:'woody',dot:'linear-gradient(135deg,#d4a870,#b88040)',name:'우디',ko:'깊은 숲 탐험가형'},{key:'citrus',dot:'linear-gradient(135deg,#f0d860,#d4b830)',name:'시트러스',ko:'도시 탐험가형'},{key:'oriental',dot:'linear-gradient(135deg,#d49070,#b06030)',name:'오리엔탈',ko:'신비로운 야행성형'},{key:'musky',dot:'linear-gradient(135deg,#b0b0c8,#8888a8)',name:'머스크',ko:'고요한 사색가형'}];
// MBTI 유형 설명
const MBTI_DESC = {
ENFJ:'따뜻하고 사람을 끌어당기는 매력이 있는 당신. 봄날의 정원처럼 풍성하고 포근한 향이 잘 어울려요.',
ENFP:'자유롭고 에너지 넘치는 당신. 산들바람처럼 상큼하고 생기 있는 향이 잘 어울려요.',
ENTJ:'목표 지향적이고 강한 의지를 가진 당신. 깊고 묵직한 우디 향이 당신의 카리스마를 표현해요.',
ENTP:'호기심 많고 도전적인 당신. 독특하고 이색적인 향이 당신의 개성을 표현해요.',
ESFJ:'따뜻하고 헌신적인 당신. 포근하고 친근한 플로럴 향이 당신의 따뜻함을 표현해요.',
ESFP:'활발하고 자유로운 당신. 상큼하고 밝은 시트러스 향이 당신의 에너지를 표현해요.',
ESTJ:'책임감 있고 신뢰로운 당신. 묵직하고 안정적인 우디 향이 당신의 신뢰감을 표현해요.',
ESTP:'도전적이고 모험을 즐기는 당신. 상큼하고 강렬한 시트러스 향이 당신의 역동성을 표현해요.',
INFJ:'통찰력 있고 이상적인 당신. 신비롭고 깊은 오리엔탈 향이 당신의 내면 세계를 표현해요.',
INFP:'감성적이고 내면이 깊은 당신. 부드럽고 몽환적인 향이 당신의 섬세한 감수성을 표현해요.',
INTJ:'독립적이고 전략적인 당신. 깊고 지적인 오리엔탈·우디 향이 당신의 신비로운 면을 표현해요.',
INTP:'논리적이고 탐구적인 당신. 복잡하고 레이어가 있는 향이 당신의 다층적 사고를 표현해요.',
ISFJ:'헌신적이고 세심한 당신. 포근하고 안정적인 플로럴 향이 당신의 따뜻한 마음을 표현해요.',
ISFP:'예술적이고 감각적인 당신. 자연스럽고 감성적인 플로럴·우디 향이 당신의 예술성을 표현해요.',
ISTJ:'신뢰롭고 성실한 당신. 클래식하고 깊이 있는 우디·머스크 향이 당신의 믿음직함을 표현해요.',
ISTP:'실용적이고 독립적인 당신. 차갑고 깔끔한 우디·머스크 향이 당신의 절제된 매력을 표현해요.'
};
window.addEventListener('DOMContentLoaded',()=>{
const p=new URLSearchParams(window.location.search);
const type=p.get('type')||'floral';
const scores={floral:parseInt(p.get('floral')||30),woody:parseInt(p.get('woody')||20),citrus:parseInt(p.get('citrus')||20),oriental:parseInt(p.get('oriental')||15),musky:parseInt(p.get('musky')||15)};
const d=typeData[type]||typeData.floral;
const MBTI_TRAITS_DATA = {
ENFJ: {
traits: [{icon:"🌸",title:"따뜻한 공감력",desc:"주변 사람의 감정을 잘 읽고 배려해요"},{icon:"✨",title:"카리스마",desc:"자연스럽게 사람들을 이끄는 힘이 있어요"},{icon:"💬",title:"언어적 표현",desc:"말과 글로 감동을 주는 능력이 뛰어나요"},{icon:"🌿",title:"성장 지향",desc:"끊임없이 더 나은 방향을 추구해요"}],
seasons: ["봄 나들이","첫 만남","데이트","따뜻한 오후"],
seasonDesc: "봄의 따뜻함과 닮은 당신의 향. 사람을 만나는 자리나 포근한 오후에 특히 잘 어울려요."
},
ENFP: {
traits: [{icon:"🎨",title:"창의적 상상력",desc:"독특하고 새로운 아이디어가 넘쳐요"},{icon:"🌈",title:"긍정적 에너지",desc:"주변 분위기를 밝게 만드는 힘이 있어요"},{icon:"🦋",title:"자유로운 영혼",desc:"틀에 얽매이지 않는 자유로운 사고를 해요"},{icon:"💡",title:"즉흥적 열정",desc:"순간의 영감으로 최대 역량을 발휘해요"}],
seasons: ["여름 나들이","여행","피크닉","친구 모임"],
seasonDesc: "밝고 경쾌한 당신의 에너지와 닮은 시트러스 향. 야외 활동이나 친구들과 함께할 때 딱이에요."
},
ENTJ: {
traits: [{icon:"🏆",title:"강한 리더십",desc:"명확한 비전으로 팀을 이끌어요"},{icon:"⚡",title:"결단력",desc:"빠르고 정확한 판단을 내려요"},{icon:"📊",title:"전략적 사고",desc:"큰 그림을 보고 계획을 세워요"},{icon:"💪",title:"실행력",desc:"계획을 반드시 현실로 만들어요"}],
seasons: ["중요한 미팅","발표","겨울 저녁","비즈니스 자리"],
seasonDesc: "강렬하고 존재감 있는 우디 향. 중요한 자리나 가을·겨울에 뿌리면 당신의 카리스마가 완성돼요."
},
ENTP: {
traits: [{icon:"🔍",title:"지적 호기심",desc:"새로운 아이디어에 즉각 흥미를 느껴요"},{icon:"⚔️",title:"논리적 토론",desc:"날카로운 분석으로 상대를 설득해요"},{icon:"🌍",title:"넓은 시야",desc:"다양한 분야에 관심을 가져요"},{icon:"🎯",title:"창의적 문제해결",desc:"기존 방식을 뒤집는 해법을 찾아요"}],
seasons: ["새로운 시작","여행","창작 활동","혼자만의 시간"],
seasonDesc: "독특하고 예측 불가한 향. 새로운 곳을 탐험하거나 창작할 때 영감을 더해줘요."
},
ESFJ: {
traits: [{icon:"🤗",title:"헌신적 배려",desc:"주변 사람을 살뜰히 챙겨요"},{icon:"🏠",title:"안정 지향",desc:"따뜻하고 안전한 환경을 만들어요"},{icon:"👥",title:"사교성",desc:"어디서든 사람들과 잘 어울려요"},{icon:"🎁",title:"봉사 정신",desc:"남을 돕는 데서 보람을 느껴요"}],
seasons: ["가족 모임","친구와의 브런치","봄 나들이","홈파티"],
seasonDesc: "모든 이를 따뜻하게 감싸는 플로럴 향. 소중한 사람들과 함께하는 자리에서 빛을 발해요."
},
ESFP: {
traits: [{icon:"🎉",title:"활발한 에너지",desc:"어디서든 분위기를 띄워요"},{icon:"🌟",title:"즉흥적 재미",desc:"순간을 즐기고 재미를 만들어요"},{icon:"🎭",title:"표현력",desc:"감정을 솔직하게 표현해요"},{icon:"🌊",title:"자유로운 삶",desc:"규칙보다 자유를 선호해요"}],
seasons: ["여름 페스티벌","해변","파티","주말 나들이"],
seasonDesc: "터질 듯한 에너지와 닮은 시트러스 향. 신나는 자리나 뜨거운 여름에 뿌리면 완벽해요."
},
ESTJ: {
traits: [{icon:"📋",title:"책임감",desc:"맡은 일은 반드시 완수해요"},{icon:"🏛️",title:"원칙 중심",desc:"규칙과 질서를 중요하게 여겨요"},{icon:"🤝",title:"신뢰성",desc:"약속과 의무를 철저히 지켜요"},{icon:"🔧",title:"실용주의",desc:"효율적이고 현실적인 방법을 선택해요"}],
seasons: ["중요한 발표","비즈니스 미팅","가을·겨울","공식적인 자리"],
seasonDesc: "단단하고 믿음직한 우디 향. 중요한 자리에서 당신의 신뢰감과 완벽하게 어울려요."
},
ESTP: {
traits: [{icon:"⚡",title:"행동 지향",desc:"생각보다 먼저 행동해요"},{icon:"🎲",title:"위험 감수",desc:"도전과 모험을 즐겨요"},{icon:"👁️",title:"날카로운 관찰력",desc:"상황을 빠르게 파악해요"},{icon:"🏃",title:"적응력",desc:"어떤 상황에서도 빠르게 적응해요"}],
seasons: ["스포츠·운동","아웃도어","여름 드라이브","야외 활동"],
seasonDesc: "바람처럼 시원한 시트러스 향. 활동적인 순간에 당신의 에너지와 완벽하게 어울려요."
},
INFJ: {
traits: [{icon:"🔮",title:"깊은 통찰력",desc:"남들이 보지 못하는 것을 봐요"},{icon:"🌙",title:"이상주의",desc:"더 나은 세상을 꿈꿔요"},{icon:"🤫",title:"내면의 깊이",desc:"혼자만의 내면 세계가 풍부해요"},{icon:"💫",title:"신비로운 매력",desc:"쉽게 알 수 없는 깊이가 있어요"}],
seasons: ["조용한 독서","새벽 명상","가을 저녁","혼자만의 시간"],
seasonDesc: "신비롭고 깊은 오리엔탈 향. 내면과 마주하는 조용한 시간에 특히 잘 어울려요."
},
INFP: {
traits: [{icon:"🌙",title:"풍부한 감수성",desc:"섬세하게 감정을 느끼고 표현해요"},{icon:"🎨",title:"창의적 표현",desc:"예술과 창작으로 내면을 드러내요"},{icon:"💭",title:"몽상적 사고",desc:"이상적인 세계를 그리며 생각해요"},{icon:"🌱",title:"가치 중심",desc:"자신만의 가치관으로 살아가요"}],
seasons: ["조용한 카페","봄 산책","감성적인 저녁","창작 활동"],
seasonDesc: "달빛처럼 부드럽고 몽환적인 향. 감성이 깊어지는 저녁이나 혼자만의 시간에 어울려요."
},
INTJ: {
traits: [{icon:"♟️",title:"전략적 사고",desc:"체스처럼 여러 수를 미리 생각해요"},{icon:"🔬",title:"분석적 지성",desc:"복잡한 문제를 체계적으로 분석해요"},{icon:"🏔️",title:"독립성",desc:"스스로 판단하고 행동해요"},{icon:"📚",title:"깊은 지식",desc:"관심 분야를 깊이 파고들어요"}],
seasons: ["늦은 밤 독서","겨울 저녁","중요한 결정","혼자만의 사색"],
seasonDesc: "어둡고 지적인 오리엔탈 향. 깊은 사색이 필요한 밤이나 겨울 저녁에 완벽해요."
},
INTP: {
traits: [{icon:"🧪",title:"논리적 분석",desc:"모든 것을 이론으로 분석해요"},{icon:"🌌",title:"추상적 사고",desc:"개념과 아이디어의 세계에서 살아요"},{icon:"🔭",title:"지식 탐구",desc:"이해할 때까지 파고들어요"},{icon:"🎯",title:"객관적 판단",desc:"감정보다 논리로 결정해요"}],
seasons: ["집중이 필요한 작업","밤샘 연구","겨울 실내","혼자만의 공간"],
seasonDesc: "복잡하고 미니멀한 머스크 향. 깊은 집중이 필요한 순간에 당신의 사고를 선명하게 해줘요."
},
ISFJ: {
traits: [{icon:"🛡️",title:"세심한 배려",desc:"작은 것도 놓치지 않고 챙겨요"},{icon:"🌻",title:"안정 추구",desc:"조화롭고 평화로운 환경을 원해요"},{icon:"📝",title:"꼼꼼함",desc:"맡은 일을 철저하게 마무리해요"},{icon:"🤝",title:"신뢰할 수 있는",desc:"한번 맺은 관계를 소중히 해요"}],
seasons: ["가족과의 시간","조용한 주말","봄 정원 산책","소중한 사람의 방문"],
seasonDesc: "라벤더처럼 편안하고 포근한 향. 소중한 사람들과 함께하거나 평화로운 일상에 어울려요."
},
ISFP: {
traits: [{icon:"🎨",title:"예술적 감각",desc:"아름다움을 보고 만드는 능력이 있어요"},{icon:"🌿",title:"자연 친화",desc:"자연 속에서 영감을 얻어요"},{icon:"🕊️",title:"평화로운 성격",desc:"갈등을 피하고 조화를 추구해요"},{icon:"🌸",title:"섬세한 감성",desc:"순간순간의 아름다움을 포착해요"}],
seasons: ["자연 속 산책","미술관 방문","봄·가을 나들이","감성적인 카페"],
seasonDesc: "숲속 수채화처럼 자연스러운 향. 자연 속이나 감성적인 공간에서 완벽하게 어울려요."
},
ISTJ: {
traits: [{icon:"📚",title:"성실함",desc:"꾸준하고 책임감 있게 임해요"},{icon:"🏗️",title:"체계적 사고",desc:"논리적이고 체계적으로 접근해요"},{icon:"⏱️",title:"시간 엄수",desc:"약속과 기한을 철저히 지켜요"},{icon:"🔐",title:"신뢰성",desc:"한번 믿으면 끝까지 믿어줘요"}],
seasons: ["중요한 업무","가을·겨울","클래식한 모임","신뢰가 필요한 자리"],
seasonDesc: "오래된 책향처럼 클래식하고 깊은 향. 진지하고 신뢰가 중요한 자리에서 당신과 완벽해요."
},
ISTP: {
traits: [{icon:"🔧",title:"뛰어난 손재주",desc:"도구와 기계를 능숙하게 다뤄요"},{icon:"🧊",title:"냉철한 판단",desc:"감정에 흔들리지 않고 분석해요"},{icon:"🎯",title:"실용적 해결",desc:"가장 효율적인 방법을 찾아요"},{icon:"🌫️",title:"과묵한 매력",desc:"말보다 행동으로 보여줘요"}],
seasons: ["혼자만의 작업","새벽 드라이브","가을·겨울","미니멀한 일상"],
seasonDesc: "새벽 안개처럼 조용하고 절제된 향. 집중이 필요한 순간이나 서늘한 계절에 어울려요."
}
};
document.documentElement.style.setProperty('--type-color',d.color);
document.documentElement.style.setProperty('--type-light',d.light);
const mbti=p.get('mbti')||'';
const typename=decodeURIComponent(p.get('typename')||'');
document.getElementById('badgeText').textContent=mbti?`${mbti} · ${type.toUpperCase()}`:`${type.toUpperCase()} TYPE`;
// resultHeadline = 큰 글씨 (FLORAL TYPE 등)
document.getElementById('resultHeadline').innerHTML=typename
? typename
: `${type.toUpperCase()} TYPE`;
// typeName = 중간 글씨 수식어 (꽃향기를 품은 사람 등)
document.getElementById('typeName').innerHTML=d.headline;
const mbtiDescText = mbti && MBTI_DESC[mbti] ? MBTI_DESC[mbti] : d.desc;
document.getElementById('resultDesc').textContent=mbtiDescText;
const tagsEl=document.getElementById('resultTags');
d.tags.forEach(t=>{const s=document.createElement('span');s.className='rh-tag';s.textContent=t;tagsEl.appendChild(s);});
setTimeout(()=>{
animBar('sFloral','vFloral',scores.floral);
animBar('sWoody','vWoody',scores.woody);
animBar('sCitrus','vCitrus',scores.citrus);
animBar('sOriental','vOriental',scores.oriental);
animBar('sMusky','vMusky',scores.musky);
},900);
const displayTypeName = `${type.toUpperCase()} TYPE`;
document.getElementById('perfumesTitle').textContent=`${displayTypeName}을 위한 향수 추천`;
const grid=document.getElementById('perfumesGrid');
d.perfumes.forEach((pf,i)=>{
const c=document.createElement('div');
c.className='p-card reveal';
c.innerHTML=`<div class="p-rank">0${i+1}</div><div class="p-brand">${pf.brand}</div><div class="p-name">${pf.name}</div><div class="p-note-rows"><div class="p-note-row"><span class="p-note-lbl">Top</span><div class="p-note-track"><div class="p-note-fill" style="width:${pf.notes.top[1]}%"></div></div><span class="p-note-text">${pf.notes.top[0]}</span></div><div class="p-note-row"><span class="p-note-lbl">Mid</span><div class="p-note-track"><div class="p-note-fill" style="width:${pf.notes.mid[1]}%"></div></div><span class="p-note-text">${pf.notes.mid[0]}</span></div><div class="p-note-row"><span class="p-note-lbl">Base</span><div class="p-note-track"><div class="p-note-fill" style="width:${pf.notes.base[1]}%"></div></div><span class="p-note-text">${pf.notes.base[0]}</span></div></div><div class="p-tags">${pf.tags.map(t=>`<span class="p-tag">${t}</span>`).join('')}</div><p class="p-desc">${pf.desc}</p>`;
grid.appendChild(c);
});
const tg=document.getElementById('typesGrid');
otherInfo.filter(t=>t.key!==type).forEach(t=>{
const el=document.createElement('a');
el.className='type-card reveal';
el.href=`recommend.html?type=${t.key}&floral=20&woody=20&citrus=20&oriental=20&musky=20`;
el.innerHTML=`<div class="type-dot" style="background:${t.dot}"></div><div class="type-name">${t.name}</div><div class="type-ko">${t.ko}</div>`;
tg.appendChild(el);
});
const obs=new IntersectionObserver(entries=>{entries.forEach((e,i)=>{if(e.isIntersecting){setTimeout(()=>e.target.classList.add('visible'),i*80);obs.unobserve(e.target);}});},{threshold:.08});
document.querySelectorAll('.reveal').forEach(el=>obs.observe(el));
if (mbti && MBTI_TRAITS_DATA[mbti.toUpperCase()]) {
const mbtiData = MBTI_TRAITS_DATA[mbti.toUpperCase()];
// 1. 성격 특성 타이틀 매핑 및 그리드 내부 카드 노출
document.getElementById('traitTitleMbti').textContent = mbti.toUpperCase();
const traitGrid = document.getElementById('traitGrid');
traitGrid.innerHTML = mbtiData.traits.map(t => `
<div class="trait-item">
<div class="trait-icon">${t.icon}</div>
<div class="trait-title">${t.title}</div>
<div class="trait-desc">${t.desc}</div>
</div>
`).join('');
document.getElementById('traitsSection').style.display = 'block';
// 2. 계절 및 상황 텍스트 기술 및 태그 클라우드 생성
document.getElementById('mbtiSeasonDesc').textContent = mbtiData.seasonDesc;
const seasonTags = document.getElementById('seasonTags');
seasonTags.innerHTML = mbtiData.seasons.map(s => `<span class="season-tag">${s}</span>`).join('');
document.getElementById('seasonSection').style.display = 'block';
}
});
function animBar(fId,vId,target){
document.getElementById(fId).style.width=target+'%';
let c=0;const step=Math.max(1,Math.ceil(target/28));
const t=setInterval(()=>{c=Math.min(c+step,target);document.getElementById(vId).textContent=c+'%';if(c>=target)clearInterval(t);},38);
}
function shareResult() {
const url = window.location.href;
// 1. Web Share API를 지원하는 모바일 환경인 경우 (카톡, 인스타, 문자 등 기본 공유창 띄움)
if (navigator.share) {
navigator.share({
title: 'Scentype — 나의 향 결과',
text: '나에게 완벽하게 어울리는 향수를 확인해보세요!',
url: url
}).catch((error) => console.log('공유 실패 또는 취소:', error));
}
// 2. Web Share API를 지원하지 않는 PC 환경 등인 경우 (기존처럼 링크 복사 + 토스트 알림)
else {
if (navigator.clipboard) {
navigator.clipboard.writeText(url).then(showToast);
} else {
const ta = document.createElement('textarea');
ta.value = url;
document.body.appendChild(ta);
ta.select();
document.execCommand('copy');
document.body.removeChild(ta);
showToast();
}
}
}
function showToast(){const t=document.getElementById('toast');t.textContent='링크가 복사되었어요 ✓';t.classList.add('show');setTimeout(()=>t.classList.remove('show'),2600);}
</script>
</body>
</html>