?눓?눝 ?쇰낯 ?ы뻾 ?뚮옒??/title> <link rel="stylesheet" href="./styles.css" /> </head> <body> <header class="header"> <div class="header__inner"> <div class="brand"> <div class="brand__title">?눓?눝 ?쇰낯 ?ы뻾 ?뚮옒??/div> <div class="brand__sub" id="tripSubtitle">URL 怨듭쑀濡??щ윭 紐낆씠 ?④퍡 ?몄쭛</div> <div id="saveIndicator"></div> </div> <div class="header__actions"> <button class="btn btn--ghost" id="btnShare" type="button">怨듭쑀 留곹겕 蹂듭궗</button> <button class="btn btn--danger" id="btnReset" type="button">珥덇린??/button> </div> </div> </header> <main class="container"> <section class="card"> <div class="tabs" role="tablist" aria-label="?ы뻾 ?뚮옒????> <button class="tab tab--active" data-tab="overview" type="button">媛쒖슂</button> <button class="tab" data-tab="itinerary" type="button">?쇱젙 & 吏??/button> <button class="tab" data-tab="allSchedule" type="button">?꾩껜 ?쇱젙</button> <button class="tab" data-tab="people" type="button">?몄썝</button> </div>  <section class="panel panel--active" id="panel-overview" role="tabpanel"> <div class="grid2"> <div class="box"> <h2 class="h2">?ы뻾 湲곕낯?뺣낫</h2> <div class="formRow"> <label>?ы뻾 ?대쫫</label> <input id="tripName" placeholder="?? ?꾩퓙 3諛??? /> </div> <div class="formRow"> <label>?꾩떆/吏??/label> <input id="tripCity" placeholder="?? ?꾩퓙" list="japanCities" autocomplete="off" /> <datalist id="japanCities"> <option value="?꾩퓙"> <option value="?ㅼ궗移?> <option value="援먰넗"> <option value="?꾩퓼?ㅼ뭅"> <option value="?욱룷濡?> <option value="?섍퀬??> <option value="?덈줈?쒕쭏"> <option value="?섎씪"> <option value="怨좊쿋"> <option value="?붿퐫?섎쭏"> <option value="?쇰떎??> <option value="媛?섏옄?"> <option value="?섍??ы궎"> <option value="?ㅽ궎?섏?"> <option value="?섏퐫??> <option value="?쏆퐫"> <option value="媛留덉퓼??> <option value="?좏썑??> <option value="踰논뫖"> <option value="援щ쭏紐⑦넗"> </datalist> </div> <div class="formRow formRow--2"> <div> <label>?쒖옉??/label> <input id="startDate" type="date" /> </div> <div> <label>醫낅즺??/label> <input id="endDate" type="date" /> </div> </div> <div class="formRow"> <label>硫붾え</label> <textarea id="tripMemo" rows="4" placeholder="??났/?숈냼/二쇱쓽?ы빆 ??></textarea> </div> <div class="row"> <button class="btn" id="btnGenerateDays" type="button">?쇱젙 Day ?먮룞 ?앹꽦</button> <div class="hint">?쒖옉/醫낅즺??湲곗??쇰줈 Day瑜??먮룞?쇰줈 留뚮뱾?댁슂.</div> </div> </div> <div class="box"> <h2 class="h2">以鍮?泥댄겕由ъ뒪??/h2> <div class="inline"> <input id="todoInput" placeholder="?? ?ш텒 ?뺤씤 / eSIM 援щℓ / ?뷀솕 ?섏쟾" /> <button class="btn" id="btnAddTodo" type="button">異붽?</button> </div> <div id="todoList" class="list"></div> <div class="divider"></div> <div class="stat-cards" id="statCards"> <div class="stat-card stat-card--dday" id="statDday"> <div class="stat-card__value">-</div> <div class="stat-card__label">D-day</div> </div> <div class="stat-card" id="statPeople" role="button" tabindex="0"> <div class="stat-card__value">0</div> <div class="stat-card__label">?몄썝</div> </div> <div class="stat-card" id="statDays" role="button" tabindex="0"> <div class="stat-card__value">0</div> <div class="stat-card__label">Days</div> </div> <div class="stat-card" id="statItems" role="button" tabindex="0"> <div class="stat-card__value">0</div> <div class="stat-card__label">?쇱젙</div> </div> </div> </div> </div> <div class="box" id="overviewPreview" style="margin-top:14px;"> <div class="preview-header"> <h2 class="h2" style="margin:0;">泥レ㎏ ???쇱젙</h2> <button class="btn btn--outline btn--sm" id="btnGoItinerary" type="button">?쇱젙 ??뿉??紐⑤몢 蹂닿린 ??/button> </div> <div id="previewList" class="preview-list"></div> </div> </section>  <section class="panel" id="panel-itinerary" role="tabpanel"> <div class="grid--plan">  <div class="plan-left"> <div class="toolbar"> <div class="toolbar__left"> <select id="daySelect"></select> <div class="small" id="dayMeta"></div> </div> </div> <div class="people-bar-label">?대떦???좏깮</div> <div class="people-bar" id="peopleBar"></div> <div class="box"> <h2 class="h2">?쇱젙 異붽?</h2> <div class="formGrid"> <div class="formRow"> <label>?쇱젙 ?쒕ぉ</label> <input id="itemTitle" placeholder="?? ?꾩궗荑좎궗 ?쇱냼吏" /> </div> <div class="formRow"> <label>?μ냼(寃?됱뼱)</label> <input id="itemPlace" placeholder="?? Senso-ji Temple" /> </div> <div class="formRow"> <label>寃쎈줈 異쒕컻吏</label> <input id="itemRouteStart" placeholder="?? Hakata Station" /> </div> <div class="formRow"> <label>寃쎈줈 ?꾩갑吏</label> <input id="itemRouteEnd" placeholder="?? Ichiran Main Shop" /> </div> <div class="formRow formRow--full"> <label>硫붾え</label> <input id="itemNote" placeholder="?? ?낆옣猷??湲곗떆媛??덉빟踰덊샇" /> </div> </div> <div class="row"> <button class="btn" id="btnAddItem" type="button">?쇱젙 異붽?</button> <div class="hint">異붽????쇱젙? ?꾨즺 泥댄겕/??젣媛媛?ν빐??</div> </div> </div> <div class="box"> <h2 class="h2">?대떦 Day ?쇱젙</h2> <div id="itineraryList" class="list"></div> </div> <div class="box"> <h2 class="h2">?μ냼 由ъ뒪??/h2> <div class="inline"> <input id="placeName" placeholder="?μ냼 ?대쫫 (?? ?꾩퓙???" /> <input id="placeQuery" placeholder="吏??寃?됱뼱 (?? Tokyo Tower)" /> <button class="btn" id="btnAddPlace" type="button">異붽?</button> </div> <div class="hint">?μ냼瑜?異붽??섎㈃吏?꾩뿉??諛붾줈 ?뺤씤?????덉뼱??</div> <div id="placesList" class="list"></div> </div> </div>  <div class="plan-right"> <div class="box map-search-box"> <h2 class="h2">AI ?μ냼 寃??/h2> <div class="row row--space" style="margin-bottom:8px;"> <span class="small">異붿쿇 紐⑸줉 ?쒖떆</span> <button class="btn btn--outline btn--sm" id="btnToggleReco" type="button">?묎린</button> </div> <div class="inline"> <input id="mapSearchInput" placeholder="?? ?꾩퓙?먯꽌 ?쇨꼍 醫뗭? ?꾨쭩? 異붿쿇?댁쨾" /> <button class="btn" id="btnMapSearch" type="button">寃??/button> </div> <div class="hint">臾몄옣?쇰줈 寃?됲븯硫??μ냼 異붿쿇 紐⑸줉???섏삤怨? ?대┃?섎㈃吏?꾧? ?대룞?⑸땲??</div> <div class="inline" style="margin-top:8px;"> <input id="mapAutoInput" placeholder="?μ냼 ?먮룞?꾩꽦 寃??(?? Ichiran Ramen Tenjin)" /> <button class="btn btn--outline" id="btnMapAutoMove" type="button">?대룞</button> </div> <div id="mapRecommendations" class="list map-recommendations"></div> </div> <div class="map-layout"> <div class="mapBox"> <div id="mapCanvas" aria-label="Google Map"></div> <iframe id="mapRouteFrame" title="Google Route Map" loading="lazy" referrerpolicy="no-referrer-when-downgrade" src="about:blank" style="display:none; width:100%; height:100%; border:0;"> </iframe> </div> </div> <div class="row row--space" style="margin-top:8px;"> <div class="inline"> <button class="btn btn--ghost" id="btnOpenMap" type="button">????뿉???닿린</button> </div> <div class="small" id="mapHint">?좏깮???μ냼: Tokyo Station</div> </div> </div> </div> </section> <section class="panel" id="panel-allSchedule" role="tabpanel"> <div class="all-schedule-layout"> <div class="box"> <h2 class="h2">?좎쭨蹂?留덉뒪??/h2> <div class="hint" style="margin-bottom:8px;">?ㅻⅨ履??꾩씠肄섏쓣 ?뚮윭 ?곸꽭瑜??뺤씤?섏꽭??</div> <div id="allScheduleList" class="list all-schedule-list"></div> </div> <div class="box"> <h2 class="h2">?곸꽭 ?뺣낫</h2> <div id="allScheduleDetail" class="all-schedule-detail"> <div class="hint">?쇱젙???뺣낫 ?꾩씠肄섏쓣 ?좏깮?섎㈃ ?곸꽭? 吏?꾧? ?쒖떆?⑸땲??</div> </div> <div class="detailMapBox"> <iframe id="allScheduleDetailMap" title="Schedule Detail Map" loading="lazy" referrerpolicy="no-referrer-when-downgrade" src="https://www.google.com/maps?q=Tokyo%20Station&output=embed"> </iframe> </div> </div> </div> </section>  <section class="panel" id="panel-people" role="tabpanel"> <div class="box"> <h2 class="h2">?ы뻾 ?몄썝</h2> <div class="inline"> <input id="personName" placeholder="?대쫫 ?낅젰 (?? ?쇱샊, 泥좎닔...)" /> <button class="btn" id="btnAddPerson" type="button">異붽?</button> </div> <div id="peopleList" class="list"></div> <div class="divider"></div> <div class="hint"> ?몄썝? ?쇱젙??"?대떦??濡??곌껐?⑸땲?? ?몄썝????젣?섎㈃ ?대떦 ?대떦??吏?뺤? ?댁젣?⑸땲?? </div> </div> </section> </section> <section class="footerNote"> <div class="small"> ???먮룞 ??? ?낅젰?섎㈃ <b>?쒕쾭(AWS RDS)</b>???먮룞?쇰줈 ??λ맗?덈떎.<br/> ??怨듭쑀?섎젮硫? <b>怨듭쑀 留곹겕 蹂듭궗</b> 踰꾪듉???뚮윭 URL???꾩넚?섏꽭?? 媛숈? URL濡??묒냽?섎㈃ ?숈씪 ?곗씠?곕? ?④퍡 ?몄쭛?????덉뼱?? </div> </section> <div id="loadingOverlay"> <div class="loadingBox"> <div class="loadingSpinner"></div> <div>遺덈윭?ㅻ뒗 以?..</div> </div> </div> </main> <script src="./app.js"></script> </body> </html>